/* /Components/Layout/Header.razor.rz.scp.css */
/* ----------------------------------------------------------------
   TOPBAR
---------------------------------------------------------------- */

.topbar[b-l04bbodsdm] {
    position: relative;
    display: flex;
    align-items: center;
    padding: 8px 14px;
    background: #f5f5f7;
    border-bottom: 1px solid #e0e0e5;
    gap: 8px;
    height: 48px;
    flex-shrink: 0;
}

.topbar-center[b-l04bbodsdm] {
    position: static;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: min(820px, 64vw);
    margin-left: 2px;
    pointer-events: auto;
    min-width: 0;
    flex-shrink: 1;
}

.topbar-admin-center[b-l04bbodsdm] {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, -50%);
    pointer-events: auto;
}

.topbar-nav-link--admin[b-l04bbodsdm] {
    border-color: #f0c7c2;
    color: #b42318;
    background: #fff4f2;
    letter-spacing: 0.04em;
}

.topbar-nav-link--admin:hover[b-l04bbodsdm],
.topbar-nav-link--admin.topbar-nav-link--active[b-l04bbodsdm] {
    border-color: #d92d20;
    color: #d92d20;
    background: #ffe7e3;
    box-shadow: 0 5px 14px rgba(217, 45, 32, 0.14);
}

.topbar-nav-link[b-l04bbodsdm] {
    position: relative;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #d9e8fb;
    border-radius: 17px;
    padding: 0 15px 0 13px;
    color: #145da0;
    background: #ffffff;
    box-shadow: 0 5px 14px rgba(20, 93, 160, 0.1);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 850;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.16s, border-color 0.16s, color 0.16s, transform 0.12s;
}

.topbar-nav-link:hover[b-l04bbodsdm] {
    border-color: #007aff;
    color: #007aff;
    background: #f0f7ff;
    text-decoration: none;
}

.topbar-nav-link:active[b-l04bbodsdm] {
    transform: translateY(1px);
}

.topbar-nav-link--active[b-l04bbodsdm] {
    border-color: rgba(0, 122, 255, 0.42);
    color: #007aff;
    background: #f0f7ff;
    box-shadow: 0 5px 14px rgba(0, 122, 255, 0.13);
}

.topbar-nav-link--active[b-l04bbodsdm]::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: -8px;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: #007aff;
}

.topbar-nav-link--coming-soon[b-l04bbodsdm] {
    border-color: #e5e5ea;
    color: #6b7280;
    background: #fafafa;
    box-shadow: none;
    cursor: default;
    opacity: 1;
}

.topbar-nav-link--coming-soon small[b-l04bbodsdm] {
    border-radius: 999px;
    padding: 2px 6px;
    color: #8a5b00;
    background: #fff4d6;
    font-size: 9px;
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.topbar-nav-link--coming-soon:hover[b-l04bbodsdm] {
    border-color: #e5e5ea;
    color: #6b7280;
    background: #fafafa;
}

.topbar-nav-link--coming-soon:active[b-l04bbodsdm] {
    transform: none;
}

.topbar-spacer[b-l04bbodsdm] {
    flex: 1;
}

.topbar-btn[b-l04bbodsdm] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.06);
    color: #3c3c43;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    transition: background 0.18s;
    touch-action: manipulation;
    flex-shrink: 0;
}

.topbar-actions[b-l04bbodsdm] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.topbar-settings-wrap[b-l04bbodsdm] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.settings-menu-backdrop[b-l04bbodsdm] {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: default;
}

.settings-menu[b-l04bbodsdm] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 101;
    width: 286px;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: white;
    border: 1px solid #e5e5ea;
    border-radius: 12px;
    box-shadow: 0 18px 45px rgba(0,0,0,0.18), 0 4px 12px rgba(0,0,0,0.08);
}

.settings-menu[b-l04bbodsdm]::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 14px;
    width: 12px;
    height: 12px;
    background: white;
    border-left: 1px solid #e5e5ea;
    border-top: 1px solid #e5e5ea;
    transform: rotate(45deg);
}

.settings-menu-item[b-l04bbodsdm] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 42px;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #1c1c1e;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    touch-action: manipulation;
}

.settings-menu-item:hover[b-l04bbodsdm],
.settings-menu-item:focus-visible[b-l04bbodsdm] {
    background: #f5f5f7;
    outline: none;
}

.settings-menu-icon[b-l04bbodsdm] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #007aff;
    background: rgba(0, 122, 255, 0.1);
}

.topbar-auth-form[b-l04bbodsdm] {
    display: flex;
    margin: 0;
}

.topbar-session[b-l04bbodsdm] {
    height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    border: 1px solid #e0e0e5;
    border-radius: 17px;
    background: white;
    padding: 2px 2px 2px 4px;
}

.topbar-user[b-l04bbodsdm] {
    max-width: 180px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 30px;
    border: 0;
    border-radius: 15px;
    padding: 0 7px 0 2px;
    color: #1c1c1e;
    background: transparent;
    font: inherit;
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}

.topbar-user:hover[b-l04bbodsdm],
.topbar-user:focus-visible[b-l04bbodsdm] {
    color: #007aff;
    background: #f0f7ff;
    outline: none;
}

.topbar-user-avatar[b-l04bbodsdm] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    background: #007aff;
    font-size: 12px;
    font-weight: 800;
}

.topbar-user-name[b-l04bbodsdm] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
    font-weight: 700;
}

.topbar-logout-btn[b-l04bbodsdm] {
    width: 30px;
    height: 30px;
    color: #636366;
    background: transparent;
}

.topbar-logout-btn:hover[b-l04bbodsdm] {
    color: #ff3b30;
    background: #fff2f1;
}

.topbar-notification-btn[b-l04bbodsdm] {
    position: relative;
}

.topbar-notification-badge[b-l04bbodsdm] {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #f5f5f7;
    border-radius: 999px;
    padding: 0 4px;
    color: white;
    background: #b42318;
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
}

    .topbar-btn:hover[b-l04bbodsdm] {
        background: rgba(0,0,0,0.12);
    }

    .topbar-btn:active[b-l04bbodsdm] {
        background: rgba(0,0,0,0.18);
    }

.topbar-btn-active[b-l04bbodsdm] {
    background: rgba(0,122,255,0.15) !important;
    color: #007aff !important;
}

@media (max-width: 520px) {
    .topbar-center[b-l04bbodsdm] {
        max-width: calc(100% - 170px);
    }

    .topbar-admin-center[b-l04bbodsdm] {
        position: static;
        transform: none;
        margin-left: auto;
    }

    .settings-menu[b-l04bbodsdm] {
        position: fixed;
        top: 54px;
        left: 10px;
        right: 10px;
        width: auto;
    }

    .settings-menu[b-l04bbodsdm]::before {
        display: none;
    }

    .topbar-nav-link[b-l04bbodsdm] {
        width: 34px;
        padding: 0;
    }

    .topbar-nav-link span[b-l04bbodsdm] {
        display: none;
    }

    .topbar-nav-link small[b-l04bbodsdm] {
        display: none;
    }

    .topbar-nav-link--active[b-l04bbodsdm]::after {
        left: 8px;
        right: 8px;
    }

    .topbar-user-name[b-l04bbodsdm] {
        display: none;
    }

    .topbar-session[b-l04bbodsdm] {
        padding-left: 3px;
    }

    .topbar-user[b-l04bbodsdm] {
        padding-right: 0;
    }
}


/* ----------------------------------------------------------------
   NOTIFICATIONS — Reject confirmation overlay (top-level, viewport-wide)
---------------------------------------------------------------- */

.reject-overlay[b-l04bbodsdm] {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    animation: rejectOverlayIn-b-l04bbodsdm 0.18s ease-out;
}

@keyframes rejectOverlayIn-b-l04bbodsdm {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.reject-overlay__backdrop[b-l04bbodsdm] {
    position: absolute;
    inset: 0;
    border: none;
    padding: 0;
    background: rgba(15, 15, 18, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    cursor: pointer;
}

.reject-card[b-l04bbodsdm] {
    position: relative;
    width: min(440px, 100%);
    max-height: calc(100vh - 56px);
    overflow: auto;
    background: white;
    border-radius: 18px;
    box-shadow: 0 22px 56px rgba(0, 0, 0, 0.32);
    display: flex;
    flex-direction: column;
    animation: rejectCardIn-b-l04bbodsdm 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes rejectCardIn-b-l04bbodsdm {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.reject-card__header[b-l04bbodsdm] {
    padding: 18px 20px 0;
}

.reject-card__header span[b-l04bbodsdm] {
    display: block;
    color: #b42318;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.reject-card__header h2[b-l04bbodsdm] {
    margin: 4px 0 0;
    color: #1c1c1e;
    font-size: 18px;
    font-weight: 900;
}

.reject-card__body[b-l04bbodsdm] {
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reject-summary[b-l04bbodsdm] {
    border-radius: 12px;
    padding: 12px;
    background: #fafafa;
}

.reject-summary > strong[b-l04bbodsdm] {
    display: block;
    margin-bottom: 8px;
    color: #1c1c1e;
    font-size: 13px;
    font-weight: 900;
}

.reject-summary__grid[b-l04bbodsdm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

.reject-summary__grid > span[b-l04bbodsdm] {
    min-width: 0;
    border-radius: 10px;
    padding: 8px 10px;
    background: white;
}

.reject-summary__grid small[b-l04bbodsdm] {
    display: block;
    margin-bottom: 3px;
    color: #8e8e93;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reject-summary__grid strong[b-l04bbodsdm] {
    display: block;
    color: #1c1c1e;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
}

.reject-field span[b-l04bbodsdm] {
    display: block;
    margin-bottom: 6px;
    color: #8e8e93;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.reject-field textarea[b-l04bbodsdm] {
    width: 100%;
    min-height: 96px;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    padding: 10px 12px;
    color: #1c1c1e;
    background: white;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    resize: vertical;
    box-sizing: border-box;
}

.reject-field textarea:focus[b-l04bbodsdm] {
    border-color: #ff3b30;
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.12);
}

.reject-card__actions[b-l04bbodsdm] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 20px 18px;
}

.reject-btn[b-l04bbodsdm] {
    min-height: 38px;
    border: none;
    border-radius: 10px;
    padding: 0 16px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s, background 0.18s;
}

.reject-btn--secondary[b-l04bbodsdm] {
    color: #3c3c43;
    background: #f2f2f7;
}

.reject-btn--secondary:hover[b-l04bbodsdm] {
    background: #e5e5ea;
}

.reject-btn--primary[b-l04bbodsdm] {
    color: white;
    background: #ff3b30;
}

.reject-btn--primary:hover:not(:disabled)[b-l04bbodsdm] {
    opacity: 0.87;
}

.reject-btn--primary:disabled[b-l04bbodsdm] {
    cursor: not-allowed;
    opacity: 0.5;
}

@media (max-width: 760px) {
    .reject-overlay[b-l04bbodsdm] {
        padding: 16px;
    }
}


.topbar-notification-wrap[b-l04bbodsdm] {
    position: relative;
    display: inline-flex;
}

.topbar-notification-badge[b-l04bbodsdm] {
    top: -7px;
    right: -9px;
    min-width: 20px;
    height: 18px;
    border: 1px solid #ffdba1;
    border-radius: 5px;
    color: #9a5a00;
    background: #fff7e8;
    box-shadow: 0 5px 12px rgba(154, 90, 0, 0.14);
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-59p6jvtn19] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-59p6jvtn19] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Layout/Notifications/NotificationsListRow.razor.rz.scp.css */
.nd-row[b-wvhyhsm7jh] {
    display: grid;
    grid-template-columns: 32px 1fr auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid #ededf2;
    border-radius: 0;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font: inherit;
    transition: background 0.12s;
}

.nd-row:hover[b-wvhyhsm7jh] {
    background: #f0f6fc;
}

.nd-row--selected[b-wvhyhsm7jh],
.nd-row--selected:hover[b-wvhyhsm7jh] {
    background: #dfeefd;
    box-shadow: inset 3px 0 0 #007aff;
}

.nd-avatar[b-wvhyhsm7jh] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007aff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.nd-row-main[b-wvhyhsm7jh] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.nd-row-title[b-wvhyhsm7jh] {
    font-size: 13px;
    font-weight: 800;
    color: #1c1c1e;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.nd-row-meta[b-wvhyhsm7jh] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 1px;
}

.nd-row-side[b-wvhyhsm7jh] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

.nd-row-time[b-wvhyhsm7jh] {
    font-size: 10px;
    color: #8e8e93;
    font-weight: 600;
}

.nd-row-dot[b-wvhyhsm7jh] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff9500;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.16);
}

.nd-row--approved .nd-row-dot[b-wvhyhsm7jh] {
    background: #34c759;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.16);
}

.nd-row--rejected .nd-row-dot[b-wvhyhsm7jh] {
    background: #ff3b30;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.16);
}
/* /Components/Layout/Notifications/NotificationsModal.razor.rz.scp.css */
/* NotificationsModal scoped CSS */

.nd-modal[b-glqlvmiwxv] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.nd-header[b-glqlvmiwxv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    background: white;
}

.nd-title[b-glqlvmiwxv] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.nd-title-icon[b-glqlvmiwxv] {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 10px;
    background: #f0f7ff;
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-title-back[b-glqlvmiwxv] {
    display: none;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border: none;
    border-radius: 10px;
    padding: 0;
    background: #f0f7ff;
    color: #007aff;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s;
}

.nd-title-back:hover[b-glqlvmiwxv] {
    background: #d9e8fb;
}

.nd-title-text[b-glqlvmiwxv] {
    min-width: 0;
}

.nd-title-text h2[b-glqlvmiwxv] {
    margin: 0;
    color: #1c1c1e;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
}

.nd-title-sub[b-glqlvmiwxv] {
    display: block;
    font-size: 11px;
    color: #8e8e93;
    font-weight: 600;
    margin-top: 2px;
}

.nd-body[b-glqlvmiwxv] {
    display: grid;
    grid-template-columns: 340px 1fr;
    min-height: 480px;
    height: min(620px, calc(100vh - 220px));
    border-top: 1px solid #e5e5ea;
}

.nd-master[b-glqlvmiwxv] {
    border-right: 1px solid #e5e5ea;
    background: white;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.nd-toolbar[b-glqlvmiwxv] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.nd-search[b-glqlvmiwxv] {
    width: 272px;
    max-width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f7;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 0 8px 0 12px;
}

.nd-search:focus-within[b-glqlvmiwxv],
.nd-search--active[b-glqlvmiwxv] {
    background: white;
    border-color: #007aff;
}

.nd-search-icon[b-glqlvmiwxv] {
    color: #8e8e93;
    flex-shrink: 0;
}

.nd-search input[b-glqlvmiwxv] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
}

.nd-search input[b-glqlvmiwxv]::placeholder {
    color: #8e8e93;
    font-weight: 500;
}

.nd-search-clear[b-glqlvmiwxv] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    padding: 0;
    background: #e5e5ea;
    color: #8e8e93;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-search-clear:hover[b-glqlvmiwxv] {
    background: #d1d1d6;
    color: #1c1c1e;
}

.nd-filter-wrap[b-glqlvmiwxv] {
    position: relative;
}

.nd-filter-btn[b-glqlvmiwxv] {
    position: relative;
    width: 36px;
    height: 36px;
    border: 1.5px solid #d9e8fb;
    border-radius: 10px;
    background: #f0f7ff;
    color: #145da0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nd-filter-btn:hover[b-glqlvmiwxv],
.nd-filter-btn--open[b-glqlvmiwxv] {
    border-color: #007aff;
    color: #007aff;
    background: white;
}

.nd-filter-dot[b-glqlvmiwxv] {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #007aff;
}

.nd-filter-backdrop[b-glqlvmiwxv] {
    position: fixed;
    inset: 0;
    z-index: 120;
    border: none;
    padding: 0;
    background: transparent;
}

.nd-filter-menu[b-glqlvmiwxv] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 121;
    width: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    border: 1.5px solid #d9e8fb;
    border-radius: 14px;
    padding: 6px;
    background: white;
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.18);
}

.nd-filter-option[b-glqlvmiwxv] {
    min-height: 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: none;
    border-radius: 10px;
    padding: 0 10px;
    color: #3c3c43;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.nd-filter-option strong[b-glqlvmiwxv] {
    min-width: 28px;
    border-radius: 999px;
    padding: 3px 8px;
    color: #636366;
    background: #f2f2f7;
    font-size: 11px;
    text-align: center;
    font-weight: 800;
}

.nd-filter-option:hover[b-glqlvmiwxv],
.nd-filter-option--active[b-glqlvmiwxv] {
    color: #007aff;
    background: #f0f7ff;
}

.nd-filter-option--active strong[b-glqlvmiwxv] {
    color: white;
    background: #007aff;
}

.nd-error[b-glqlvmiwxv] {
    margin: 10px 12px 0;
    padding: 8px 12px;
    border: 1px solid #ffd7d4;
    border-radius: 10px;
    background: #fff0ef;
    color: #b42318;
    font-size: 12px;
    font-weight: 700;
}

.nd-list[b-glqlvmiwxv] {
    flex: 1;
    overflow-y: auto;
    padding: 0 0 12px;
}

.nd-section-head[b-glqlvmiwxv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px 8px;
    background: #fafbfd;
    border-bottom: 1px solid #e5e5ea;
}

.nd-section-head--with-gap[b-glqlvmiwxv] {
    border-top: 1px solid #e5e5ea;
}

.nd-section-label[b-glqlvmiwxv] {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8e8e93;
}

.nd-section-count[b-glqlvmiwxv] {
    font-size: 10px;
    font-weight: 800;
    background: #e5e5ea;
    color: #636366;
    border-radius: 999px;
    padding: 2px 8px;
}

.nd-section-empty[b-glqlvmiwxv] {
    padding: 14px 14px;
    font-size: 12px;
    color: #8e8e93;
    font-weight: 600;
    font-style: italic;
    border-bottom: 1px solid #ededf2;
}

.nd-detail[b-glqlvmiwxv] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: white;
}

.nd-detail-empty[b-glqlvmiwxv] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
}

.nd-detail-empty-icon[b-glqlvmiwxv] {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #f5f5f7;
    color: #c7c7cc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}

.nd-detail-empty strong[b-glqlvmiwxv] {
    font-size: 14px;
    color: #1c1c1e;
    font-weight: 800;
}

.nd-detail-empty span[b-glqlvmiwxv] {
    font-size: 12px;
    color: #8e8e93;
}

.nd-detail-head[b-glqlvmiwxv] {
    padding: 18px 22px 14px;
    border-bottom: 1px solid #ededf2;
}

.nd-detail-eyebrow[b-glqlvmiwxv] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8e8e93;
    margin-bottom: 6px;
}

.nd-badge[b-glqlvmiwxv] {
    font-size: 10px;
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: 0.03em;
    font-weight: 800;
}

.nd-badge--pending[b-glqlvmiwxv] {
    background: #fff7e8;
    color: #9a5a00;
}

.nd-badge--approved[b-glqlvmiwxv] {
    background: #edfaf1;
    color: #1f7a36;
}

.nd-badge--rejected[b-glqlvmiwxv] {
    background: #fff0ef;
    color: #b42318;
}

.nd-detail h3[b-glqlvmiwxv] {
    margin: 0;
    font-size: 22px;
    font-weight: 900;
    color: #1c1c1e;
    line-height: 1.15;
    overflow-wrap: break-word;
    word-break: break-word;
}

.nd-detail-user[b-glqlvmiwxv] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.nd-avatar[b-glqlvmiwxv] {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #007aff;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.nd-detail-user .nd-avatar[b-glqlvmiwxv] {
    width: 36px;
    height: 36px;
    font-size: 12px;
}

.nd-detail-user-info[b-glqlvmiwxv] {
    line-height: 1.2;
}

.nd-detail-user-info strong[b-glqlvmiwxv] {
    font-size: 13px;
    font-weight: 800;
    color: #1c1c1e;
}

.nd-detail-user-info span[b-glqlvmiwxv] {
    display: block;
    font-size: 11px;
    color: #8e8e93;
    font-weight: 600;
    margin-top: 2px;
}

.nd-detail-body[b-glqlvmiwxv] {
    flex: 1;
    overflow-y: auto;
    padding: 16px 22px;
}

.nd-detail-grid[b-glqlvmiwxv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.nd-detail-cell[b-glqlvmiwxv] {
    background: #f7f7f9;
    border: 1px solid #ededf2;
    border-radius: 12px;
    padding: 10px 12px;
    min-width: 0;
}

.nd-detail-cell--full[b-glqlvmiwxv] {
    grid-column: 1 / -1;
}

.nd-detail-cell small[b-glqlvmiwxv] {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8e8e93;
    margin-bottom: 4px;
}

.nd-detail-cell strong[b-glqlvmiwxv] {
    font-size: 14px;
    font-weight: 800;
    color: #1c1c1e;
    word-break: break-word;
}

.nd-detail-note[b-glqlvmiwxv] {
    background: #fffaef;
    border: 1px solid #fae8c5;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 14px;
}

.nd-detail-note small[b-glqlvmiwxv] {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #9a5a00;
    margin-bottom: 4px;
}

.nd-detail-note p[b-glqlvmiwxv] {
    margin: 0;
    font-size: 13px;
    color: #5a3a00;
    line-height: 1.4;
    white-space: pre-wrap;
}

.nd-detail-rejection[b-glqlvmiwxv] {
    background: #fff0ef;
    border: 1px solid #f5d4d1;
    border-radius: 12px;
    padding: 10px 12px;
}

.nd-detail-rejection small[b-glqlvmiwxv] {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #b42318;
    margin-bottom: 4px;
}

.nd-detail-rejection p[b-glqlvmiwxv] {
    margin: 0;
    font-size: 13px;
    color: #7a1812;
    line-height: 1.4;
    white-space: pre-wrap;
}

.nd-detail-footer[b-glqlvmiwxv] {
    display: flex;
    gap: 10px;
    padding: 14px 22px 18px;
    border-top: 1px solid #ededf2;
    background: white;
}

.nd-action[b-glqlvmiwxv] {
    flex: 1;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    padding: 0 20px;
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.18s, background 0.18s, border-color 0.18s, color 0.18s;
}

.nd-action--approve[b-glqlvmiwxv] {
    border: none;
    background: #34c759;
    color: white;
}

.nd-action--approve:hover[b-glqlvmiwxv] {
    opacity: 0.87;
}

.nd-action--reject[b-glqlvmiwxv] {
    background: transparent;
    color: #636366;
    border: 1.5px solid #e5e5ea;
}

.nd-action--reject:hover[b-glqlvmiwxv] {
    color: #ff3b30;
    border-color: #ff3b30;
    background: #fff5f5;
}

.nd-detail-decided[b-glqlvmiwxv] {
    padding: 12px 22px 18px;
    border-top: 1px solid #ededf2;
    font-size: 12px;
    color: #8e8e93;
    font-weight: 600;
    text-align: center;
}

.nd-detail-decided strong[b-glqlvmiwxv] {
    color: #3c3c43;
    font-weight: 800;
}

@media (max-width: 760px) {
    .nd-header[b-glqlvmiwxv] {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .nd-toolbar[b-glqlvmiwxv] {
        width: 100%;
    }

    .nd-search[b-glqlvmiwxv] {
        width: auto;
        flex: 1;
        min-width: 0;
    }

    .nd-modal--has-selection .nd-title-icon[b-glqlvmiwxv] {
        display: none;
    }

    .nd-modal--has-selection .nd-title-back[b-glqlvmiwxv] {
        display: inline-flex;
    }

    .nd-body[b-glqlvmiwxv] {
        grid-template-columns: 1fr;
        position: relative;
        height: min(620px, calc(100vh - 200px));
    }

    .nd-master[b-glqlvmiwxv] {
        border-right: none;
    }

    .nd-detail[b-glqlvmiwxv] {
        position: absolute;
        inset: 0;
        background: white;
        transform: translateX(100%);
        transition: transform 0.2s ease-out;
        pointer-events: none;
        border-left: 1px solid #ededf2;
    }

    .nd-body--has-selection .nd-detail[b-glqlvmiwxv] {
        transform: translateX(0);
        pointer-events: auto;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-ftkhojyi97],
.components-reconnect-repeated-attempt-visible[b-ftkhojyi97],
.components-reconnect-failed-visible[b-ftkhojyi97],
.components-pause-visible[b-ftkhojyi97],
.components-resume-failed-visible[b-ftkhojyi97],
.components-rejoining-animation[b-ftkhojyi97] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-retrying[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-failed[b-ftkhojyi97],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-ftkhojyi97] {
    display: block;
}


#components-reconnect-modal[b-ftkhojyi97] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-ftkhojyi97 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-ftkhojyi97 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-ftkhojyi97 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-ftkhojyi97]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-ftkhojyi97 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-ftkhojyi97 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-ftkhojyi97 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-ftkhojyi97 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-ftkhojyi97] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-ftkhojyi97] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-ftkhojyi97] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-ftkhojyi97] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-ftkhojyi97] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-ftkhojyi97] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-ftkhojyi97] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-ftkhojyi97 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-ftkhojyi97] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-ftkhojyi97 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Admin/AdminChanges.razor.rz.scp.css */
.admin-root[b-ujcn2tq5ls] {
    height: calc(100vh - 48px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 18px clamp(14px, 2vw, 28px) 18px;
    color: #182026;
    background: #f5eeee;
}

.admin-root--blocked[b-ujcn2tq5ls] {
    display: grid;
    place-items: center;
}

.admin-denied[b-ujcn2tq5ls] {
    width: min(420px, 100%);
    display: grid;
    gap: 10px;
    justify-items: center;
    border: 1px solid #dfe8e4;
    border-radius: 8px;
    padding: 34px 26px;
    text-align: center;
    background: white;
    box-shadow: 0 18px 46px rgba(24, 32, 38, 0.12);
}

.admin-denied-icon[b-ujcn2tq5ls] {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: #b42318;
    background: #fff1ef;
}

.admin-denied h1[b-ujcn2tq5ls],
.admin-hero h1[b-ujcn2tq5ls] {
    margin: 0;
    font-size: clamp(1.8rem, 3vw, 3.2rem);
    font-weight: 950;
    letter-spacing: 0;
}

.admin-denied p[b-ujcn2tq5ls],
.admin-title-block p[b-ujcn2tq5ls] {
    margin: 0;
    color: #5d6a63;
    font-size: 0.96rem;
    font-weight: 650;
    line-height: 1.4;
}

.admin-hero[b-ujcn2tq5ls] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 18px;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.admin-title-block[b-ujcn2tq5ls] {
    display: grid;
    gap: 5px;
}

.admin-kicker[b-ujcn2tq5ls] {
    width: max-content;
    border: 1px solid rgba(180, 35, 24, 0.22);
    border-radius: 6px;
    padding: 4px 8px;
    color: #b42318;
    background: #ffe7e3;
    font-size: 0.68rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.admin-stats[b-ujcn2tq5ls] {
    min-width: 190px;
    border: 1px solid #d9e5e0;
    border-radius: 8px;
    padding: 12px 14px;
    background: white;
    box-shadow: 0 10px 24px rgba(24, 32, 38, 0.08);
}

.admin-stats span[b-ujcn2tq5ls],
.admin-stats strong[b-ujcn2tq5ls] {
    display: block;
}

.admin-stats span[b-ujcn2tq5ls] {
    color: #6b7670;
    font-size: 0.72rem;
    font-weight: 850;
    text-transform: uppercase;
}

.admin-stats strong[b-ujcn2tq5ls] {
    margin-top: 3px;
    color: #182026;
    font-size: 0.92rem;
    font-weight: 900;
}

.admin-toolbar[b-ujcn2tq5ls] {
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(240px, 1fr) auto;
    gap: 10px;
    border: 1px solid rgba(217, 229, 224, 0.92);
    border-radius: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 14px 32px rgba(24, 32, 38, 0.09);
    backdrop-filter: blur(12px);
    flex-shrink: 0;
}

.admin-search[b-ujcn2tq5ls] {
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #d7e2de;
    border-radius: 8px;
    padding: 0 10px;
    color: #66726c;
    background: #f8faf9;
}

.admin-search:focus-within[b-ujcn2tq5ls] {
    border-color: #d92d20;
    background: white;
    box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
}

.admin-search input[b-ujcn2tq5ls] {
    min-width: 0;
    flex: 1;
    border: 0;
    outline: 0;
    color: #182026;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 700;
}

.admin-clear[b-ujcn2tq5ls] {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    color: #6b7670;
    background: #e9efec;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 900;
    cursor: pointer;
}

.admin-filter-popover-wrap[b-ujcn2tq5ls] {
    position: relative;
    min-width: 0;
}

.admin-filter-trigger[b-ujcn2tq5ls] {
    height: 42px;
    min-width: 150px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #f0c7c2;
    border-radius: 8px;
    padding: 0 13px;
    color: #b42318;
    background: #fff4f2;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 900;
    cursor: pointer;
}

.admin-filter-trigger--open[b-ujcn2tq5ls],
.admin-filter-trigger--active[b-ujcn2tq5ls] {
    border-color: #d92d20;
    background: #ffe7e3;
}

.admin-filter-backdrop[b-ujcn2tq5ls] {
    position: fixed;
    inset: 0;
    z-index: 20;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.admin-filter-popover[b-ujcn2tq5ls] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 21;
    width: min(520px, calc(100vw - 28px));
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(190px, 0.8fr);
    gap: 10px;
    border: 1px solid #f0c7c2;
    border-radius: 8px;
    padding: 10px;
    background: white;
    box-shadow: 0 18px 42px rgba(24, 32, 38, 0.2);
}

.admin-filter-pane[b-ujcn2tq5ls] {
    min-width: 0;
    display: grid;
    gap: 8px;
}

.admin-filter-title[b-ujcn2tq5ls] {
    color: #7f1d1d;
    font-size: 0.72rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-filter-group[b-ujcn2tq5ls] {
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.admin-filter[b-ujcn2tq5ls],
.admin-segment-btn[b-ujcn2tq5ls] {
    height: 34px;
    border: 1px solid #dbe6e1;
    border-radius: 7px;
    padding: 0 10px;
    color: #42504a;
    background: white;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.admin-filter--active[b-ujcn2tq5ls] {
    border-color: #d92d20;
    color: white;
    background: #d92d20;
}

.admin-segment[b-ujcn2tq5ls] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    border: 1px solid #dbe6e1;
    border-radius: 8px;
    padding: 3px;
    background: #f4f7f5;
}

.admin-segment-btn[b-ujcn2tq5ls] {
    border: 0;
    height: 30px;
    background: transparent;
}

.admin-segment-btn--active[b-ujcn2tq5ls] {
    color: #182026;
    background: white;
    box-shadow: 0 5px 14px rgba(24, 32, 38, 0.11);
}

.admin-message[b-ujcn2tq5ls] {
    margin-top: 12px;
    border-radius: 8px;
    padding: 11px 13px;
    color: #8a310d;
    background: #fff4e8;
    font-size: 0.9rem;
    font-weight: 800;
}

.admin-feed[b-ujcn2tq5ls] {
    display: grid;
    gap: 9px;
    margin-top: 14px;
    min-height: 0;
    overflow-y: auto;
    padding-right: 4px;
    overscroll-behavior: contain;
}

.admin-change[b-ujcn2tq5ls] {
    display: grid;
    gap: 10px;
    border: 1px solid #dce7e2;
    border-radius: 8px;
    padding: 12px;
    background: white;
    box-shadow: 0 7px 16px rgba(24, 32, 38, 0.06);
}

.admin-change--customers[b-ujcn2tq5ls] { --admin-accent: #d92d20; }
.admin-change--sites[b-ujcn2tq5ls] { --admin-accent: #b42318; }
.admin-change--offers[b-ujcn2tq5ls] { --admin-accent: #c2410c; }
.admin-change--measurements[b-ujcn2tq5ls] { --admin-accent: #a63824; }
.admin-change--calendar[b-ujcn2tq5ls] { --admin-accent: #9a3412; }
.admin-change--users[b-ujcn2tq5ls] { --admin-accent: #b42318; }
.admin-change--time[b-ujcn2tq5ls] { --admin-accent: #be123c; }
.admin-change--vacation[b-ujcn2tq5ls] { --admin-accent: #dc2626; }
.admin-change--master[b-ujcn2tq5ls] { --admin-accent: #7f1d1d; }

.admin-change-icon[b-ujcn2tq5ls] {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    color: var(--admin-accent);
    background: color-mix(in srgb, var(--admin-accent) 12%, white);
}

.admin-change-top[b-ujcn2tq5ls] {
    min-width: 0;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto auto;
    gap: 11px;
    align-items: center;
}

.admin-change-title[b-ujcn2tq5ls] {
    min-width: 0;
}

.admin-change-head[b-ujcn2tq5ls],
.admin-userline[b-ujcn2tq5ls] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex-wrap: wrap;
}

.admin-change-head time[b-ujcn2tq5ls],
.admin-area[b-ujcn2tq5ls],
.admin-userline[b-ujcn2tq5ls] {
    color: #69746f;
    font-size: 0.76rem;
    font-weight: 800;
}

.admin-change h2[b-ujcn2tq5ls] {
    margin: 4px 0 3px;
    overflow: hidden;
    color: #182026;
    font-size: 1rem;
    font-weight: 920;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-compare[b-ujcn2tq5ls] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
}

.admin-compare-panel[b-ujcn2tq5ls] {
    min-width: 0;
    border: 1px solid #e4e8e6;
    border-radius: 8px;
    padding: 10px 11px;
    background: #fafafa;
}

.admin-compare-panel--after[b-ujcn2tq5ls] {
    border-color: color-mix(in srgb, var(--admin-accent) 28%, #eadfdd);
    background: color-mix(in srgb, var(--admin-accent) 7%, white);
}

.admin-compare-panel span[b-ujcn2tq5ls] {
    display: block;
    margin-bottom: 5px;
    color: #6d7671;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-compare-panel--after span[b-ujcn2tq5ls] {
    color: var(--admin-accent);
}

.admin-compare-panel strong[b-ujcn2tq5ls] {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #182026;
    font-size: 0.92rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-compare-panel p[b-ujcn2tq5ls] {
    margin: 5px 0 0;
    overflow: hidden;
    color: #4f5b55;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-badge[b-ujcn2tq5ls] {
    border-radius: 5px;
    padding: 3px 7px;
    font-size: 0.68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.admin-badge--created[b-ujcn2tq5ls] {
    color: #166534;
    background: #dcfce7;
}

.admin-badge--updated[b-ujcn2tq5ls] {
    color: #8a4b00;
    background: #fff0cf;
}

.admin-badge--existing[b-ujcn2tq5ls] {
    color: #53606a;
    background: #eef2f1;
}

.admin-change-actions[b-ujcn2tq5ls] {
    display: inline-flex;
}

.admin-change-actions button[b-ujcn2tq5ls] {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #dbe6e1;
    border-radius: 8px;
    color: #b42318;
    background: #fff4f2;
    cursor: pointer;
}

.admin-change-actions button:hover[b-ujcn2tq5ls] {
    border-color: #d92d20;
    background: white;
}

.admin-sentinel[b-ujcn2tq5ls],
.admin-empty[b-ujcn2tq5ls] {
    border: 1px dashed #cbd8d3;
    border-radius: 8px;
    padding: 18px;
    color: #66726c;
    text-align: center;
    background: rgba(255, 255, 255, 0.62);
}

.admin-empty[b-ujcn2tq5ls] {
    display: grid;
    gap: 5px;
    padding: 36px 18px;
}

.admin-empty strong[b-ujcn2tq5ls] {
    color: #182026;
    font-size: 1rem;
    font-weight: 900;
}

@media (max-width: 900px) {
    .admin-hero[b-ujcn2tq5ls],
    .admin-toolbar[b-ujcn2tq5ls] {
        grid-template-columns: 1fr;
    }

    .admin-stats[b-ujcn2tq5ls] {
        min-width: 0;
    }

    .admin-filter-trigger[b-ujcn2tq5ls] {
        width: 100%;
    }

    .admin-filter-popover[b-ujcn2tq5ls] {
        left: 0;
        right: auto;
        width: min(620px, calc(100vw - 28px));
    }
}

@media (max-width: 620px) {
    .admin-root[b-ujcn2tq5ls] {
        padding: 12px 10px;
    }

    .admin-hero[b-ujcn2tq5ls] {
        gap: 10px;
        margin-bottom: 10px;
    }

    .admin-title-block p[b-ujcn2tq5ls] {
        display: none;
    }

    .admin-filter-popover[b-ujcn2tq5ls] {
        grid-template-columns: 1fr;
        width: calc(100vw - 20px);
    }

    .admin-change-top[b-ujcn2tq5ls] {
        grid-template-columns: 36px minmax(0, 1fr) auto;
    }

    .admin-change-icon[b-ujcn2tq5ls] {
        width: 34px;
        height: 34px;
    }

    .admin-userline[b-ujcn2tq5ls] {
        grid-column: 2 / -1;
    }

    .admin-change-actions[b-ujcn2tq5ls] {
        grid-column: 3;
        grid-row: 1;
    }

    .admin-change h2[b-ujcn2tq5ls] {
        white-space: normal;
    }

    .admin-compare[b-ujcn2tq5ls] {
        grid-template-columns: 1fr;
    }

    .admin-compare-panel strong[b-ujcn2tq5ls],
    .admin-compare-panel p[b-ujcn2tq5ls] {
        white-space: normal;
    }
}
/* /Components/Pages/Calc/ArbeitsanweisungModal.razor.rz.scp.css */
/* ---------------------------------------------------------------------------
   ArbeitsanweisungModal.razor.css
   --------------------------------------------------------------------------- */

/* -- Backdrop ---------------------------------------------------------------- */
.aa-backdrop[b-thr3zdzg3g] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 1100;
    animation: aa-fade-in-b-thr3zdzg3g 0.18s ease;
}

/* -- Shell ------------------------------------------------------------------- */
.aa-shell[b-thr3zdzg3g] {
    position: fixed;
    inset: 0;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    background: #f2f2f7;
    animation: aa-slide-up-b-thr3zdzg3g 0.22s cubic-bezier(0.32, 0.72, 0, 1);
    overflow: hidden;
}

@media (min-width: 680px) {
    .aa-shell[b-thr3zdzg3g] {
        inset: auto;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(96vw, 1120px);
        max-height: min(94vh, 800px);
        border-radius: 18px;
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
        animation: aa-pop-in-b-thr3zdzg3g 0.24s cubic-bezier(0.32, 0.72, 0, 1);
    }
}

@keyframes aa-fade-in-b-thr3zdzg3g {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes aa-slide-up-b-thr3zdzg3g {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

@keyframes aa-pop-in-b-thr3zdzg3g {
    from {
        opacity: 0;
        transform: translate(-50%, -48%) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* -- Floating Close-Button · immer ganz oben rechts im Viewport -------------- */
.aa-close-floating[b-thr3zdzg3g] {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 1200;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

    .aa-close-floating:hover[b-thr3zdzg3g] {
        background: rgba(255, 59, 48, 0.82);
        border-color: rgba(255, 59, 48, 0.6);
        color: white;
    }

    .aa-close-floating:active[b-thr3zdzg3g] {
        transform: scale(0.94);
    }

/* -- Header (wie "Neue Position" modal-header) ------------------------------- */
.aa-header[b-thr3zdzg3g] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px;
    background: white;
    border-bottom: 1px solid #e5e5ea;
    flex-shrink: 0;
}

.aa-header-icon[b-thr3zdzg3g] {
    width: 30px;
    height: 30px;
    background: linear-gradient(135deg, #eef4ff 0%, #daeaff 100%);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #007aff;
    flex-shrink: 0;
}

.aa-header-title[b-thr3zdzg3g] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -0.01em;
}

.aa-header-hint[b-thr3zdzg3g] {
    font-size: 11.5px;
    color: #aeaeb2;
    margin-left: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Tabellen-Wrapper ------------------------------------------------------- */
.aa-table-scroll[b-thr3zdzg3g] {
    flex: 1;
    overflow: auto;
    min-height: 0;
}

/* -- Tabelle ---------------------------------------------------------------- */
.aa-table[b-thr3zdzg3g] {
    width: 100%;
    border-collapse: collapse;
    background: white;
    min-width: 400px;
}

/* -- Kopfzeile mit Checkboxen ----------------------------------------------- */
.aa-thead-checkrow th[b-thr3zdzg3g] {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f7f8ff;
    border-bottom: 1.5px solid #d1d1d6;
    padding: 6px 6px;
    white-space: nowrap;
}

.aa-th-rowcheck[b-thr3zdzg3g] {
    width: 40px;
    text-align: center;
}

.aa-th-colcheck[b-thr3zdzg3g] {
    vertical-align: middle;
}

/* Spaltenbreiten passend zum Inhalt */
.aa-thc-pos[b-thr3zdzg3g] {
    width: 44px;
}

.aa-thc-erp[b-thr3zdzg3g] {
    width: 56px;
}

.aa-thc-desc[b-thr3zdzg3g] {
    min-width: 120px;
}

.aa-thc-qty[b-thr3zdzg3g] {
    width: 120px;
}

.aa-thc-matCost[b-thr3zdzg3g] {
    width: 90px;
}

.aa-thc-waste[b-thr3zdzg3g] {
    width: 76px;
}

.aa-thc-auxCost[b-thr3zdzg3g] {
    width: 84px;
}

.aa-thc-laborCost[b-thr3zdzg3g] {
    width: 84px;
}

.aa-thc-markup[b-thr3zdzg3g] {
    width: 76px;
}

.aa-thc-unitPrice[b-thr3zdzg3g] {
    width: 90px;
}

.aa-thc-profit[b-thr3zdzg3g] {
    width: 82px;
}

.aa-thc-total[b-thr3zdzg3g] {
    width: 90px;
    text-align: right;
}

/* Ausgegraut statt weggeklappt */
.aa-col--dim[b-thr3zdzg3g] {
    opacity: 0.28;
    pointer-events: none;
}

/* Checkbox-Zelle in Kopfzeile: Checkbox + Label ?bereinander */
.aa-col-check-cell[b-thr3zdzg3g] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.aa-col-check-label[b-thr3zdzg3g] {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8e8e93;
    text-align: center;
}

/* -- Daten-Zeilen ----------------------------------------------------------- */
.aa-table tbody td[b-thr3zdzg3g] {
    border-bottom: 1px solid #f0f0f5;
    vertical-align: middle;
    padding: 0;
}

.aa-table tbody tr:last-child td[b-thr3zdzg3g] {
    border-bottom: none;
}

.aa-table tbody tr:hover td[b-thr3zdzg3g] {
    background: #fafbff;
}

/* Ausgeblendete Zeilen */
.aa-row--hidden td[b-thr3zdzg3g] {
    opacity: 0.35;
}

.aa-row--hidden .aa-input[b-thr3zdzg3g] {
    background: transparent !important;
    color: #aeaeb2 !important;
}

/* -- Einheitliche Checkbox -------------------------------------------------- */
.aa-chk-label[b-thr3zdzg3g] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 6px;
}

    .aa-chk-label input[type="checkbox"][b-thr3zdzg3g] {
        display: none;
    }

.aa-chk-face[b-thr3zdzg3g] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s;
    flex-shrink: 0;
}

.aa-chk--on[b-thr3zdzg3g] {
    background: #34c759;
}

.aa-chk--partial[b-thr3zdzg3g] {
    background: #ff9f0a;
}

.aa-chk--off[b-thr3zdzg3g] {
    background: #e5e5ea;
}

/* Zeilen-Checkbox-Zellen */
.aa-td-rowcheck[b-thr3zdzg3g] {
    width: 40px;
    text-align: center;
    padding: 0 !important;
}

/* -- Datenzellen ------------------------------------------------------------ */
.aa-td-pos[b-thr3zdzg3g] {
    width: 52px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #8e8e93;
    padding: 0 4px !important;
}

.aa-td-erp[b-thr3zdzg3g] {
    width: 64px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #007aff;
    padding: 0 4px !important;
}

.aa-td-desc[b-thr3zdzg3g] {
    padding: 3px 4px !important;
}

.aa-td-qty[b-thr3zdzg3g] {
    width: 130px;
}

.aa-td-price[b-thr3zdzg3g] {
    width: 110px;
}

.aa-td-total[b-thr3zdzg3g] {
    width: 100px;
    text-align: right;
    padding: 0 8px !important;
    font-size: 12px;
    font-weight: 700;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aa-td-total--dim[b-thr3zdzg3g] {
    opacity: 0.35;
}

/* -- Inputs ----------------------------------------------------------------- */
.aa-input[b-thr3zdzg3g] {
    border: 1px solid transparent;
    padding: 7px 7px;
    border-radius: 6px;
    font-family: inherit;
    font-size: 12.5px;
    background: transparent;
    color: #1c1c1e;
    width: 100%;
    box-sizing: border-box;
    -webkit-appearance: none;
    transition: border-color 0.14s, background 0.14s;
}

    .aa-input:focus[b-thr3zdzg3g] {
        border-color: #007aff;
        background: #f0f7ff;
        outline: none;
    }

    .aa-input:disabled[b-thr3zdzg3g] {
        cursor: not-allowed;
        color: #aeaeb2;
    }

.aa-input--desc[b-thr3zdzg3g] {
    min-width: 120px;
}

.aa-input--num[b-thr3zdzg3g] {
    text-align: right;
    width: 70px;
    font-variant-numeric: tabular-nums;
}

/* Mengen-Zelle */
.aa-qty-wrap[b-thr3zdzg3g] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 2px;
}

.aa-unit-select[b-thr3zdzg3g] {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    padding: 4px 3px;
    color: #1c1c1e;
    background: white;
    -webkit-appearance: none;
    cursor: pointer;
    width: 40px;
    text-align: center;
    transition: border-color 0.14s;
}

    .aa-unit-select:focus[b-thr3zdzg3g] {
        outline: none;
        border-color: #007aff;
    }

    .aa-unit-select:disabled[b-thr3zdzg3g] {
        color: #aeaeb2;
        cursor: not-allowed;
    }

/* -- Footer ------------------------------------------------------------------ */
.aa-footer[b-thr3zdzg3g] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px 20px;
    background: white;
    border-top: 1px solid #e5e5ea;
    flex-shrink: 0;
}

.aa-btn-preview[b-thr3zdzg3g] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 22px;
    border-radius: 10px;
    border: none;
    background: #007aff;
    color: white;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.32);
}

    .aa-btn-preview:hover[b-thr3zdzg3g] {
        background: #0062cc;
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0, 122, 255, 0.38);
    }

    .aa-btn-preview:active[b-thr3zdzg3g] {
        transform: translateY(0);
    }

    .aa-btn-preview:disabled[b-thr3zdzg3g] {
        background: #aeaeb2;
        box-shadow: none;
        cursor: not-allowed;
        transform: none;
    }

/* -- Lade-Spinner ------------------------------------------------------------ */
.aa-spinner[b-thr3zdzg3g] {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: white;
    border-radius: 50%;
    animation: aa-spin-b-thr3zdzg3g 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes aa-spin-b-thr3zdzg3g {
    to {
        transform: rotate(360deg);
    }
}

.aa-td-num[b-thr3zdzg3g] {
    width: 90px;
    padding: 2px 4px !important;
}

/* -- NumPad Overlay ----------------------------------------------------------- */
.aa-np-overlay[b-thr3zdzg3g] {
    position: fixed;
    inset: 0;
    z-index: 1300;
}

/* NumPad Popup ?ber dem Modal */
.aa-np-popup[b-thr3zdzg3g] {
    z-index: 1301 !important;
}

/* Numpad side-modal */
.numpad-modal[b-thr3zdzg3g] {
    position: fixed;
    right: calc(50% + 320px + 12px); /* rechts neben modal-window (max-width 640px · H?lfte 320px) */
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    width: 220px;
    height: 288px;
    overflow: hidden;
    z-index: 1301;
}

/* -- Mobile ------------------------------------------------------------------ */
@media (max-width: 679px) {
    .aa-header-hint[b-thr3zdzg3g] {
        display: none;
    }

    .aa-close-floating[b-thr3zdzg3g] {
        top: 12px;
        right: 12px;
    }
}
/* /Components/Pages/Calc/Aufmass.razor.rz.scp.css */
/* --------------------------------------------------------------
   SIDEBAR HEADER (Zurück + Titel)
-------------------------------------------------------------- */
.sidebar-header[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 12px 12px;
}

.sidebar-back-btn[b-z5ejr1h3p4] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: white;
    border: 1.5px solid #e5e5ea;
    color: #3c3c43;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s;
}

    .sidebar-back-btn:hover[b-z5ejr1h3p4] {
        background: #e8f3ff;
        border-color: #007aff;
        color: #007aff;
    }

.sidebar-title-group[b-z5ejr1h3p4] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.sidebar-label[b-z5ejr1h3p4] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-sub[b-z5ejr1h3p4] {
    font-size: 11px;
    color: #8e8e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------
   ROOT & LAYOUT
-------------------------------------------------------------- */
.aufmass-root[b-z5ejr1h3p4] {
    font-family: -apple-system, system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 48px); /* abzgl. App-Header (<Header />) */
}

.aufmass-layout[b-z5ejr1h3p4] {
    display: grid;
    grid-template-columns: 320px 1fr;
    grid-template-rows: 1fr;
}

/* --------------------------------------------------------------
   SIDEBAR
-------------------------------------------------------------- */
.aufmass-sidebar[b-z5ejr1h3p4] {
    display: flex;
    flex-direction: column;
}

.sidebar-section-label[b-z5ejr1h3p4] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8e8e93;
    padding: 14px 16px 8px;
    border-bottom: 1px solid #e5e5ea;
}

.sidebar-raeume[b-z5ejr1h3p4] {
    flex: 1;
    padding: 8px 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar-raum-item[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    border: 1.5px solid #e5e5ea;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.sidebar-raum-item--active[b-z5ejr1h3p4] {
    border-color: #007aff;
    box-shadow: 0 2px 8px rgba(0,122,255,0.12);
    background: #f0f7ff;
}

.sidebar-raum-main[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    padding: 13px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    min-width: 0;
    color: #1c1c1e;
}

.sidebar-raum-item--active .sidebar-raum-main[b-z5ejr1h3p4] {
    color: #007aff;
}

.sidebar-raum-name[b-z5ejr1h3p4] {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-raum-badge[b-z5ejr1h3p4] {
    font-size: 11px;
    font-weight: 700;
    color: #007aff;
    background: #e8f3ff;
    padding: 3px 8px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.sidebar-raum-edit-btn[b-z5ejr1h3p4],
.sidebar-raum-del-btn[b-z5ejr1h3p4] {
    width: 40px;
    height: 100%;
    min-height: 48px;
    background: none;
    border: none;
    border-left: 1px solid #f0f0f0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c7c7cc;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

    .sidebar-raum-edit-btn:hover[b-z5ejr1h3p4] {
        background: #f0f7ff;
        color: #007aff;
    }

    .sidebar-raum-del-btn:hover[b-z5ejr1h3p4] {
        background: #fff0ef;
        color: #ff3b30;
    }

.sidebar-empty[b-z5ejr1h3p4] {
    font-size: 13px;
    color: #8e8e93;
    text-align: center;
    padding: 24px 16px;
}

.sidebar-footer[b-z5ejr1h3p4] {
    padding: 12px;
}

.btn-sidebar-add[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    padding: 12px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

    .btn-sidebar-add:hover[b-z5ejr1h3p4] {
        opacity: 0.88;
    }

/* --------------------------------------------------------------
   HAUPTBEREICH
-------------------------------------------------------------- */
.aufmass-main[b-z5ejr1h3p4] {
    overflow-y: auto;
    min-height: 0;
    padding: 20px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.aufmass-select-hint[b-z5ejr1h3p4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 60px 24px;
    color: #8e8e93;
    text-align: center;
}

    .aufmass-select-hint svg[b-z5ejr1h3p4] {
        opacity: 0.3;
    }

    .aufmass-select-hint p[b-z5ejr1h3p4] {
        font-size: 16px;
        margin: 0;
    }

.aufmass-empty-state[b-z5ejr1h3p4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 80px 24px;
    color: #8e8e93;
    text-align: center;
}

/* --------------------------------------------------------------
   DOPPELTE ZUSAMMENFASSUNG (Raum + Gesamt)
-------------------------------------------------------------- */
.summary-bar-dual[b-z5ejr1h3p4] {
    display: flex;
    align-items: stretch;
    border: 1.5px solid #e5e5ea;
    border-radius: 14px;
    overflow: hidden;
    gap: 0;
}

.sum-section[b-z5ejr1h3p4] {
    align-items: center;
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
}

.sum-section--raum[b-z5ejr1h3p4] {
    background: #f0f7ff;
    border-right: 1.5px solid #d0e8ff;
}

.sum-section--gesamt[b-z5ejr1h3p4] {
    background: #f5f5f7;
}

.sum-section-label[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    flex-shrink: 0;
    white-space: nowrap;
}

.sum-section--raum .sum-section-label[b-z5ejr1h3p4] {
    color: #007aff;
}

.sum-section--gesamt .sum-section-label[b-z5ejr1h3p4] {
    color: #636366;
}

.sum-section-name[b-z5ejr1h3p4] {
    font-size: 12px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 90px;
    flex-shrink: 0;
}

.sum-section-name--muted[b-z5ejr1h3p4] {
    color: #8e8e93;
    font-weight: 500;
}

.sum-section-divider[b-z5ejr1h3p4] {
    /* replaced by border-right on sum-section--raum */
    display: none;
}

.sum-items[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1;
    justify-content: flex-end;
}

.sum-chip[b-z5ejr1h3p4] {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 3px 8px;
    border-radius: 7px;
    flex-shrink: 0;
}

.sum-chip--blue[b-z5ejr1h3p4] {
    background: #ddeeff;
}

.sum-chip--orange[b-z5ejr1h3p4] {
    background: #fff4e6;
}

.sum-chip--green[b-z5ejr1h3p4] {
    background: #edfaf1;
}

.sum-section--gesamt .sum-chip--blue[b-z5ejr1h3p4] {
    background: #e8e8ed;
}

.sum-section--gesamt .sum-chip--orange[b-z5ejr1h3p4] {
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
}

.sum-section--gesamt .sum-chip--green[b-z5ejr1h3p4] {
    background: #f5f5f7;
    border: 1px solid #e5e5ea;
}

.sum-chip-val[b-z5ejr1h3p4] {
    font-size: 15px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sum-chip--blue .sum-chip-val[b-z5ejr1h3p4] {
    color: #007aff;
}

.sum-chip--orange .sum-chip-val[b-z5ejr1h3p4] {
    color: #ff9500;
}

.sum-chip--green .sum-chip-val[b-z5ejr1h3p4] {
    color: #34c759;
}

.sum-section--gesamt .sum-chip--blue .sum-chip-val[b-z5ejr1h3p4] {
    color: #3c3c43;
}

.sum-section--gesamt .sum-chip--orange .sum-chip-val[b-z5ejr1h3p4] {
    color: #8e8e93;
}

.sum-section--gesamt .sum-chip--green .sum-chip-val[b-z5ejr1h3p4] {
    color: #8e8e93;
}

.sum-chip-unit[b-z5ejr1h3p4] {
    font-size: 10px;
    font-weight: 600;
    color: #8e8e93;
}

.sum-sep[b-z5ejr1h3p4] {
    width: 1px;
    height: 18px;
    background: #e5e5ea;
    margin: 0 5px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------
   MESS-KARTEN
-------------------------------------------------------------- */
.mess-card[b-z5ejr1h3p4] {
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 14px;
    overflow: hidden;
}

.mess-card-header[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 5px 7px;
    background: #f5f5f7;
    border-bottom: 1px solid #e5e5ea;
}

.mess-card-icon[b-z5ejr1h3p4] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mess-card-icon--blue[b-z5ejr1h3p4] {
    background: #e8f3ff;
    color: #007aff;
}

.mess-card-icon--orange[b-z5ejr1h3p4] {
    background: #fff4e6;
    color: #ff9500;
}

.mess-card-icon--green[b-z5ejr1h3p4] {
    background: #edfaf1;
    color: #34c759;
}

.mess-card-title-text[b-z5ejr1h3p4] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    flex: 1;
}

.mess-card-total[b-z5ejr1h3p4] {
    font-size: 15px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    margin-right: 6px;
}

.mess-card-body[b-z5ejr1h3p4] {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -- Hinzufügen-Button im Header ----------------------------- */
.btn-add-seg[b-z5ejr1h3p4] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

    .btn-add-seg:hover[b-z5ejr1h3p4] {
        opacity: 0.85;
    }

.btn-add-seg--orange[b-z5ejr1h3p4] {
    background: #ff9500;
}

.btn-add-seg--green[b-z5ejr1h3p4] {
    background: #34c759;
}

/* --------------------------------------------------------------
   SEGMENT-TABELLEN
-------------------------------------------------------------- */

/* Fl?che: +/- | Modus | L?nge | · | Breite | = m? | Del */
.seg-grid--flaeche[b-z5ejr1h3p4] {
    display: grid;
    grid-template-columns: 32px 64px 90px 18px 90px 82px 28px;
    gap: 6px;
    align-items: center;
}

/* Sonstiges: Bezeichnung | Menge | Einheit | Del */
.seg-grid--stueck[b-z5ejr1h3p4] {
    display: grid;
    grid-template-columns: 1fr 80px 72px 28px;
    gap: 6px;
    align-items: center;
}

/* Fl?che: +/- | Modus | L?nge | · | Breite | = m? | Del */
.seg-grid--flaeche[b-z5ejr1h3p4] {
    display: grid;
    grid-template-columns: 52px 68px 1fr 18px 1fr 88px 36px;
    gap: 7px;
    align-items: center;
    min-height: 36px;
}

/* Sonstiges: Bezeichnung | Menge | Einheit | Del */
.seg-grid--stueck[b-z5ejr1h3p4] {
    display: grid;
    grid-template-columns: 1fr 90px 80px 36px;
    gap: 7px;
    align-items: center;
    min-height: 36px;
}

.seg-grid-head[b-z5ejr1h3p4] {
    padding: 0 0 6px 0;
    border-bottom: 1.5px solid #e5e5ea;
    margin-bottom: 4px;
    text-align: center;
}

.seg-head-cell[b-z5ejr1h3p4] {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #8e8e93;
}

.seg-head-cell--right[b-z5ejr1h3p4] {
    text-align: center;
}

.seg-head-cell--center[b-z5ejr1h3p4] {
    text-align: center;
}

.seg-row[b-z5ejr1h3p4] {
    padding: 4px 0;
}

/* Input-Feld */
.seg-input[b-z5ejr1h3p4] {
    width: 100%;
    box-sizing: border-box;
    padding: 6px;
    border: 1.5px solid #e5e5ea;
    border-radius: 9px;
    font-size: 15px;
    font-family: inherit;
    background: #fafafa;
    color: #1c1c1e;
    transition: border-color 0.15s, background 0.15s;
    text-align: center !important;
}

    .seg-input:focus[b-z5ejr1h3p4] {
        outline: none;
        border-color: #007aff;
        background: #f0f7ff;
    }

/* Span-3 für manuell (?berspringt ?-Spalte und Breite) */
.seg-input--span3[b-z5ejr1h3p4] {
    grid-column: span 3;
    text-align: right;
}

/* L?nge-Input im Umfang */
.seg-input--laenge[b-z5ejr1h3p4] {
    width: 90px;
    flex-shrink: 0;
}

.seg-select[b-z5ejr1h3p4] {
    appearance: auto;
    cursor: pointer;
    padding-right: 4px;
}

.seg-times[b-z5ejr1h3p4] {
    text-align: center;
    font-size: 14px;
    color: #8e8e93;
    font-weight: 600;
}

.seg-result[b-z5ejr1h3p4] {
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.seg-result--minus[b-z5ejr1h3p4] {
    color: #ff3b30;
}

.seg-result--umfang[b-z5ejr1h3p4] {
    min-width: 72px;
}

/* Modus-Toggle per Zeile (auch für +/-) */
.seg-modus-cell[b-z5ejr1h3p4] {
    display: flex;
    gap: 0;
}

.seg-modus-cell--vorzeichen[b-z5ejr1h3p4] {
    flex-shrink: 0;
    width: 52px;
}

.seg-modus-btn[b-z5ejr1h3p4] {
    flex: 1;
    padding: 8px 4px;
    font-size: 12px;
    font-weight: 700;
    border: 1.5px solid #e5e5ea;
    border-radius: 6px;
    background: white;
    color: #8e8e93;
    cursor: pointer;
    font-family: inherit;
    /* wichtig für iOS Touch: kein Hover-Klebe-Effekt */
    -webkit-tap-highlight-color: transparent;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

    .seg-modus-btn:first-child[b-z5ejr1h3p4] {
        border-radius: 7px 0 0 7px;
    }

    .seg-modus-btn:last-child[b-z5ejr1h3p4] {
        border-radius: 0 7px 7px 0;
        margin-left: -1px;
    }

    .seg-modus-btn:active[b-z5ejr1h3p4] {
        filter: brightness(0.92);
    }

/* Standard Modus aktiv (blau) */
.seg-modus-btn--active[b-z5ejr1h3p4] {
    background: #007aff;
    color: white;
    border-color: #007aff;
    z-index: 1;
    position: relative;
}

/* + aktiv · blau */
.seg-modus-btn--plus.seg-modus-btn--active[b-z5ejr1h3p4] {
    background: #007aff;
    border-color: #007aff;
    color: white;
}

/* - aktiv · rot */
.seg-modus-btn--minus.seg-modus-btn--active[b-z5ejr1h3p4] {
    background: #ff3b30;
    border-color: #ff3b30;
    color: white;
}

/* ?2 Toggle-Button (Umfang) */
.seg-x2-btn[b-z5ejr1h3p4] {
    padding: 8px 10px;
    border: 1.5px solid #e5e5ea;
    border-radius: 8px;
    background: white;
    color: #8e8e93;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    /* Sofortiges visuelles Feedback auf Touch */
    transition: background 0s, color 0s, border-color 0s;
}

    .seg-x2-btn:hover[b-z5ejr1h3p4] {
        background: #fff4e6;
        color: #ff9500;
        border-color: #ffcc80;
    }

    .seg-x2-btn:active[b-z5ejr1h3p4] {
        background: #ff9500 !important;
        color: white !important;
        border-color: #ff9500 !important;
    }

.seg-x2-btn--active[b-z5ejr1h3p4] {
    background: #ff9500;
    color: white;
    border-color: #ff9500;
}

    .seg-x2-btn--active:active[b-z5ejr1h3p4] {
        background: #e08600 !important;
        border-color: #e08600 !important;
    }

/* Löschen-Button */
.seg-del-btn[b-z5ejr1h3p4] {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: none;
    border: none;
    color: #c7c7cc;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.12s, color 0.12s;
    justify-self: center;
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

    .seg-del-btn:hover[b-z5ejr1h3p4] {
        background: #fff0ef;
        color: #ff3b30;
    }

    .seg-del-btn:active[b-z5ejr1h3p4] {
        background: #fff0ef;
        color: #ff3b30;
    }

/* Leer-Hinweis */
.seg-empty-hint[b-z5ejr1h3p4] {
    font-size: 13px;
    color: #c7c7cc;
    padding: 10px 0 4px;
}

/* --------------------------------------------------------------
   UMFANG-ZEILE (Flex, da variable Anzahl L?ngen-Inputs)
-------------------------------------------------------------- */
.umfang-row[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
    min-height: 48px;
}

.umfang-laengen[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 5px;
    flex: 1;
    flex-wrap: wrap;
    min-width: 0;
}

/* --------------------------------------------------------------
   BUTTONS (genutzt auch in Modals)
-------------------------------------------------------------- */
.btn-primary[b-z5ejr1h3p4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #007aff;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

    .btn-primary:hover[b-z5ejr1h3p4] {
        opacity: 0.88;
    }

.btn-success[b-z5ejr1h3p4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #34c759;
    color: white;
    border: none;
    padding: 12px 22px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

    .btn-success:hover[b-z5ejr1h3p4] {
        opacity: 0.88;
    }

.btn-ghost[b-z5ejr1h3p4] {
    background: none;
    color: #636366;
    border: 1.5px solid #e5e5ea;
    padding: 11px 20px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s;
}

    .btn-ghost:hover[b-z5ejr1h3p4] {
        border-color: #8e8e93;
        background: #f5f5f7;
    }

.btn-delete[b-z5ejr1h3p4] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ff3b30;
    color: white;
    border: none;
    padding: 11px 20px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: opacity 0.15s;
}

    .btn-delete:hover[b-z5ejr1h3p4] {
        opacity: 0.88;
    }

.btn-delete--disabled[b-z5ejr1h3p4] {
    background: #c7c7cc !important;
    cursor: not-allowed !important;
    opacity: 1 !important;
}

/* --------------------------------------------------------------
   MODALS
-------------------------------------------------------------- */
.modal-backdrop[b-z5ejr1h3p4] {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.48);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
    backdrop-filter: blur(4px);
    animation: backdropIn-b-z5ejr1h3p4 0.18s ease;
}

@keyframes backdropIn-b-z5ejr1h3p4 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.form-modal[b-z5ejr1h3p4] {
    background: white;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    animation: modalSlideIn-b-z5ejr1h3p4 0.2s cubic-bezier(0.34,1.3,0.64,1);
}

.form-modal--small[b-z5ejr1h3p4] {
    max-width: 420px;
}

.form-modal--danger[b-z5ejr1h3p4] {
    max-width: 460px;
}

@keyframes modalSlideIn-b-z5ejr1h3p4 {
    from {
        opacity: 0;
        transform: translateY(24px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.form-modal-header[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 18px;
    background: #1c1c1e;
}

.form-modal-header--danger[b-z5ejr1h3p4] {
    background: #c0392b;
}

.form-modal-title[b-z5ejr1h3p4] {
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0;
}

.modal-danger-title[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
    font-size: 1.05rem;
    font-weight: 700;
}

.modal-close[b-z5ejr1h3p4] {
    background: rgba(255,255,255,0.12);
    border: none;
    color: rgba(255,255,255,0.8);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.modal-close:hover[b-z5ejr1h3p4] {
        background: rgba(255,255,255,0.22);
    }

.btn-close-floating[b-z5ejr1h3p4] {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 9999;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(28,28,30,0.72);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(12px);
    box-shadow: 0 16px 40px rgba(0,0,0,0.28);
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

    .btn-close-floating:hover[b-z5ejr1h3p4] {
        background: rgba(255,59,48,0.82);
        border-color: rgba(255,59,48,0.6);
        transform: scale(1.08);
    }

    .btn-close-floating:active[b-z5ejr1h3p4] {
        transform: scale(0.94);
    }

.form-modal-body[b-z5ejr1h3p4] {
    padding: 24px 24px 12px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: 65vh;
    overflow-y: auto;
}

.form-modal-footer[b-z5ejr1h3p4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: #f5f5f7;
    border-top: 1px solid #e5e5ea;
    gap: 10px;
    border-radius: 0 0 22px 22px;
}

.field-group[b-z5ejr1h3p4] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .field-group label[b-z5ejr1h3p4] {
        font-size: 12px;
        font-weight: 600;
        color: #3c3c43;
    }

.field-optional[b-z5ejr1h3p4] {
    font-weight: 400;
    color: #8e8e93;
}

.field-input[b-z5ejr1h3p4] {
    padding: 12px 15px;
    border: 1.5px solid #e5e5ea;
    border-radius: 11px;
    font-size: 15px;
    font-family: inherit;
    background: #fafafa;
    color: #1c1c1e;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s;
}

    .field-input:focus[b-z5ejr1h3p4] {
        outline: none;
        border-color: #007aff;
        background: #f0f7ff;
    }

.delete-warning-text[b-z5ejr1h3p4] {
    font-size: 15px;
    color: #3c3c43;
    margin: 0 0 12px;
}

.delete-subject[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff0ef;
    border: 1.5px solid #ffccc9;
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
}

.delete-subject-type[b-z5ejr1h3p4] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #ff3b30;
    background: #ffe5e3;
    padding: 3px 10px;
    border-radius: 8px;
    white-space: nowrap;
    flex-shrink: 0;
}

.delete-subject-name[b-z5ejr1h3p4] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
}

.delete-cascade-hint[b-z5ejr1h3p4] {
    font-size: 13px;
    color: #ff9f0a;
    font-weight: 500;
    background: #fff9f0;
    border: 1px solid #ffddb0;
    border-radius: 8px;
    padding: 10px 14px;
    margin: 0 0 12px;
}

.delete-timer-row[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
}

.delete-timer[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.delete-timer-ring[b-z5ejr1h3p4] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(#ff3b30 calc(var(--pct,0)*1%), #e5e5ea calc(var(--pct,0)*1%));
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .delete-timer-ring[b-z5ejr1h3p4]::before {
        content: '';
        position: absolute;
        width: 28px;
        height: 28px;
        background: white;
        border-radius: 50%;
    }

    .delete-timer-ring span[b-z5ejr1h3p4] {
        position: relative;
        z-index: 1;
        font-size: 14px;
        font-weight: 800;
        color: #ff3b30;
    }

.delete-timer-label[b-z5ejr1h3p4] {
    font-size: 13px;
    color: #8e8e93;
    font-weight: 500;
}

.delete-ready-hint[b-z5ejr1h3p4] {
    font-size: 13px;
    color: #34c759;
    font-weight: 600;
}

/* --------------------------------------------------------------
   NUMPAD POPUP
-------------------------------------------------------------- */
.np-overlay[b-z5ejr1h3p4] {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: transparent;
}

.np-popup[b-z5ejr1h3p4] {
    position: fixed;
    z-index: 301;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    padding: 0 0 4px;
    display: flex;
    flex-direction: column;
    animation: np-in-b-z5ejr1h3p4 0.15s cubic-bezier(0.34,1.3,0.64,1);
    width: 220px;
    height: 288px;
}

@keyframes np-in-b-z5ejr1h3p4 {
    from {
        opacity: 0;
        transform: scale(0.92);
        transform-origin: center;
    }

    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: center;
    }
}

-------------------------------------------------------------- */
@media (max-width: 860px)[b-z5ejr1h3p4] {
    .aufmass-root {
        height: calc(100vh - 56px);
    }

    .aufmass-layout[b-z5ejr1h3p4] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .aufmass-sidebar[b-z5ejr1h3p4] {
        height: auto;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid #e5e5ea;
    }

    .aufmass-main[b-z5ejr1h3p4] {
        padding: 14px 16px;
    }

    .seg-grid--flaeche[b-z5ejr1h3p4] {
        grid-template-columns: 52px 64px 80px 14px 80px 72px 34px;
        gap: 5px;
    }

    .summary-bar-dual[b-z5ejr1h3p4] {
        flex-direction: column;
    }

    .sum-section--raum[b-z5ejr1h3p4] {
        border-right: none;
        border-bottom: 1.5px solid #d0e8ff;
    }

    .seg-input--laenge[b-z5ejr1h3p4] {
        width: 76px;
    }
}

/* -- Sidebar PDF-Button --------------------------------------------------- */
.sidebar-pdf-btn[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.05);
    color: #636366;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.18s, color 0.18s;
    touch-action: manipulation;
    margin-left: auto;
}

    .sidebar-pdf-btn:hover[b-z5ejr1h3p4] {
        background: rgba(0, 0, 0, 0.1);
        color: #1c1c1e;
    }

.sidebar-pdf-btn--active[b-z5ejr1h3p4] {
    background: #e8f0ff !important;
    color: #007aff !important;
}

/* -- PDF-Men? Popover (fixed, shared mit ProjectCalculator) --------------- */
.pdf-menu-backdrop[b-z5ejr1h3p4] {
    position: fixed;
    inset: 0;
    z-index: 300;
}

.pdf-menu-popover[b-z5ejr1h3p4] {
    position: fixed;
    z-index: 301;
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    min-width: 210px;
    overflow: hidden;
    animation: pdfMenuIn-b-z5ejr1h3p4 0.16s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes pdfMenuIn-b-z5ejr1h3p4 {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pdf-menu-item[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
    border-radius: 0;
}

    .pdf-menu-item:hover[b-z5ejr1h3p4] {
        background: #f5f5f7;
    }

    .pdf-menu-item:active[b-z5ejr1h3p4] {
        background: #ececf0;
    }

.pdf-menu-icon[b-z5ejr1h3p4] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdf-menu-icon--raum[b-z5ejr1h3p4] {
    background: #e8f0ff;
    color: #007aff;
}

.pdf-menu-icon--gesamt[b-z5ejr1h3p4] {
    background: #edfaf1;
    color: #34c759;
}

.pdf-menu-text[b-z5ejr1h3p4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdf-menu-label[b-z5ejr1h3p4] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.2;
}

.pdf-menu-desc[b-z5ejr1h3p4] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 500;
}

.pdf-menu-divider[b-z5ejr1h3p4] {
    height: 1px;
    background: #f0f0f5;
    margin: 0 12px;
}

/* -- PDF-Preview-Modal ---------------------------------------------------- */
.pdf-preview-backdrop[b-z5ejr1h3p4] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1100;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pdf-preview-modal[b-z5ejr1h3p4] {
    position: fixed;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    animation: previewSlideUp-b-z5ejr1h3p4 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: auto;
    top: 5vh;
    bottom: 5vh;
    left: 0;
    right: 0;
    max-width: 860px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}

@keyframes previewSlideUp-b-z5ejr1h3p4 {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pdf-preview-header[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 13px;
    border-bottom: 1px solid #e5e5ea;
    flex-shrink: 0;
    background: #f8f8fa;
    border-radius: 18px 18px 0 0;
}

.pdf-preview-header-left[b-z5ejr1h3p4] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1c1c1e;
}

.pdf-preview-title[b-z5ejr1h3p4] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -0.01em;
}

.pdf-preview-body[b-z5ejr1h3p4] {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #f0f0f5;
}

.pdf-preview-frame[b-z5ejr1h3p4] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.pdf-preview-open-btn[b-z5ejr1h3p4] {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.62);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    transition: background 0.15s;
}

    .pdf-preview-open-btn:hover[b-z5ejr1h3p4],
    .pdf-preview-open-btn:active[b-z5ejr1h3p4] {
        background: rgba(0,0,0,0.82);
    }

.pdf-preview-actions[b-z5ejr1h3p4] {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #e5e5ea;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 0 0 18px 18px;
}

.pdf-preview-btn[b-z5ejr1h3p4] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    letter-spacing: -0.01em;
}

    .pdf-preview-btn:active[b-z5ejr1h3p4] {
        opacity: 0.75;
        transform: scale(0.97);
    }

.pdf-preview-btn--download[b-z5ejr1h3p4] {
    background: #eef4ff;
    color: #007aff;
}

    .pdf-preview-btn--download:hover[b-z5ejr1h3p4] {
        background: #ddeaff;
    }

.pdf-preview-btn--email[b-z5ejr1h3p4] {
    background: #007aff;
    color: #ffffff;
}

    .pdf-preview-btn--email:hover[b-z5ejr1h3p4] {
        background: #0066dd;
    }

/* Schließen-Button (wiederverwendet aus modal-close-Stil) */
.btn-close[b-z5ejr1h3p4] {
    background: rgba(0,0,0,0.08);
    border: none;
    color: #3c3c43;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: background 0.15s;
    flex-shrink: 0;
}

    .btn-close:hover[b-z5ejr1h3p4] {
        background: rgba(0,0,0,0.15);
    }

/* -- Responsive: auf kleinen Screens ganzer Bildschirm ------------------- */
@media (max-width: 600px) {
    .pdf-preview-modal[b-z5ejr1h3p4] {
        top: 0;
        bottom: 0;
        border-radius: 0;
    }

    .pdf-preview-header[b-z5ejr1h3p4] {
        border-radius: 0;
    }

    .pdf-preview-actions[b-z5ejr1h3p4] {
        border-radius: 0;
    }
}
/* /Components/Pages/Calc/AufmassMengePicker.razor.rz.scp.css */
/* --------------------------------------------------------------
   AufmassMengePicker · Scoped Component Styles
-------------------------------------------------------------- */

.amp-panel[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, system-ui, sans-serif;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

/* -- Header --------------------------------------------------- */
.amp-header[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 13px;
    background: #fff9f0;
    border-bottom: 1.5px solid rgba(255, 149, 0, 0.2);
    flex-shrink: 0;
}

.amp-header-icon[b-fpf4n1k5o8] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 149, 0, 0.15);
    color: #b76500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.amp-header-title-group[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.amp-header-label[b-fpf4n1k5o8] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(180, 100, 0, 0.5);
}

.amp-header-title[b-fpf4n1k5o8] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amp-back-btn[b-fpf4n1k5o8] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 149, 0, 0.12);
    border: none;
    color: #b76500;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .amp-back-btn:hover[b-fpf4n1k5o8] {
        background: rgba(255, 149, 0, 0.22);
    }

.amp-unit-badge[b-fpf4n1k5o8] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 3px 9px;
    border-radius: 20px;
    flex-shrink: 0;
    white-space: nowrap;
}

.amp-unit-badge--flaeche[b-fpf4n1k5o8] {
    background: rgba(52, 199, 89, 0.2);
    color: #34c759;
}

.amp-unit-badge--umfang[b-fpf4n1k5o8] {
    background: rgba(0, 122, 255, 0.2);
    color: #4db8ff;
}

.amp-unit-badge--stueck[b-fpf4n1k5o8] {
    background: rgba(255, 149, 0, 0.2);
    color: #ff9500;
}

/* -- Hint Bar ------------------------------------------------- */
.amp-hint-bar[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #f8f8f8;
    border-bottom: 1px solid #e5e5ea;
    font-size: 11px;
    color: #636366;
    flex-shrink: 0;
}

    .amp-hint-bar strong[b-fpf4n1k5o8] {
        color: #1c1c1e;
        font-weight: 700;
    }

    .amp-hint-bar svg[b-fpf4n1k5o8] {
        color: #8e8e93;
        flex-shrink: 0;
    }

/* -- Scroll Container ----------------------------------------- */
.amp-scroll[b-fpf4n1k5o8] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: white;
}

.amp-scroll--rooms[b-fpf4n1k5o8] {
    /* room scroll area shares space with sum bar */
}

/* -- Empty State ---------------------------------------------- */
.amp-empty[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 40px 20px;
    color: #8e8e93;
    text-align: center;
}

    .amp-empty svg[b-fpf4n1k5o8] {
        color: #c7c7cc;
    }

    .amp-empty p[b-fpf4n1k5o8] {
        margin: 0;
        font-size: 13px;
        font-weight: 500;
    }

/* -- Aufmaß Row (Stage 0) ------------------------------------- */
.amp-aufmass-row[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
}

    .amp-aufmass-row:last-child[b-fpf4n1k5o8] {
        border-bottom: none;
    }

    .amp-aufmass-row:hover[b-fpf4n1k5o8] {
        background: #fff9f0;
    }

.amp-aufmass-row-icon[b-fpf4n1k5o8] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #fff4e6;
    color: #ff9500;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.amp-aufmass-row-body[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.amp-aufmass-row-title[b-fpf4n1k5o8] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amp-aufmass-row-meta[b-fpf4n1k5o8] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 500;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.amp-chevron[b-fpf4n1k5o8] {
    color: #c7c7cc;
    flex-shrink: 0;
}

/* -- Modus-Auswahl Rows (Stage 1) ----------------------------- */
.amp-mode-row[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
}

    .amp-mode-row:last-child[b-fpf4n1k5o8] {
        border-bottom: none;
    }

    .amp-mode-row:hover:not(:disabled)[b-fpf4n1k5o8] {
        background: #fff9f0;
    }

    .amp-mode-row:disabled[b-fpf4n1k5o8],
    .amp-mode-row--disabled[b-fpf4n1k5o8] {
        opacity: 0.38;
        cursor: not-allowed;
    }

.amp-mode-row-icon[b-fpf4n1k5o8] {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.amp-mode-row-icon--flaeche[b-fpf4n1k5o8] {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.amp-mode-row-icon--umfang[b-fpf4n1k5o8] {
    background: rgba(0, 122, 255, 0.15);
    color: #4db8ff;
}

.amp-mode-row-icon--stueck[b-fpf4n1k5o8] {
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
}

.amp-mode-row-body[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.amp-mode-row-title[b-fpf4n1k5o8] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
}

.amp-mode-row-meta[b-fpf4n1k5o8] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 500;
}

/* -- Room Row (Stage 2 · Fl?che/Umfang) ---------------------- */
.amp-room-row[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
}

    .amp-room-row:last-child[b-fpf4n1k5o8] {
        border-bottom: none;
    }

    .amp-room-row:hover:not(.amp-room-row--selected)[b-fpf4n1k5o8] {
        background: #f5f5f7;
    }

.amp-room-row--selected[b-fpf4n1k5o8] {
    background: #edfaf1;
}

    .amp-room-row--selected:hover[b-fpf4n1k5o8] {
        background: #ddf5e6;
    }

.amp-room-row--zero[b-fpf4n1k5o8] {
    opacity: 0.45;
}

.amp-room-check[b-fpf4n1k5o8] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #d1d1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s, border-color 0.14s;
    color: white;
}

.amp-room-row--selected .amp-room-check[b-fpf4n1k5o8] {
    background: #34c759;
    border-color: #34c759;
}

.amp-room-body[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.amp-room-name[b-fpf4n1k5o8] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amp-room-metrics[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.amp-metric[b-fpf4n1k5o8] {
    font-size: 11px;
    color: #aeaeb2;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    transition: color 0.14s, font-weight 0.14s;
}

.amp-metric--active[b-fpf4n1k5o8] {
    color: #1c1c1e;
    font-weight: 700;
}

.amp-metric-sep[b-fpf4n1k5o8] {
    font-size: 11px;
    color: #d1d1d6;
}

.amp-room-selected-val[b-fpf4n1k5o8] {
    font-size: 12px;
    font-weight: 800;
    color: #34c759;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    white-space: nowrap;
}

/* -- Sonstiges-Eintrags-Rows (Stage 2 · Sonstiges) ----------- */
.amp-stueck-row[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
}

    .amp-stueck-row:last-child[b-fpf4n1k5o8] {
        border-bottom: none;
    }

    .amp-stueck-row:hover:not(.amp-stueck-row--selected)[b-fpf4n1k5o8] {
        background: #fff9f0;
    }

.amp-stueck-row--selected[b-fpf4n1k5o8] {
    background: rgba(255, 149, 0, 0.08);
}

    .amp-stueck-row--selected:hover[b-fpf4n1k5o8] {
        background: rgba(255, 149, 0, 0.13);
    }

/* Radio-style check circle */
.amp-stueck-check[b-fpf4n1k5o8] {
    width: 20px;
    height: 20px;
    border-radius: 10px;
    border: 1.5px solid #d1d1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s, border-color 0.14s;
    color: white;
}

.amp-stueck-row--selected .amp-stueck-check[b-fpf4n1k5o8] {
    background: #ff9500;
    border-color: #ff9500;
}

.amp-stueck-body[b-fpf4n1k5o8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.amp-stueck-raum[b-fpf4n1k5o8] {
    font-size: 10px;
    font-weight: 600;
    color: rgba(180, 100, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.amp-stueck-label[b-fpf4n1k5o8] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amp-stueck-badge[b-fpf4n1k5o8] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
    background: rgba(255, 149, 0, 0.1);
    border-radius: 20px;
    padding: 3px 9px;
}

.amp-stueck-badge-num[b-fpf4n1k5o8] {
    font-size: 14px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.amp-stueck-badge-unit[b-fpf4n1k5o8] {
    font-size: 11px;
    font-weight: 600;
    color: #b76500;
}

/* -- Summen-Leiste -------------------------------------------- */
.amp-sum-bar[b-fpf4n1k5o8] {
    padding: 10px 14px;
    border-top: 1.5px solid #e5e5ea;
    flex-shrink: 0;
    transition: background 0.2s;
}

.amp-sum-bar--empty[b-fpf4n1k5o8] {
    background: #f8f8f8;
}

.amp-sum-bar--active[b-fpf4n1k5o8] {
    background: #edfaf1;
    border-top-color: #34c75940;
}

.amp-sum-bar--sonstiges[b-fpf4n1k5o8] {
    background: rgb(255 224 182);
    border-top-color: rgba(255, 191, 105, 0.28);
}

.amp-sum-hint[b-fpf4n1k5o8] {
    font-size: 12px;
    color: #aeaeb2;
    font-weight: 500;
    display: block;
    text-align: center;
}

.amp-sum-content[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.amp-sum-left[b-fpf4n1k5o8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #34c759;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

    .amp-sum-left svg[b-fpf4n1k5o8] {
        flex-shrink: 0;
    }

.amp-sum-left--sonstiges[b-fpf4n1k5o8] {
    color: #b76500;
}

.amp-sum-value[b-fpf4n1k5o8] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

.amp-sum-number[b-fpf4n1k5o8] {
    font-size: 20px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.amp-sum-unit[b-fpf4n1k5o8] {
    font-size: 13px;
    font-weight: 600;
    color: #636366;
}
/* /Components/Pages/Calc/DescriptionPickerPanel.razor.rz.scp.css */
.desc-picker[b-n7zhhimbwl] {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: white;
    border-radius: 20px;
    overflow: hidden;
    font-family: -apple-system, system-ui, sans-serif;
}

/* -- Search Header -------------------------------------------------------- */
.desc-picker-header[b-n7zhhimbwl] {
    padding: 12px 12px 10px;
    background: #f8f8f8;
    border-bottom: 1px solid #e5e5ea;
    flex-shrink: 0;
}

.desc-picker-search-wrap[b-n7zhhimbwl] {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    padding: 0 10px;
    gap: 6px;
    transition: border-color 0.18s;
}

    .desc-picker-search-wrap:focus-within[b-n7zhhimbwl] {
        border-color: #007aff;
    }

.desc-picker-search-icon[b-n7zhhimbwl] {
    color: #aeaeb2;
    flex-shrink: 0;
}

.desc-picker-search[b-n7zhhimbwl] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 15px;
    color: #1c1c1e;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

    .desc-picker-search[b-n7zhhimbwl]::placeholder {
        color: #c7c7cc;
    }

.desc-picker-clear[b-n7zhhimbwl] {
    background: #e5e5ea;
    border: none;
    color: #636366;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s;
}

    .desc-picker-clear:hover[b-n7zhhimbwl] {
        background: #c7c7cc;
    }

/* -- List ----------------------------------------------------------------- */
.desc-picker-list[b-n7zhhimbwl] {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.desc-picker-item[b-n7zhhimbwl] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 11px 14px;
    background: white;
    border: none;
    border-bottom: 1px solid #f2f2f7;
    text-align: left;
    font-family: inherit;
    font-size: 14px;
    color: #1c1c1e;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.1s;
    line-height: 1.35;
}

    .desc-picker-item:last-child[b-n7zhhimbwl] {
        border-bottom: none;
    }

    .desc-picker-item:active[b-n7zhhimbwl],
    .desc-picker-item:hover[b-n7zhhimbwl] {
        background: #f0f7ff;
        color: #007aff;
    }

.desc-picker-item--selected[b-n7zhhimbwl] {
    background: #e8f4ff;
    color: #007aff;
    font-weight: 600;
}

    .desc-picker-item--selected:hover[b-n7zhhimbwl] {
        background: #daeeff;
    }

.desc-picker-item-text[b-n7zhhimbwl] {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.desc-picker-check[b-n7zhhimbwl] {
    color: #007aff;
    flex-shrink: 0;
}

/* -- Empty State ---------------------------------------------------------- */
.desc-picker-empty[b-n7zhhimbwl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 16px;
    color: #c7c7cc;
    font-size: 13px;
    text-align: center;
}

/* -- ERP Badge (local redefinition for scoping) --------------------------- */
.erp-badge[b-n7zhhimbwl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 6px;
    background: #e8f0fe;
    color: #007aff;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.erp-badge-list[b-n7zhhimbwl] {
    font-size: 11px;
}
/* /Components/Pages/Calc/LohnKostenPicker.razor.rz.scp.css */
/* --------------------------------------------------------------
   LohnKostenPicker · Scoped Component Styles
   Teal-Akzent: #0d9488  (professionelles Teal für Lohn/Service)
   Struktur analog zu MaterialKostenPicker
-------------------------------------------------------------- */

.lkp-panel[b-vgpye9pgr8] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, system-ui, sans-serif;
    border-radius: 20px;
    overflow: hidden;
}

/* -- Header --------------------------------------------------- */
.lkp-header[b-vgpye9pgr8] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 13px;
    background: #f0fdfb;
    border-bottom: 1.5px solid rgba(13, 148, 136, 0.18);
    flex-shrink: 0;
}

.lkp-header-icon[b-vgpye9pgr8] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(13, 148, 136, 0.14);
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lkp-back-btn[b-vgpye9pgr8] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(13, 148, 136, 0.12);
    border: none;
    color: #0d9488;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .lkp-back-btn:hover[b-vgpye9pgr8] {
        background: rgba(13, 148, 136, 0.22);
    }

.lkp-header-title-group[b-vgpye9pgr8] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.lkp-header-label[b-vgpye9pgr8] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(13, 148, 136, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lkp-header-title[b-vgpye9pgr8] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
}

/* -- Suchleiste ----------------------------------------------- */
.lkp-search-bar[b-vgpye9pgr8] {
    padding: 10px 12px 8px;
    background: #f8f8f8;
    border-bottom: 1px solid #e5e5ea;
    flex-shrink: 0;
}

.lkp-search-wrap[b-vgpye9pgr8] {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    padding: 0 10px;
    gap: 6px;
    transition: border-color 0.18s;
}

    .lkp-search-wrap:focus-within[b-vgpye9pgr8] {
        border-color: #0d9488;
    }

.lkp-search-icon[b-vgpye9pgr8] {
    color: #aeaeb2;
    flex-shrink: 0;
}

.lkp-search-input[b-vgpye9pgr8] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 0;
    font-size: 14px;
    color: #1c1c1e;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

    .lkp-search-input[b-vgpye9pgr8]::placeholder {
        color: #c7c7cc;
    }

.lkp-search-clear[b-vgpye9pgr8] {
    background: #e5e5ea;
    border: none;
    color: #636366;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s;
}

    .lkp-search-clear:hover[b-vgpye9pgr8] {
        background: #c7c7cc;
    }

/* -- Scroll-Container ----------------------------------------- */
.lkp-scroll[b-vgpye9pgr8] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: white;
}

/* -- Leer-Zustand --------------------------------------------- */
.lkp-empty[b-vgpye9pgr8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 20px;
    color: #8e8e93;
    text-align: center;
}

    .lkp-empty svg[b-vgpye9pgr8] {
        color: #c7c7cc;
    }

    .lkp-empty p[b-vgpye9pgr8] {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #636366;
    }

    .lkp-empty span[b-vgpye9pgr8] {
        font-size: 11px;
        color: #aeaeb2;
    }

/* -- Zeilen allgemein ----------------------------------------- */
.lkp-row[b-vgpye9pgr8] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
}

    .lkp-row:last-child[b-vgpye9pgr8] {
        border-bottom: none;
    }

    .lkp-row:hover[b-vgpye9pgr8] {
        background: #f0fdfb;
    }

/* -- Dienstleister Zeilen ------------------------------------- */
.lkp-row-icon[b-vgpye9pgr8] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.lkp-row-icon--dienstleister[b-vgpye9pgr8] {
    background: rgba(13, 148, 136, 0.1);
    color: #0d9488;
}

.lkp-row-body[b-vgpye9pgr8] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.lkp-row-breadcrumb[b-vgpye9pgr8] {
    font-size: 10px;
    font-weight: 600;
    color: rgba(13, 148, 136, 0.6);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.lkp-row-title[b-vgpye9pgr8] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lkp-row-meta[b-vgpye9pgr8] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.lkp-chevron[b-vgpye9pgr8] {
    color: #c7c7cc;
    flex-shrink: 0;
}

/* -- Kategorie Zeilen ----------------------------------------- */
.lkp-row--kategorie[b-vgpye9pgr8] {
    padding: 10px 14px;
}

/* -- Suchergebnis-Zeilen (haben Breadcrumb, daher align: start) -- */
.lkp-row--search-result[b-vgpye9pgr8] {
    align-items: flex-start;
}

    .lkp-row--search-result .lkp-kategorie-check[b-vgpye9pgr8] {
        margin-top: 3px;
    }

    .lkp-row--search-result .lkp-cost-badge[b-vgpye9pgr8] {
        align-self: center;
    }

.lkp-row--selected[b-vgpye9pgr8] {
    background: #f0fdfb !important;
}

    .lkp-row--selected:hover[b-vgpye9pgr8] {
        background: #ccfbf6 !important;
    }

.lkp-kategorie-check[b-vgpye9pgr8] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #d1d1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s, border-color 0.14s;
    color: white;
}

.lkp-row--selected .lkp-kategorie-check[b-vgpye9pgr8] {
    background: #0d9488;
    border-color: #0d9488;
}

/* -- Kosten-Badge ---------------------------------------------- */
.lkp-cost-badge[b-vgpye9pgr8] {
    font-size: 11px;
    font-weight: 700;
    color: #8e8e93;
    background: #f2f2f7;
    border-radius: 20px;
    padding: 3px 9px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s;
}

.lkp-cost-badge--selected[b-vgpye9pgr8] {
    color: #0d9488;
    background: rgba(13, 148, 136, 0.12);
}

/* -- Summen-Leiste -------------------------------------------- */
.lkp-sum-bar[b-vgpye9pgr8] {
    padding: 10px 14px;
    border-top: 1.5px solid #e5e5ea;
    flex-shrink: 0;
    transition: background 0.2s;
}

.lkp-sum-bar--empty[b-vgpye9pgr8] {
    background: #f8f8f8;
}

.lkp-sum-bar--active[b-vgpye9pgr8] {
    background: #f0fdfb;
    border-top-color: rgba(13, 148, 136, 0.25);
}

.lkp-sum-hint[b-vgpye9pgr8] {
    font-size: 11px;
    color: #aeaeb2;
    font-weight: 500;
    display: block;
    text-align: center;
}

.lkp-sum-content[b-vgpye9pgr8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.lkp-sum-left[b-vgpye9pgr8] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #0d9488;
    flex: 1;
    min-width: 0;
}

    .lkp-sum-left svg[b-vgpye9pgr8] {
        flex-shrink: 0;
    }

.lkp-sum-kategorie-name[b-vgpye9pgr8] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lkp-sum-value[b-vgpye9pgr8] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

.lkp-sum-number[b-vgpye9pgr8] {
    font-size: 18px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.lkp-sum-unit[b-vgpye9pgr8] {
    font-size: 12px;
    font-weight: 600;
    color: #636366;
}
/* /Components/Pages/Calc/MaterialKostenPicker.razor.rz.scp.css */
/* --------------------------------------------------------------
   MaterialKostenPicker · Scoped Component Styles
   Indigo-Akzent: #5856d6  (passend zum Material-Tile)
   Struktur analog zu AufmassMengePicker
-------------------------------------------------------------- */

.mkp-panel[b-umx8we9qcj] {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: -apple-system, system-ui, sans-serif;
    border-radius: 20px;
    overflow: hidden;
}

/* -- Header --------------------------------------------------- */
.mkp-header[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 13px;
    background: #f5f4ff;
    border-bottom: 1.5px solid rgba(88, 86, 214, 0.18);
    flex-shrink: 0;
}

.mkp-header-icon[b-umx8we9qcj] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(88, 86, 214, 0.14);
    color: #5856d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mkp-back-btn[b-umx8we9qcj] {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(88, 86, 214, 0.12);
    border: none;
    color: #5856d6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.15s;
}

    .mkp-back-btn:hover[b-umx8we9qcj] {
        background: rgba(88, 86, 214, 0.22);
    }

.mkp-header-title-group[b-umx8we9qcj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.mkp-header-label[b-umx8we9qcj] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(88, 86, 214, 0.5);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkp-header-title[b-umx8we9qcj] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
}

/* -- Suchleiste ----------------------------------------------- */
.mkp-search-bar[b-umx8we9qcj] {
    padding: 10px 12px 8px;
    background: #f8f8f8;
    border-bottom: 1px solid #e5e5ea;
    flex-shrink: 0;
}

.mkp-search-wrap[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    padding: 0 10px;
    gap: 6px;
    transition: border-color 0.18s;
}

    .mkp-search-wrap:focus-within[b-umx8we9qcj] {
        border-color: #5856d6;
    }

.mkp-search-icon[b-umx8we9qcj] {
    color: #aeaeb2;
    flex-shrink: 0;
}

.mkp-search-input[b-umx8we9qcj] {
    flex: 1;
    border: none;
    background: transparent;
    padding: 9px 0;
    font-size: 14px;
    color: #1c1c1e;
    font-family: inherit;
    outline: none;
    min-width: 0;
}

    .mkp-search-input[b-umx8we9qcj]::placeholder {
        color: #c7c7cc;
    }

.mkp-search-clear[b-umx8we9qcj] {
    background: #e5e5ea;
    border: none;
    color: #636366;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s;
}

    .mkp-search-clear:hover[b-umx8we9qcj] {
        background: #c7c7cc;
    }

/* -- Scroll-Container ----------------------------------------- */
.mkp-scroll[b-umx8we9qcj] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    background: white;
}

/* -- Leer-Zustand --------------------------------------------- */
.mkp-empty[b-umx8we9qcj] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 36px 20px;
    color: #8e8e93;
    text-align: center;
}

    .mkp-empty svg[b-umx8we9qcj] {
        color: #c7c7cc;
    }

    .mkp-empty p[b-umx8we9qcj] {
        margin: 0;
        font-size: 13px;
        font-weight: 600;
        color: #636366;
    }

    .mkp-empty span[b-umx8we9qcj] {
        font-size: 11px;
        color: #aeaeb2;
    }

/* -- Zeilen allgemein ----------------------------------------- */
.mkp-row[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 11px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
}

    .mkp-row:last-child[b-umx8we9qcj] {
        border-bottom: none;
    }

    .mkp-row:hover[b-umx8we9qcj] {
        background: #f8f7ff;
    }

/* -- Hersteller / Kategorie Zeilen --------------------------- */
.mkp-row-icon[b-umx8we9qcj] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mkp-row-icon--hersteller[b-umx8we9qcj] {
    background: rgba(88, 86, 214, 0.1);
    color: #5856d6;
}

.mkp-row-icon--kategorie[b-umx8we9qcj] {
    background: rgba(88, 86, 214, 0.07);
    color: #7674dc;
}

.mkp-row-body[b-umx8we9qcj] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.mkp-row-breadcrumb[b-umx8we9qcj] {
    font-size: 10px;
    font-weight: 600;
    color: rgba(88, 86, 214, 0.55);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.01em;
}

.mkp-row-title[b-umx8we9qcj] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkp-row-meta[b-umx8we9qcj] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.mkp-chevron[b-umx8we9qcj] {
    color: #c7c7cc;
    flex-shrink: 0;
}

/* -- Produkt-Zeilen ------------------------------------------- */
.mkp-row--produkt[b-umx8we9qcj] {
    padding: 10px 14px;
}

/* -- Suchergebnis-Zeilen (haben Breadcrumb, daher etwas mehr Abstand) -- */
.mkp-row--search-result[b-umx8we9qcj] {
    align-items: flex-start;
    padding: 10px 14px;
}

    .mkp-row--search-result .mkp-product-check[b-umx8we9qcj] {
        margin-top: 3px;
    }

.mkp-row--selected[b-umx8we9qcj] {
    background: #edeeff !important;
}

    .mkp-row--selected:hover[b-umx8we9qcj] {
        background: #e2e1f7 !important;
    }

.mkp-product-check[b-umx8we9qcj] {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid #d1d1d6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.14s, border-color 0.14s;
    color: white;
}

.mkp-row--selected .mkp-product-check[b-umx8we9qcj] {
    background: #5856d6;
    border-color: #5856d6;
}

/* -- Kosten-Badge ---------------------------------------------- */
.mkp-cost-badge[b-umx8we9qcj] {
    font-size: 11px;
    font-weight: 700;
    color: #8e8e93;
    background: #f2f2f7;
    border-radius: 20px;
    padding: 3px 9px;
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    transition: background 0.14s, color 0.14s;
    align-self: center;
}

.mkp-cost-badge--selected[b-umx8we9qcj] {
    color: #5856d6;
    background: rgba(88, 86, 214, 0.12);
}

/* -- Summen-Leiste -------------------------------------------- */
.mkp-sum-bar[b-umx8we9qcj] {
    padding: 10px 14px;
    border-top: 1.5px solid #e5e5ea;
    flex-shrink: 0;
    transition: background 0.2s;
}

.mkp-sum-bar--empty[b-umx8we9qcj] {
    background: #f8f8f8;
}

.mkp-sum-bar--active[b-umx8we9qcj] {
    background: #edeeff;
    border-top-color: rgba(88, 86, 214, 0.25);
}

.mkp-sum-hint[b-umx8we9qcj] {
    font-size: 11px;
    color: #aeaeb2;
    font-weight: 500;
    display: block;
    text-align: center;
}

.mkp-sum-content[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.mkp-sum-left[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #5856d6;
    flex: 1;
    min-width: 0;
}

    .mkp-sum-left svg[b-umx8we9qcj] {
        flex-shrink: 0;
    }

.mkp-sum-product-name[b-umx8we9qcj] {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkp-sum-value[b-umx8we9qcj] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    flex-shrink: 0;
}

.mkp-sum-number[b-umx8we9qcj] {
    font-size: 18px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.mkp-sum-unit[b-umx8we9qcj] {
    font-size: 12px;
    font-weight: 600;
    color: #636366;
}

/* --------------------------------------------------------------
   Verbrauch-Popup
-------------------------------------------------------------- */

.mkp-popup-backdrop[b-umx8we9qcj] {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    border-radius: 20px;
    z-index: 10;
}

.mkp-popup[b-umx8we9qcj] {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(88, 86, 214, 0.18), 0 2px 8px rgba(0,0,0,0.10);
    z-index: 11;
    overflow: hidden;
    animation: mkp-popup-in-b-umx8we9qcj 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes mkp-popup-in-b-umx8we9qcj {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -- Popup Header --------------------------------------------- */
.mkp-popup-header[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 10px;
    background: #f5f4ff;
    border-bottom: 1px solid rgba(88, 86, 214, 0.14);
}

.mkp-popup-header-left[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    color: #5856d6;
    flex: 1;
}

.mkp-popup-title-group[b-umx8we9qcj] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.mkp-popup-title[b-umx8we9qcj] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.mkp-popup-subtitle[b-umx8we9qcj] {
    font-size: 11px;
    font-weight: 500;
    color: #8e8e93;
    display: block;
}

.mkp-popup-close[b-umx8we9qcj] {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    border: none;
    background: rgba(88, 86, 214, 0.12);
    color: #5856d6;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.14s;
}

    .mkp-popup-close:hover[b-umx8we9qcj] {
        background: rgba(88, 86, 214, 0.22);
    }

/* -- Hint ----------------------------------------------------- */
.mkp-popup-hint[b-umx8we9qcj] {
    margin: 0;
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgba(88, 86, 214, 0.55);
}

/* -- Optionen-Liste ------------------------------------------- */
.mkp-popup-options[b-umx8we9qcj] {
    display: flex;
    flex-direction: column;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.mkp-popup-option[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    background: none;
    border: none;
    border-bottom: 1px solid #f0f0f5;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.12s;
}

    .mkp-popup-option:last-child[b-umx8we9qcj] {
        border-bottom: none;
    }

    .mkp-popup-option:hover[b-umx8we9qcj] {
        background: #f5f4ff;
    }

    .mkp-popup-option:active[b-umx8we9qcj] {
        background: #edeeff;
    }

.mkp-popup-option--first .mkp-popup-option-val[b-umx8we9qcj] {
    color: #34c759;
}

.mkp-popup-option--last .mkp-popup-option-val[b-umx8we9qcj] {
    color: #ff3b30;
}

.mkp-popup-option-val[b-umx8we9qcj] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    display: flex;
    align-items: baseline;
    gap: 3px;
}

.mkp-popup-option-unit[b-umx8we9qcj] {
    font-size: 11px;
    font-weight: 500;
    color: #8e8e93;
}


/* --------------------------------------------------------------
   Multiplikator-Popup
-------------------------------------------------------------- */

.mkp-mult-body[b-umx8we9qcj] {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mkp-mult-formula[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f4ff;
    border-radius: 12px;
    padding: 10px 14px;
    flex-wrap: wrap;
}

.mkp-mult-base[b-umx8we9qcj],
.mkp-mult-result[b-umx8we9qcj] {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
}

.mkp-mult-op[b-umx8we9qcj],
.mkp-mult-eq[b-umx8we9qcj] {
    font-size: 18px;
    font-weight: 700;
    color: #5856d6;
}

.mkp-mult-input[b-umx8we9qcj] {
    width: 72px;
    border: 2px solid #5856d6;
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    text-align: center;
    background: white;
    outline: none;
    transition: border-color 0.15s;
}

    .mkp-mult-input:focus[b-umx8we9qcj] {
        border-color: #3634c7;
    }

.mkp-mult-unit[b-umx8we9qcj] {
    font-size: 12px;
    font-weight: 600;
    color: #636366;
}

.mkp-mult-cost-preview[b-umx8we9qcj] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: #f2f2f7;
    border-radius: 10px;
}`n.mkp-mult-cost-label[b-umx8we9qcj] {
    font-size: 12px;
    font-weight: 600;
    color: #8e8e93;
}

.mkp-mult-cost-value[b-umx8we9qcj] {
    font-size: 15px;
    font-weight: 800;
    color: #5856d6;
    font-variant-numeric: tabular-nums;
}

.mkp-mult-confirm[b-umx8we9qcj] {
    background: #5856d6;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 11px 0;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
}

    .mkp-mult-confirm:hover[b-umx8we9qcj] {
        background: #4644c4;
    }

    .mkp-mult-confirm:active[b-umx8we9qcj] {
        background: #3634b0;
    }
/* /Components/Pages/Calc/NumPad.razor.rz.scp.css */

/* /Components/Pages/Calc/ProjectCalculator.razor.rz.scp.css */
/* app-container and app-header defined in responsive section below */

.badge[b-vfqv77bsv6] {
    background: #007aff;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.9rem;
}

/* Tabelle */
.table-card[b-vfqv77bsv6] {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    overflow: hidden;
    border-top: 3px solid #007aff;
}

table[b-vfqv77bsv6] {
    width: 100%;
    border-collapse: collapse;
}

th[b-vfqv77bsv6] {
    background: #eef4ff;
    color: #1c1c1e;
    padding: 9px 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 2px solid #c5d8ff;
}

td[b-vfqv77bsv6] {
    border-bottom: 1px solid #e5e5ea;
    vertical-align: middle;
}

/* Trennstriche: rechts von Menge, links von Preis/Einh. */
.col-divider-right[b-vfqv77bsv6] {
    border-right: 2px solid #c7c7cc !important;
}

.col-divider-left[b-vfqv77bsv6] {
    border-left: 2px solid #c7c7cc !important;
}

.drag-handle-cell[b-vfqv77bsv6] {
    cursor: grab;
    padding: 10px 8px;
    text-align: center;
    user-select: none;
    touch-action: none;
    -webkit-user-select: none;
    width: 28px;
}

    .drag-handle-cell:active[b-vfqv77bsv6] {
        cursor: grabbing;
    }

.drag-handle-th[b-vfqv77bsv6] {
    width: 28px;
    padding: 0 !important;
}

.drag-handle[b-vfqv77bsv6] {
    opacity: 0.35;
    transition: opacity 0.2s, color 0.2s;
    color: #8e8e93;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calc-drag-handle[b-vfqv77bsv6] {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 2px;
    border-radius: 4px;
    transition: background 0.15s;
}

    .calc-drag-handle:active[b-vfqv77bsv6] {
        cursor: grabbing;
        color: #007aff !important;
    }

.drag-handle-cell:hover .drag-handle[b-vfqv77bsv6] {
    opacity: 0.85;
    color: #3c3c43;
}

.drag-handle-cell:hover .calc-drag-handle[b-vfqv77bsv6] {
    background: rgba(0, 122, 255, 0.08);
}

tbody tr.drag-over[b-vfqv77bsv6] {
    background: #e8f0fe;
    border-top: 2px solid #007aff;
    outline: none;
}

    tbody tr.drag-over td[b-vfqv77bsv6] {
        background: #e8f0fe;
    }

.table-input[b-vfqv77bsv6] {
    border: 1px solid transparent;
    padding: 8px;
    border-radius: 4px;
    width: 100%;
}

    .table-input:focus[b-vfqv77bsv6] {
        border-color: #007aff;
        background: #f0f7ff;
        outline: none;
    }

.num[b-vfqv77bsv6] {
    text-align: right;
    width: 70px;
}

.total-text[b-vfqv77bsv6] {
    font-weight: bold;
    color: #1c1c1e;
    text-align: right;
}

.margin-text[b-vfqv77bsv6] {
    color: #34c759;
    text-align: right;
}

/* -- Aktiv/Ausgeschlossen Toggle ----------------------------------- */
.include-th[b-vfqv77bsv6] {
    width: 38px;
    padding: 0 4px !important;
    text-align: center;
    color: #007aff;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.include-cell[b-vfqv77bsv6] {
    width: 38px;
    text-align: center;
    padding: 0;
    vertical-align: middle;
}

/* Zentriert Drag-Handle ebenfalls mittig */
.drag-handle-cell[b-vfqv77bsv6] {
    vertical-align: middle;
}

.include-toggle[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    line-height: 0;
}

    /* nativen Input verstecken */
    .include-toggle input[type="checkbox"][b-vfqv77bsv6] {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
        pointer-events: none;
    }

.include-toggle-face[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
}

/* AN · blau gef?llt */
.include-toggle-face--on[b-vfqv77bsv6] {
    background: #007aff;
    border: 2px solid #007aff;
    color: white;
    box-shadow: 0 2px 6px rgba(0, 122, 255, 0.35);
}

/* AUS · wei?er Hintergrund, roter Rand + rotes X */
.include-toggle-face--off[b-vfqv77bsv6] {
    background: #fff5f5;
    border: 2px solid #ff9f9f;
    color: #ff3b30;
}

.include-toggle:hover .include-toggle-face--on[b-vfqv77bsv6] {
    background: #0066d6;
    border-color: #0066d6;
    box-shadow: 0 3px 8px rgba(0, 102, 214, 0.4);
}

.include-toggle:hover .include-toggle-face--off[b-vfqv77bsv6] {
    background: #ffe5e5;
    border-color: #ff3b30;
}


.btn-delete[b-vfqv77bsv6] {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0.4;
    transition: opacity 0.2s, background 0.2s;
}

    .btn-delete:hover[b-vfqv77bsv6] {
        opacity: 1;
        background: #ffe5e5;
    }

/* Modal & Wizard */
.modal-backdrop[b-vfqv77bsv6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
}

/* Wrapper zentriert modal-window und h?lt nav-panel relativ dazu */
.modal-stack[b-vfqv77bsv6] {
    position: relative;
    width: 90%;
    max-width: 640px;
    z-index: 2;
}

.modal-window[b-vfqv77bsv6] {
    position: relative;
    z-index: 2;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.12), 0 8px 20px rgba(0,0,0,0.22), 0 28px 60px rgba(0,0,0,0.38);
}

/* Modal-Header */
.modal-header[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 13px;
    background: #007aff;
}

.modal-header-icon[b-vfqv77bsv6] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.18);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-title[b-vfqv77bsv6] {
    flex: 1;
    color: white;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.modal-header-step[b-vfqv77bsv6] {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.03em;
    white-space: nowrap;
}

/* -- Close-Button im PDF-Preview-Header ----------------------- */
.btn-close[b-vfqv77bsv6] {
    background: rgba(0, 0, 0, 0.06);
    color: #3c3c43;
    border: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s;
    flex-shrink: 0;
}

    .btn-close:hover[b-vfqv77bsv6] {
        background: rgba(255, 59, 48, 0.12);
        color: #ff3b30;
    }

/* -- Floating Close-Button im Positions-Modal (au?erhalb des Modals) -- */
.btn-close-floating[b-vfqv77bsv6] {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 200;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    cursor: pointer;
    padding: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

    .btn-close-floating:hover[b-vfqv77bsv6] {
        background: rgba(255, 59, 48, 0.82);
        border-color: rgba(255, 59, 48, 0.6);
        color: white;
    }

    .btn-close-floating:active[b-vfqv77bsv6] {
        transform: scale(0.94);
    }

/* --------------------------------------------------------------
   Modal Nav Panel · schwebendes Schritte-Panel oberhalb der Modals
-------------------------------------------------------------- */
.modal-nav-panel[b-vfqv77bsv6] {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    right: 0;
    background: white;
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.12);
    z-index: 1;
    overflow: hidden;
}

@keyframes navPanelIn-b-vfqv77bsv6 {
    from {
        opacity: 0;
        transform: translateY(-10px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.mnp-header[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 14px 10px;
    background: #f0f7ff;
    border-bottom: 1.5px solid rgba(0, 122, 255, 0.14);
    flex-shrink: 0;
}

.mnp-header-icon[b-vfqv77bsv6] {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mnp-header-title[b-vfqv77bsv6] {
    font-size: 12px;
    font-weight: 700;
    color: #007aff;
    flex: 1;
    letter-spacing: 0.02em;
}

.mnp-header-hint[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 500;
    color: #aeaeb2;
    white-space: nowrap;
}

.mnp-steps[b-vfqv77bsv6] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 10px;
}

.mnp-step[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 11px;
    border: 1.5px solid #e5e5ea;
    background: #fafafa;
    cursor: pointer;
    font-family: -apple-system, system-ui, sans-serif;
    text-align: left;
    transition: background 0.14s, border-color 0.14s;
    min-width: 0;
    overflow: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .mnp-step:hover:not(.mnp-step--active)[b-vfqv77bsv6] {
        background: #f0f7ff;
        border-color: rgba(0, 122, 255, 0.35);
    }

.mnp-step--active[b-vfqv77bsv6] {
    background: #007aff;
    border-color: #007aff;
}

    .mnp-step--active .mnp-step-num[b-vfqv77bsv6],
    .mnp-step--active .mnp-step-label[b-vfqv77bsv6],
    .mnp-step--active .mnp-step-value[b-vfqv77bsv6] {
        color: white !important;
        opacity: 1 !important;
    }

.mnp-step--filled:not(.mnp-step--active)[b-vfqv77bsv6] {
    border-color: rgba(52, 199, 89, 0.4);
    background: #edfaf1;
}

.mnp-step-num[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 800;
    color: #aeaeb2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
}

.mnp-step--filled:not(.mnp-step--active) .mnp-step-num[b-vfqv77bsv6] {
    color: #34c759;
}

.mnp-step-label[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    line-height: 1.2;
}

.mnp-step-value[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 600;
    color: #8e8e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
    min-height: 12px;
}

.mnp-step--filled:not(.mnp-step--active) .mnp-step-value[b-vfqv77bsv6] {
    color: #1c1c1e;
    font-weight: 700;
}

@media (max-width: 480px) {
    .mnp-steps[b-vfqv77bsv6] {
        gap: 4px;
        padding: 8px;
    }

    .mnp-step[b-vfqv77bsv6] {
        padding: 7px 8px;
    }

    .mnp-step-label[b-vfqv77bsv6] {
        font-size: 9px;
    }

    .mnp-step-value[b-vfqv77bsv6] {
        font-size: 9px;
    }
}

/* Step-Navigation (alt, bleibt für Kompatibilit?t leer) */
.modal-nav[b-vfqv77bsv6] {
    display: none;
}

.modal-content[b-vfqv77bsv6] {
    padding: 36px 30px;
    min-height: 230px;
    text-align: center;
    background: white;
}

.wizard-input[b-vfqv77bsv6] {
    width: 100%;
    font-size: 24px;
    padding: 15px;
    border: 2px solid #e5e5ea;
    border-radius: 12px;
    margin-top: 20px;
}

    .wizard-input:focus[b-vfqv77bsv6] {
        border-color: #007aff;
        outline: none;
        background: #f0f7ff;
    }

.input-group[b-vfqv77bsv6] {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    margin-top: 20px;
}

    .input-group .wizard-input[b-vfqv77bsv6] {
        width: auto !important;
        margin-top: 0 !important;
    }

    .input-group input[type="number"][b-vfqv77bsv6],
    .input-group input[type="text"][b-vfqv77bsv6] {
        flex: 0 0 80% !important;
        min-width: 0;
    }

    .input-group select[b-vfqv77bsv6] {
        flex: 0 0 20% !important;
        min-width: 0;
        width: auto !important;
    }

.modal-actions[b-vfqv77bsv6] {
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    background: #f8f8f8;
    border-top: 1px solid #e5e5ea;
    border-radius: 0 0 20px 20px;
}

/* Buttons */
button[b-vfqv77bsv6] {
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-weight: 600;
    transition: 0.2s;
    cursor: pointer;
}

.btn-primary[b-vfqv77bsv6] {
    background: #007aff;
    color: white;
}

.btn-secondary[b-vfqv77bsv6] {
    background: #e5e5ea;
    color: #1c1c1e;
}

.btn-success[b-vfqv77bsv6] {
    background: #34c759;
    color: white;
}

.summary-box[b-vfqv77bsv6] {
    text-align: left;
    background: #f0f7ff;
    padding: 20px;
    border-radius: 12px;
}

    .summary-box .final[b-vfqv77bsv6] {
        font-size: 22px;
        color: #007aff;
        margin-top: 10px;
    }

/* Combobox Beschreibung · Aussehen wie natives datalist-Popup */
.wizard-desc-input-wrap[b-vfqv77bsv6] {
    width: 100%;
}

/* desc-picker side panel - same position as numpad */
.desc-picker-side[b-vfqv77bsv6] {
    position: absolute;
    right: calc(50% + 320px + 12px);
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    width: 280px;
    height: 420px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

/* Aufmaß-Mengenpicker · rechts vom Modal (gegen?ber dem Numpad) */
.aufmass-picker-side[b-vfqv77bsv6] {
    position: absolute;
    left: calc(50% + 320px + 12px);
    top: 50%;
    transform: translateY(-50%);
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    width: 300px;
    height: 480px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    z-index: 1;
}

@media (max-width: 1100px) {
    .desc-picker-side[b-vfqv77bsv6] {
        left: unset;
        right: 12px;
        top: 80px;
        transform: none;
        width: min(88vw, 320px);
        height: 60vh;
        max-height: 480px;
    }
}

@media (max-width: 1300px) {
    .aufmass-picker-side[b-vfqv77bsv6] {
        display: none;
    }
}

/* Table description cell */
.table-desc-input[b-vfqv77bsv6] {
    cursor: text;
    border-radius: 6px 0 0 6px !important;
}

.table-desc-wrap:focus-within .table-desc-input[b-vfqv77bsv6] {
    border-color: #007aff !important;
    background: #f0f7ff !important;
}

.table-desc-wrap:focus-within .desc-pick-trigger[b-vfqv77bsv6] {
    border-color: #007aff;
    background: #e8f4ff;
    color: #007aff;
}

/* Numpad-Display (ersetzt das input in Schritten 2-7) */
.numpad-display[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #f0f7ff;
    border-color: #007aff !important;
    color: #1c1c1e;
    font-family: -apple-system, system-ui, monospace;
    letter-spacing: 0.02em;
    min-height: 64px;
    cursor: default;
    user-select: none;
}

/* Numpad side-modal */
.numpad-modal[b-vfqv77bsv6] {
    position: absolute;
    right: calc(50% + 320px + 12px); /* rechts neben modal-window (max-width 640px · H?lfte 320px) */
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border-radius: 20px;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
    width: 220px;
    overflow: hidden;
    z-index: 1;
}

/* Numpad-Display im Hauptmodal */
.numpad-display[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background: #f0f7ff;
    border-color: #007aff !important;
    color: #1c1c1e;
    font-family: -apple-system, system-ui, monospace;
    letter-spacing: 0.02em;
    min-height: 64px;
    cursor: default;
    user-select: none;
    -webkit-user-select: none;
    /* inside input-group: behave like the number input */
    flex: 0 0 80%;
    width: auto;
    margin-top: 0;
}

/* --------------------------------------------------------------
   APP-HEADER · Card mit 2 Zeilen
-------------------------------------------------------------- */
.app-container[b-vfqv77bsv6] {
    padding: 16px;
    font-family: -apple-system, system-ui, sans-serif;
}

.app-header[b-vfqv77bsv6] {
    background: white;
    border-radius: 18px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: hidden;
    margin-bottom: 20px;
}

/* -- Zeile 1: header-top ----------------------- */
.header-top[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid #f0f0f5;
}

.title-group[b-vfqv77bsv6] {
    flex: 0 0 auto;
    min-width: 0;
}

.project-info-header[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.project-info-top[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.project-label[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #aeaeb2;
}

.btn-change-project[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #f2f2f7;
    color: #636366;
    border: none;
    padding: 3px 10px 3px 7px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    font-family: inherit;
    touch-action: manipulation;
}

    .btn-change-project:hover[b-vfqv77bsv6] {
        background: #e5e5ea;
        color: #1c1c1e;
    }

.project-customer[b-vfqv77bsv6] {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1c1c1e;
    margin: 0;
    line-height: 1.2;
}

.project-meta[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.project-meta-item[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
}

.project-meta-baustelle[b-vfqv77bsv6] {
    color: #ff9f0a;
}

.project-meta-angebot[b-vfqv77bsv6] {
    color: #636366;
    font-style: italic;
}

.project-meta-sep[b-vfqv77bsv6] {
    color: #d1d1d6;
    font-size: 14px;
}

/* -- Detail-Panel (Mitte, iPad/Desktop) -------- */
.header-detail-panel[b-vfqv77bsv6] {
    display: none; /* Mobile: versteckt */
    flex: 1;
    align-items: stretch;
    gap: 0;
    background: #fafafa;
    border: 1.5px solid #e5e5ea;
    border-radius: 14px;
    overflow: hidden;
    min-width: 0;
    margin: 0 24px; /* mehr Abstand zu den Divs links und rechts */
}

.hdp-section[b-vfqv77bsv6] {
    flex: 1; /* beide Spalten gleich breit */
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 16px;
    min-width: 0;
}

.hdp-section--baustelle[b-vfqv77bsv6] {
    border-left: 3px solid #ff9f0a;
}

.hdp-section--kunde[b-vfqv77bsv6] {
    border-left: 3px solid #007aff;
}

.hdp-divider[b-vfqv77bsv6] {
    width: 1px;
    background: #e5e5ea;
    flex-shrink: 0;
    margin: 8px 0;
}

.hdp-label[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #aeaeb2;
}

.hdp-name[b-vfqv77bsv6] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hdp-sub[b-vfqv77bsv6] {
    font-size: 12px;
    color: #636366;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Header Actions (rechts) ------------------- */
.header-actions[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.btn-print[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f7;
    border: none;
    color: #636366;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.18s, color 0.18s;
    padding: 0;
    touch-action: manipulation;
    flex-shrink: 0;
}

    .btn-print:hover[b-vfqv77bsv6] {
        background: #e5e5ea;
        color: #1c1c1e;
    }

.btn-info-active[b-vfqv77bsv6] {
    background: #e8f3ff !important;
    color: #007aff !important;
}

/* Info-Button nur auf Mobile */
.btn-info-toggle[b-vfqv77bsv6] {
    display: flex;
}

/* -- Info-Drawer (Mobile, aufklappbar) --------- */
.header-info-drawer[b-vfqv77bsv6] {
    display: flex;
    gap: 0;
    background: #fafafa;
    border-top: 1px solid #f0f0f5;
    overflow: hidden;
    animation: drawerOpen-b-vfqv77bsv6 0.2s ease;
}

@keyframes drawerOpen-b-vfqv77bsv6 {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hid-section[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 18px;
    flex: 1;
    min-width: 0;
}

.hid-section--baustelle[b-vfqv77bsv6] {
    border-top: 3px solid #ff9f0a;
}

.hid-section--kunde[b-vfqv77bsv6] {
    border-top: 3px solid #007aff;
    border-left: 1px solid #e5e5ea;
}

.hid-label[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #aeaeb2;
}

.hid-name[b-vfqv77bsv6] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    word-break: break-word;
}

.hid-sub[b-vfqv77bsv6] {
    font-size: 12px;
    color: #636366;
}

/* -- KPI-Leiste (Zeile 2) ---------------------- */
.kpi-bar[b-vfqv77bsv6] {
    display: flex;
    align-items: stretch;
    /* Mobile: scrollbar */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fafafa;
    border-top: 1px solid #f0f0f5;
}

    .kpi-bar[b-vfqv77bsv6]::-webkit-scrollbar {
        display: none;
    }

.kpi-item[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    gap: 3px;
    flex-shrink: 0; /* Mobile: kein shrink · scrollbar */
}

.kpi-item--highlight[b-vfqv77bsv6] {
    background: #f0f7ff;
}

.kpi-divider[b-vfqv77bsv6] {
    width: 1px;
    background: #e5e5ea;
    align-self: stretch;
    margin: 8px 0;
    flex-shrink: 0;
}

.kpi-label[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 700;
    color: #aeaeb2;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.kpi-value[b-vfqv77bsv6] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.kpi-green[b-vfqv77bsv6] {
    color: #34c759;
}

.kpi-blue[b-vfqv77bsv6] {
    color: #007aff;
}

/* -- Action Buttons ---------------------------- */
.btn-action[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: none;
    padding: 10px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    touch-action: manipulation;
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
}

    .btn-action:hover[b-vfqv77bsv6] {
        opacity: 0.88;
        transform: translateY(-1px);
    }

    .btn-action:active[b-vfqv77bsv6] {
        transform: translateY(0);
        opacity: 1;
    }

.btn-action--save[b-vfqv77bsv6] {
    background: #34c759;
    color: white;
    box-shadow: 0 2px 8px rgba(52,199,89,0.28);
}

.btn-action--add[b-vfqv77bsv6] {
    background: #007aff;
    color: white;
    box-shadow: 0 2px 8px rgba(0,122,255,0.28);
}

/* -- Save Toast ---------------------------------------------------------- */

/* -- Table Desc Cell ----------------------------------------------------- */
.table-desc-td[b-vfqv77bsv6] {
    padding: 0 !important;
}

.table-desc-wrap[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    padding: 1px 4px 1px 0;
    gap: 0;
}

    .table-desc-wrap .table-input[b-vfqv77bsv6] {
        flex: 1;
        min-width: 0;
        border-radius: 6px 0 0 6px;
        border-right: none !important;
    }

.desc-pick-trigger[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f7;
    border: 1px solid transparent;
    border-left: none;
    border-radius: 0 6px 6px 0;
    width: 28px;
    height: 34px;
    cursor: pointer;
    color: #8e8e93;
    padding: 0;
    flex-shrink: 0;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

    .desc-pick-trigger:hover[b-vfqv77bsv6] {
        background: #e0eeff;
        color: #007aff;
        border-color: #007aff;
    }

/* -- Table Picker Popover ------------------------------------------------ */
.picker-click-catcher[b-vfqv77bsv6] {
    position: fixed;
    inset: 0;
    z-index: 400;
    background: transparent;
}

.table-picker-popover[b-vfqv77bsv6] {
    position: fixed;
    z-index: 401;
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.22), 0 0 0 1px rgba(0,0,0,0.07);
    width: min(284px, calc(100vw - 16px));
    height: min(400px, calc(100vh - 80px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: popover-in-b-vfqv77bsv6 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
}

@keyframes popover-in-b-vfqv77bsv6 {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(-6px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* -- Leerer Zustand ---------------------------- */
.empty-state-calc[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 56px 24px;
    text-align: center;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 20px;
}

.empty-state-calc-icon[b-vfqv77bsv6] {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #f2f2f7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c7c7cc;
}

.empty-state-calc-title[b-vfqv77bsv6] {
    font-size: 1.05rem;
    font-weight: 700;
    color: #1c1c1e;
    margin: 0;
}

.empty-state-calc-sub[b-vfqv77bsv6] {
    font-size: 14px;
    color: #8e8e93;
    margin: 0;
    max-width: 280px;
    line-height: 1.5;
}

.btn-empty-add[b-vfqv77bsv6] {
    margin-top: 6px;
    font-size: 15px !important;
    padding: 14px 26px !important;
}

/* --------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------- */

/* - Kleine iPhones (<390px) ---------------- */
@media (max-width: 389px) {
    .header-top[b-vfqv77bsv6] {
        padding: 12px 12px;
        gap: 10px;
    }

    .project-customer[b-vfqv77bsv6] {
        font-size: 1rem;
    }

    .btn-action[b-vfqv77bsv6] {
        padding: 9px 12px;
        font-size: 13px;
        gap: 5px;
    }

    .btn-label[b-vfqv77bsv6] {
        display: none;
    }

    .kpi-item[b-vfqv77bsv6] {
        padding: 10px 12px;
    }

    .kpi-value[b-vfqv77bsv6] {
        font-size: 13px;
    }
}

/* - iPhone (390?767px): Info-Button sichtbar, Detail-Panel versteckt -- */
@media (min-width: 390px) and (max-width: 767px) {
    .header-top[b-vfqv77bsv6] {
        padding: 14px 16px;
        gap: 10px;
    }

    .project-customer[b-vfqv77bsv6] {
        font-size: 1.1rem;
    }

    .kpi-item[b-vfqv77bsv6] {
        padding: 11px 14px;
    }

    .kpi-value[b-vfqv77bsv6] {
        font-size: 14px;
    }

    .kpi-item--hide-xs[b-vfqv77bsv6] {
        display: none;
    }

    .kpi-divider.kpi-item--hide-xs[b-vfqv77bsv6] {
        display: none;
    }
}

/* - iPad + Desktop (=768px): Detail-Panel einblenden, Info-Button ausblenden - */
@media (min-width: 768px) {
    .header-detail-panel[b-vfqv77bsv6] {
        display: flex;
    }
    /* Panel einblenden */
    .btn-info-toggle[b-vfqv77bsv6] {
        display: none;
    }
    /* Info-Button ausblenden */
    .header-info-drawer[b-vfqv77bsv6] {
        display: none !important;
    }
    /* Drawer nie sichtbar */

    .kpi-item[b-vfqv77bsv6] {
        flex: 1; /* Stretch ?ber volle Breite */
        flex-shrink: 1;
        padding: 13px 12px;
    }

    .kpi-divider[b-vfqv77bsv6] {
        flex-shrink: 0;
    }

    .kpi-value[b-vfqv77bsv6] {
        font-size: 15px;
    }
}

@media (min-width: 1024px) {
    .app-container[b-vfqv77bsv6] {
        padding: 20px;
    }

    .project-customer[b-vfqv77bsv6] {
        font-size: 1.3rem;
    }

    .kpi-value[b-vfqv77bsv6] {
        font-size: 16px;
    }

    .header-top[b-vfqv77bsv6] {
        padding: 18px 24px;
    }
}

/* -- ERPKey Badge ------------------------------------------------ */
.erp-badge[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 7px;
    background: #e8f0fe;
    color: #007aff;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.erp-badge-empty[b-vfqv77bsv6] {
    background: #f2f2f7;
    color: #c7c7cc;
}

.erp-badge-list[b-vfqv77bsv6] {
    margin-right: 8px;
    font-size: 11px;
}

.btn-sm[b-vfqv77bsv6] {
    padding: 8px 14px !important;
    font-size: 13px !important;
}

/* -- Schnell-Hinzufügen Button ---------------------------------- */
.btn-quick-add[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    width: 100%;
    padding: 11px 16px;
    background: #f0f7ff;
    border: 1.5px dashed #007aff;
    border-radius: 10px;
    color: #007aff;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-style 0.15s;
}

    .btn-quick-add:hover[b-vfqv77bsv6] {
        background: #e0eeff;
        border-style: solid;
    }

/* -- Quick-Add Bestätigungs-Dialog ------------------------------ */
.quick-add-overlay[b-vfqv77bsv6] {
    position: fixed;
    inset: 0;
    backdrop-filter: blur(2px);
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.quick-add-dialog[b-vfqv77bsv6] {
    background: white;
    border-radius: 16px;
    width: 88%;
    max-width: 400px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.25);
    overflow: hidden;
}

.quick-add-dialog-header[b-vfqv77bsv6] {
    background: #f0f7ff;
    color: #007aff;
    padding: 14px 18px;
    font-size: 15px;
    font-weight: 700;
    border-bottom: 1.5px solid rgba(0, 122, 255, 0.15);
}

.quick-add-dialog-body[b-vfqv77bsv6] {
    padding: 18px 18px 10px;
}

.quick-add-preview-row[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f7ff;
    padding: 12px 14px;
    border-radius: 10px;
    margin-bottom: 10px;
}

.quick-add-preview-text[b-vfqv77bsv6] {
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1e;
    line-height: 1.4;
}

.quick-add-hint[b-vfqv77bsv6] {
    font-size: 12px;
    color: #8e8e93;
    margin: 8px 0 0;
    text-align: center;
}

.quick-add-dialog-actions[b-vfqv77bsv6] {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 18px 16px;
}

/* -- ERP-Nr. Eingabe im Dialog ------------------------------------ */
.quick-add-erp-row[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 14px;
}

.quick-add-erp-label[b-vfqv77bsv6] {
    font-size: 12px;
    font-weight: 600;
    color: #3c3c43;
}

.quick-add-erp-input[b-vfqv77bsv6] {
    width: 100% !important;
    font-size: 15px;
    padding: 11px 14px;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    font-family: inherit;
    background: #fafafa;
    box-sizing: border-box;
}

    .quick-add-erp-input:focus[b-vfqv77bsv6] {
        outline: none;
        border-color: #007aff;
        background: #f0f7ff;
    }

/* -- Gespeichert-Feedback --------------------------------------- */
.quick-add-saved[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 9px 16px;
    background: #e8faf0;
    color: #34c759;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 700;
}

/* btn-action, save-feedback: defined in header section above */

/* -- Kalkulations-PDF Button ---------------------------------------------- */
.btn-print--kalk[b-vfqv77bsv6] {
    background: #edfaf1;
    color: #34c759;
}

    .btn-print--kalk:hover[b-vfqv77bsv6] {
        background: #d4f5e1;
        color: #1faa48;
    }

/* -- PDF-Men? Dropdown ---------------------------------------------------- */
.pdf-menu-wrap[b-vfqv77bsv6] {
    position: relative;
    flex-shrink: 0;
}

.btn-print--active[b-vfqv77bsv6] {
    background: #e8f0ff !important;
    color: #007aff !important;
}

.pdf-menu-backdrop[b-vfqv77bsv6] {
    position: fixed;
    inset: 0;
    z-index: 300;
}

.pdf-menu-popover[b-vfqv77bsv6] {
    position: fixed;
    z-index: 301;
    background: white;
    border-radius: 16px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.06);
    min-width: 210px;
    overflow: hidden;
    animation: pdfMenuIn-b-vfqv77bsv6 0.16s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes pdfMenuIn-b-vfqv77bsv6 {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pdf-menu-item[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 16px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: background 0.14s;
    border-radius: 0;
}

    .pdf-menu-item:hover[b-vfqv77bsv6] {
        background: #f5f5f7;
    }

    .pdf-menu-item:active[b-vfqv77bsv6] {
        background: #ececf0;
    }

.pdf-menu-icon[b-vfqv77bsv6] {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pdf-menu-icon--angebot[b-vfqv77bsv6] {
    background: #e8f0ff;
    color: #007aff;
}

.pdf-menu-icon--kalk[b-vfqv77bsv6] {
    background: #edfaf1;
    color: #34c759;
}

.pdf-menu-icon--aa[b-vfqv77bsv6] {
    background: linear-gradient(135deg, #fff4e0 0%, #ffe5b4 100%);
    color: #ff9500;
}

.pdf-menu-text[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pdf-menu-label[b-vfqv77bsv6] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.2;
}

.pdf-menu-desc[b-vfqv77bsv6] {
    font-size: 11px;
    color: #8e8e93;
    font-weight: 500;
}

.pdf-menu-divider[b-vfqv77bsv6] {
    height: 1px;
    background: #f0f0f5;
    margin: 0 12px;
}

/* -- PDF-Preview-Modal ---------------------------------------------------- */
.pdf-preview-backdrop[b-vfqv77bsv6] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1100;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.pdf-preview-modal[b-vfqv77bsv6] {
    position: fixed;
    z-index: 1101;
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border-radius: 18px;
    overflow: hidden;
    animation: previewSlideUp-b-vfqv77bsv6 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
    margin: auto;
    top: 5vh;
    bottom: 5vh;
    left: 0;
    right: 0;
    max-width: 860px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}

@keyframes previewSlideUp-b-vfqv77bsv6 {
    from {
        transform: translateY(40px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pdf-preview-header[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px 13px;
    border-bottom: 1px solid #e5e5ea;
    flex-shrink: 0;
    background: #f8f8fa;
    border-radius: 18px 18px 0 0;
}

.pdf-preview-header-left[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1c1c1e;
}

.pdf-preview-title[b-vfqv77bsv6] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    letter-spacing: -0.01em;
}

.pdf-preview-body[b-vfqv77bsv6] {
    flex: 1;
    min-height: 0;
    position: relative;
    background: #f0f0f5;
}

.pdf-preview-frame[b-vfqv77bsv6] {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Fallback-Button für iOS Safari (iframe zeigt PDF nicht immer inline) */
.pdf-preview-open-btn[b-vfqv77bsv6] {
    position: absolute;
    bottom: 14px;
    right: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0,0,0,0.62);
    color: #fff;
    border: none;
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10;
    transition: background 0.15s;
}

    .pdf-preview-open-btn:hover[b-vfqv77bsv6],
    .pdf-preview-open-btn:active[b-vfqv77bsv6] {
        background: rgba(0,0,0,0.82);
    }

.pdf-preview-actions[b-vfqv77bsv6] {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid #e5e5ea;
    flex-shrink: 0;
    background: #ffffff;
    border-radius: 0 0 18px 18px;
}

.pdf-preview-btn[b-vfqv77bsv6] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 12px;
    padding: 13px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.12s;
    letter-spacing: -0.01em;
}

    .pdf-preview-btn:active[b-vfqv77bsv6] {
        opacity: 0.75;
        transform: scale(0.97);
    }

.pdf-preview-btn--download[b-vfqv77bsv6] {
    background: #eef4ff;
    color: #007aff;
}

    .pdf-preview-btn--download:hover[b-vfqv77bsv6] {
        background: #ddeaff;
    }

.pdf-preview-btn--email[b-vfqv77bsv6] {
    background: #007aff;
    color: #ffffff;
}

    .pdf-preview-btn--email:hover[b-vfqv77bsv6] {
        background: #0066dd;
    }

/* -- Responsive: auf kleinen Screens ganzer Bildschirm ------------------- */
@media (max-width: 600px) {
    .pdf-preview-modal[b-vfqv77bsv6] {
        top: 0;
        bottom: 0;
        border-radius: 0;
    }

    .pdf-preview-header[b-vfqv77bsv6] {
        border-radius: 0;
    }

    .pdf-preview-actions[b-vfqv77bsv6] {
        border-radius: 0;
    }
}

/* --------------------------------------------------------------
   Schritt 8 · Zusammenfassung v2
-------------------------------------------------------------- */

/* Override: Zusammenfassung braucht keinen ?berm??igen Innenabstand */
.modal-content:has(.sv2)[b-vfqv77bsv6] {
    padding: 0;
    text-align: left;
    min-height: unset;
}

.sv2[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* -- Positions-Header ---------------------------------------- */
.sv2-pos-header[b-vfqv77bsv6] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 18px 22px 16px;
    background: #f0f7ff;
    border-bottom: 1.5px solid rgba(0, 122, 255, 0.13);
}

.sv2-pos-icon[b-vfqv77bsv6] {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: rgba(0, 122, 255, 0.12);
    color: #007aff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.sv2-pos-body[b-vfqv77bsv6] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.sv2-pos-desc[b-vfqv77bsv6] {
    font-size: 14px;
    font-weight: 700;
    color: #1c1c1e;
    line-height: 1.35;
    word-break: break-word;
}

.sv2-mat-tag[b-vfqv77bsv6] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 122, 255, 0.09);
    color: #007aff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px 3px 6px;
    border-radius: 20px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border: 1px solid rgba(0, 122, 255, 0.18);
    align-self: flex-start;
}

.sv2-qty-chip[b-vfqv77bsv6] {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    margin-left: 4px;
}

.sv2-qty-num[b-vfqv77bsv6] {
    font-size: 18px;
    font-weight: 800;
    color: #1c1c1e;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.sv2-qty-unit[b-vfqv77bsv6] {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    text-transform: lowercase;
}

/* -- Kostenaufstellung --------------------------------------- */
.sv2-costs[b-vfqv77bsv6] {
    padding: 14px 22px 12px;
    background: white;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-bottom: 1.5px solid #f0f0f5;
}

.sv2-cost-row[b-vfqv77bsv6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f7;
}

    .sv2-cost-row:last-child[b-vfqv77bsv6] {
        border-bottom: none;
    }

.sv2-cost-row--sub .sv2-cost-label[b-vfqv77bsv6] {
    padding-left: 14px;
    color: #aeaeb2;
    font-size: 12px;
}

.sv2-cost-row--sub .sv2-cost-val[b-vfqv77bsv6] {
    color: #aeaeb2;
    font-size: 12px;
}

.sv2-cost-row--markup[b-vfqv77bsv6] {
    border-bottom: none !important;
}

.sv2-cost-label[b-vfqv77bsv6] {
    font-size: 13px;
    font-weight: 500;
    color: #3c3c43;
}

.sv2-cost-val[b-vfqv77bsv6] {
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
}

.sv2-cost-val--markup[b-vfqv77bsv6] {
    color: #007aff;
}

/* -- Ergebnis-Streifen --------------------------------------- */
.sv2-result-strip[b-vfqv77bsv6] {
    display: flex;
    align-items: stretch;
    background: #f8f8fa;
    border-bottom: 1.5px solid #f0f0f5;
}

.sv2-rs-item[b-vfqv77bsv6] {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 10px;
}

.sv2-rs-divider[b-vfqv77bsv6] {
    width: 1px;
    background: #e5e5ea;
    margin: 10px 0;
}

.sv2-rs-label[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #aeaeb2;
}

.sv2-rs-val[b-vfqv77bsv6] {
    font-size: 16px;
    font-weight: 700;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
}

.sv2-rs-val--blue[b-vfqv77bsv6] {
    color: #007aff;
}

/* -- Gesamtpreis Hero ---------------------------------------- */
.sv2-hero[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px 18px;
    background: white;
    gap: 12px;
}

.sv2-hero-left[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sv2-hero-label[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #aeaeb2;
}

.sv2-hero-price[b-vfqv77bsv6] {
    font-size: 28px;
    font-weight: 800;
    color: #007aff;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.sv2-hero-right[b-vfqv77bsv6] {
    flex-shrink: 0;
}

.sv2-margin-badge[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    background: #edfaf1;
    border: 1.5px solid rgba(52, 199, 89, 0.3);
    border-radius: 12px;
    padding: 10px 14px;
}

.sv2-margin-badge-top[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #34c759;
}

.sv2-margin-badge-val[b-vfqv77bsv6] {
    font-size: 18px;
    font-weight: 800;
    color: #1faa48;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    line-height: 1.1;
}

.sv2-margin-badge-pct[b-vfqv77bsv6] {
    font-size: 10px;
    font-weight: 600;
    color: #57c87a;
}

/* --------------------------------------------------------------
   TABELLEN-NUMPAD POPUP  (identisch mit Aufmass)
-------------------------------------------------------------- */
.np-overlay[b-vfqv77bsv6] {
    position: fixed;
    inset: 0;
    z-index: 300;
    background: transparent;
}

.np-popup[b-vfqv77bsv6] {
    position: fixed;
    z-index: 301;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    padding: 0 0 4px;
    display: flex;
    flex-direction: column;
    animation: np-in-b-vfqv77bsv6 0.15s cubic-bezier(0.34,1.3,0.64,1);
    width: 220px;
    height: 288px;
}

@keyframes np-in-b-vfqv77bsv6 {
    from {
        opacity: 0;
        transform: scale(0.92);
        transform-origin: center;
    }

    to {
        opacity: 1;
        transform: scale(1);
        transform-origin: center;
    }
}

/* Tabellen-Inputs die numpad-gesteuert sind · wie seg-input in Aufmass */
.table-input.num[b-vfqv77bsv6] {
    cursor: pointer;
}

    .table-input.num:focus[b-vfqv77bsv6] {
        outline: 2px solid #007aff;
        outline-offset: -1px;
        background: #f0f7ff;
    }

/* -- Lohn-Tag im Übersichts-Panel (Schritt 8) ----------------- */

.sv2-mat-tag--lohn[b-vfqv77bsv6] {
    background: rgba(13, 148, 136, 0.09);
    color: #0d9488;
    border-color: rgba(13, 148, 136, 0.18);
}


/* ----------------------------------------------------------------
   NEUES SIDEBAR-LAYOUT  (?berschreibt app-container / app-header)
---------------------------------------------------------------- */

/* Root-Container · volle H?he abzgl. Topbar */
.calc-root[b-vfqv77bsv6] {
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    font-family: -apple-system, system-ui, sans-serif;
    background: #f2f2f7;
    overflow: hidden;
}

/* 2-Spalten Grid: feste Sidebar links, Tabelle rechts */
.calc-layout[b-vfqv77bsv6] {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: 1fr;
    overflow: hidden;
}

/* -- Sidebar ------------------------------------------------ */
.calc-sidebar[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    background: white;
    border-right: 1px solid #e5e5ea;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0;
}

/* Header: Back-Button + Titel + PDF (exakt wie Aufmaß) */
.csb-header[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 10px;
    background: white;
    flex-shrink: 0;
}

.csb-back-btn[b-vfqv77bsv6] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: white;
    border: 1.5px solid #e5e5ea;
    color: #3c3c43;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    touch-action: manipulation;
    padding: 0;
}

    .csb-back-btn svg[b-vfqv77bsv6],
    .csb-back-btn path[b-vfqv77bsv6] {
        stroke: currentColor;
    }

    .csb-back-btn:hover[b-vfqv77bsv6] {
        background: #e8f3ff;
        border-color: #007aff;
        color: #007aff;
    }

.csb-title-group[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.csb-title-main[b-vfqv77bsv6] {
    font-size: 13px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csb-title-sub[b-vfqv77bsv6] {
    font-size: 11px;
    color: #8e8e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csb-pdf-btn[b-vfqv77bsv6] {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: #f2f2f7;
    border: 1.5px solid #e5e5ea;
    color: #636366;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    touch-action: manipulation;
    padding: 0;
}

    .csb-pdf-btn svg[b-vfqv77bsv6],
    .csb-pdf-btn path[b-vfqv77bsv6],
    .csb-pdf-btn rect[b-vfqv77bsv6] {
        stroke: currentColor;
    }

    .csb-pdf-btn:hover[b-vfqv77bsv6] {
        background: #f5f4ff;
        border-color: #5856d6;
        color: #5856d6;
    }

.csb-pdf-btn--active[b-vfqv77bsv6] {
    background: #f5f4ff !important;
    border-color: #5856d6 !important;
    color: #5856d6 !important;
}

/* Neue-Position-Button */
.csb-add-wrap[b-vfqv77bsv6] {
    padding: 1px 12px 12px 12px;
    border-bottom: 1px solid #e5e5ea;
}

.csb-add-btn[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px 16px;
    background: #007aff;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s;
    touch-action: manipulation;
}

    .csb-add-btn:hover[b-vfqv77bsv6] {
        background: #0066d6;
    }

    .csb-add-btn:active[b-vfqv77bsv6] {
        transform: scale(0.97);
    }

/* KPI-Karten */
.csb-kpi-list[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px;
}

.csb-kpi-row[b-vfqv77bsv6] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.csb-kpi[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: white;
    border-radius: 11px;
    padding: 9px 11px;
    border: 1.5px solid #e9e9ef;
}

.csb-kpi--highlight[b-vfqv77bsv6] {
    border-color: rgba(0, 122, 255, 0.25);
    background: #f0f7ff;
}

.csb-kpi-label[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #aeaeb2;
}

.csb-kpi-val[b-vfqv77bsv6] {
    font-size: 13px;
    font-weight: 800;
    color: #1c1c1e;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csb-kpi-val--green[b-vfqv77bsv6] {
    color: #34c759;
}

.csb-kpi-val--blue[b-vfqv77bsv6] {
    color: #007aff;
}

.csb-kpi-empty[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 24px 16px;
    color: #c7c7cc;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
}

/* Projektdetails (Baustelle / Kontakt) */
.csb-detail[b-vfqv77bsv6] {
    margin: 4px 12px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
    border-radius: 11px;
    overflow: hidden;
    border: 1.5px solid #e9e9ef;
}

.csb-detail-section[b-vfqv77bsv6] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    background: white;
}

    .csb-detail-section + .csb-detail-section[b-vfqv77bsv6] {
        border-top: 1px solid #f0f0f5;
    }

/* Baustelle: orange wie ProjectSetup */
.csb-detail-section--baustelle .csb-detail-icon[b-vfqv77bsv6] {
    background: #fff4e6;
    color: #ff9f0a;
}

/* Kunde / Kontakt: blau wie ProjectSetup */
.csb-detail-section--kunde .csb-detail-icon[b-vfqv77bsv6] {
    background: #e8f3ff;
    color: #007aff;
}

.csb-detail-icon[b-vfqv77bsv6] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.csb-detail-body[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 1;
    min-width: 0;
}

.csb-detail-label[b-vfqv77bsv6] {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #aeaeb2;
}

.csb-detail-name[b-vfqv77bsv6] {
    font-size: 12px;
    font-weight: 600;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.csb-detail-sub[b-vfqv77bsv6] {
    font-size: 11px;
    color: #8e8e93;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* -- Hauptbereich: Tabelle ---------------------------------- */
.calc-main[b-vfqv77bsv6] {
    flex: 1;
    min-width: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}

/* Tabellen-Card neu */
.table-card[b-vfqv77bsv6] {
    background: white;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
    overflow: hidden;
    border-top: 2.5px solid #007aff;
    min-width: 680px; /* horizontales Scrollen auf sehr kleinen Screens */
}

/* Kompakte Tabellen-Styles */
table[b-vfqv77bsv6] {
    width: 100%;
    border-collapse: collapse;
}

th[b-vfqv77bsv6] {
    background: #f0f5ff;
    color: #636366;
    padding: 7px 5px;
    text-align: center;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid #d6e4ff;
    white-space: nowrap;
}

td[b-vfqv77bsv6] {
    border-bottom: 1px solid #f0f0f5;
    vertical-align: middle;
    padding: 0;
}

tbody tr:last-child td[b-vfqv77bsv6] {
    border-bottom: none;
}

tbody tr:hover td[b-vfqv77bsv6] {
    background: #fafbff;
}

.row-excluded td[b-vfqv77bsv6] {
    opacity: 0.45;
}

/* Spaltenbreiten */
.drag-handle-th[b-vfqv77bsv6],
.drag-handle-cell[b-vfqv77bsv6] {
    width: 30px;
    padding: 0 !important;
}

.clone-position-th[b-vfqv77bsv6],
.clone-position-cell[b-vfqv77bsv6] {
    width: 30px;
    text-align: center;
    padding: 0 !important;
}

.clone-position-th[b-vfqv77bsv6],
.clone-position-cell[b-vfqv77bsv6],
.include-th[b-vfqv77bsv6],
.include-cell[b-vfqv77bsv6] {
    width: 30px;
    text-align: center;
}

.col-pos[b-vfqv77bsv6] {
    width: 30px;
}

.col-desc[b-vfqv77bsv6] {
    min-width: 120px;
}

.col-qty[b-vfqv77bsv6] {
    width: 90px;
}

.col-num[b-vfqv77bsv6] {
    width: 68px;
}

.col-total[b-vfqv77bsv6] {
    width: 76px;
}

.col-del[b-vfqv77bsv6] {
    width: 32px;
}

.cell-pos[b-vfqv77bsv6] {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: #8e8e93;
    padding: 0 4px;
}

.del-cell[b-vfqv77bsv6] {
    text-align: center;
}

/* Trennlinien */
.col-divider-right[b-vfqv77bsv6] {
    border-right: 1.5px solid #d1d1d6 !important;
}

.col-divider-left[b-vfqv77bsv6] {
    border-left: 1.5px solid #d1d1d6 !important;
}

/* Drag Handle */
.drag-handle-cell[b-vfqv77bsv6] {
    cursor: grab;
    text-align: center;
    user-select: none;
    touch-action: none;
    -webkit-user-select: none;
    vertical-align: middle;
}

    .drag-handle-cell:active[b-vfqv77bsv6] {
        cursor: grabbing;
    }

.drag-handle[b-vfqv77bsv6] {
    opacity: 0.3;
    transition: opacity 0.15s;
    color: #8e8e93;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.drag-handle-cell:hover .drag-handle[b-vfqv77bsv6] {
    opacity: 0.8;
}

.calc-drag-handle[b-vfqv77bsv6] {
    cursor: grab;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    padding: 0;
    border-radius: 6px;
    transition: background 0.15s;
}

.clone-position-btn[b-vfqv77bsv6] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    color: #aeaeb2;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    padding: 0;
}

    .clone-position-btn:hover[b-vfqv77bsv6] {
        background: #f0f7ff;
        border-color: #007aff;
        color: #007aff;
    }

tbody tr.drag-over[b-vfqv77bsv6] {
    background: #e8f0fe;
    border-top: 2px solid #007aff;
}

    tbody tr.drag-over td[b-vfqv77bsv6] {
        background: #e8f0fe;
    }

/* Tabellen-Inputs */
.table-input[b-vfqv77bsv6] {
    border: 1px solid transparent;
    padding: 6px 5px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    font-size: 12px;
    background: transparent;
    -webkit-appearance: none;
    transition: border-color 0.15s, background 0.15s;
    color: #1c1c1e;
}

    .table-input:focus[b-vfqv77bsv6] {
        border-color: #007aff;
        background: #f0f7ff;
        outline: none;
    }

    .table-input.num[b-vfqv77bsv6] {
        text-align: right;
        font-variant-numeric: tabular-nums;
        font-size: 12px;
        width: 100%;
        padding-right: 6px;
    }

.table-desc-input[b-vfqv77bsv6] {
    min-width: 80px;
}

.table-desc-td[b-vfqv77bsv6] {
    padding: 0 2px;
}

.table-desc-wrap[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0 2px;
}

.desc-pick-trigger[b-vfqv77bsv6] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    color: #aeaeb2;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
    padding: 0;
}

    .desc-pick-trigger:hover[b-vfqv77bsv6] {
        background: #f0f7ff;
        border-color: #007aff;
        color: #007aff;
    }

/* Einheit-Zelle */
.unit-cell[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px 2px 2px;
}

    .unit-cell .table-input[b-vfqv77bsv6] {
        width: 48px;
    }

.table-select[b-vfqv77bsv6] {
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid #e5e5ea;
    border-radius: 6px;
    padding: 4px 3px;
    color: #1c1c1e;
    background: white;
    -webkit-appearance: none;
    cursor: pointer;
    width: 38px;
    text-align: center;
}

    .table-select:focus[b-vfqv77bsv6] {
        outline: none;
        border-color: #007aff;
    }

/* Inkl/Exkl Toggle */
.drag-handle-cell[b-vfqv77bsv6],
.clone-position-cell[b-vfqv77bsv6],
.include-cell[b-vfqv77bsv6] {
    padding: 0;
    text-align: center;
    vertical-align: middle;
}

.drag-handle-cell[b-vfqv77bsv6],
.clone-position-cell[b-vfqv77bsv6],
.include-cell[b-vfqv77bsv6],
.drag-handle-th[b-vfqv77bsv6],
.clone-position-th[b-vfqv77bsv6],
.include-th[b-vfqv77bsv6] {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.drag-handle-cell[b-vfqv77bsv6],
.clone-position-cell[b-vfqv77bsv6] {
    line-height: 0;
}

.drag-handle-cell .calc-drag-handle[b-vfqv77bsv6],
.clone-position-cell .clone-position-btn[b-vfqv77bsv6],
.include-cell .include-toggle[b-vfqv77bsv6] {
    margin: 0 auto;
}

.drag-handle-cell .calc-drag-handle[b-vfqv77bsv6] {
    width: 24px;
    height: 24px;
}

.include-th[b-vfqv77bsv6] {
    padding: 0 !important;
}

.include-toggle[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 6px;
}

    .include-toggle input[type="checkbox"][b-vfqv77bsv6] {
        display: none;
    }

.include-toggle-face[b-vfqv77bsv6] {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.14s, border-color 0.14s;
    flex-shrink: 0;
}

.include-toggle-face--on[b-vfqv77bsv6] {
    background: #34c759;
}

.include-toggle-face--off[b-vfqv77bsv6] {
    background: #e5e5ea;
}

/* Ergebnis-Zellen */
.total-text[b-vfqv77bsv6] {
    font-size: 12px;
    font-weight: 700;
    color: #1c1c1e;
    text-align: right;
    padding: 6px 6px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.margin-text[b-vfqv77bsv6] {
    font-size: 12px;
    font-weight: 600;
    color: #34c759;
    text-align: right;
    padding: 6px 6px;
    font-variant-numeric: tabular-nums;
}

/* Löschen-Button in Tabelle */
.btn-delete[b-vfqv77bsv6] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #d1d1d6;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color 0.14s, background 0.14s;
    font-family: inherit;
    margin: 0 auto;
}

    .btn-delete:hover[b-vfqv77bsv6] {
        color: #ff3b30;
        background: #fff2f1;
    }

/* Leerer Tabellenzustand */
.table-empty-state[b-vfqv77bsv6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: #aeaeb2;
    text-align: center;
}

    .table-empty-state svg[b-vfqv77bsv6] {
        color: #d1d1d6;
    }

    .table-empty-state p[b-vfqv77bsv6] {
        margin: 0;
        font-size: 14px;
        font-weight: 500;
    }

/* -- Responsive --------------------------------------------- */

/* iPad Landscape / Desktop: volle Sidebar */
@media (min-width: 900px) {
    .calc-layout[b-vfqv77bsv6] {
        grid-template-columns: 248px 1fr;
    }
}

/* iPad Portrait: schmalere Sidebar */
@media (min-width: 600px) and (max-width: 899px) {
    .calc-layout[b-vfqv77bsv6] {
        grid-template-columns: 200px 1fr;
    }

    .csb-add-btn[b-vfqv77bsv6] {
        font-size: 13px;
        padding: 11px 12px;
    }

    .csb-kpi-val[b-vfqv77bsv6] {
        font-size: 12px;
    }
}

/* Schmale Bildschirme: Sidebar klappt oben ?ber die Tabelle */
@media (max-width: 599px) {
    .calc-layout[b-vfqv77bsv6] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .calc-sidebar[b-vfqv77bsv6] {
        border-right: none;
        border-bottom: 1px solid #e5e5ea;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 0;
        padding: 8px 10px;
        align-items: flex-start;
    }

    .csb-header[b-vfqv77bsv6] {
        padding: 6px 8px;
        border: none;
        background: transparent;
        flex-shrink: 0;
        min-width: 160px;
    }

    .csb-title-main[b-vfqv77bsv6] {
        font-size: 12px;
    }

    .csb-title-sub[b-vfqv77bsv6] {
        font-size: 10px;
    }

    .csb-back-btn[b-vfqv77bsv6],
    .csb-pdf-btn[b-vfqv77bsv6] {
        width: 30px;
        height: 30px;
    }

    .csb-add-wrap[b-vfqv77bsv6] {
        padding: 0 6px;
        flex-shrink: 0;
    }

    .csb-kpi-list[b-vfqv77bsv6] {
        flex-direction: row;
        flex-shrink: 0;
        padding: 0 0 0 6px;
        gap: 4px;
    }

    .csb-kpi-row[b-vfqv77bsv6] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .csb-kpi[b-vfqv77bsv6] {
        padding: 6px 8px;
        min-width: 72px;
    }

    .csb-detail[b-vfqv77bsv6] {
        display: none;
    }

    .csb-kpi-empty[b-vfqv77bsv6] {
        display: none;
    }

    .calc-main[b-vfqv77bsv6] {
        padding: 8px;
    }
}

.quick-add-close[b-vfqv77bsv6] { border: 0; background: transparent; color: inherit; cursor: pointer; font-size: 18px; font-weight: 800; line-height: 1; padding: 2px 4px; }
/* /Components/Pages/Calc/ProjectSetup.razor.rz.scp.css */
/* --------------------------------------------------------------
   BREADCRUMBS
-------------------------------------------------------------- */
.breadcrumbs[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    padding: 14px 28px 12px;
    background: #fff;
    border-bottom: 1px solid #e5e5ea;
    font-size: 13px;
    font-family: -apple-system, system-ui, sans-serif;
}

/* --------------------------------------------------------------
   CRM-ARBEITSOBERFLÄCHE
-------------------------------------------------------------- */
.project-crm[b-9u9gcmqnqe] {
    --crm-bg: #f5f5f7;
    --crm-panel: #ffffff;
    --crm-panel-soft: #fbfbfd;
    --crm-line: #e5e5ea;
    --crm-line-strong: #d1d1d6;
    --crm-text: #1c1c1e;
    --crm-muted: #636366;
    --crm-faint: #8e8e93;
    --crm-accent: #2563eb;
    --crm-accent-soft: #f3f6fb;
    --crm-danger: #c4261d;
    --crm-danger-soft: #fff0ef;
    --crm-header-height: 48px;
    --crm-top-gap: 12px;
    height: calc(100dvh - var(--crm-header-height));
    padding: var(--crm-top-gap) 24px var(--crm-top-gap);
    background: var(--crm-bg);
    color: var(--crm-text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.crm-panel-kicker[b-9u9gcmqnqe] {
    display: block;
    color: var(--crm-faint);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.2;
    text-transform: uppercase;
}

.crm-grid[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: minmax(252px, 276px) minmax(252px, 276px) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    max-width: 1680px;
    height: calc(100dvh - var(--crm-header-height) - var(--crm-top-gap) - var(--crm-top-gap));
    min-height: 0;
    margin: 0 auto;
    overflow: visible;
    border: 1px solid var(--crm-line-strong);
    border-radius: 10px;
    background: var(--crm-panel);
    box-shadow: 0 14px 34px rgba(28, 28, 30, 0.07);
}

.crm-panel[b-9u9gcmqnqe] {
    min-width: 0;
    background: var(--crm-panel);
}

.crm-sidebar[b-9u9gcmqnqe] {
    display: flex;
    grid-row: 2;
    min-height: 0;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid var(--crm-line);
}

.crm-grid > .crm-sidebar:nth-of-type(1)[b-9u9gcmqnqe] {
    border-bottom-left-radius: 9px;
}

.crm-sidebar--combined-results[b-9u9gcmqnqe] {
    grid-column: 1 / 3;
}

.crm-documents[b-9u9gcmqnqe] {
    display: flex;
    grid-column: 3;
    grid-row: 1 / 3;
    min-height: 0;
    flex-direction: column;
    overflow: visible;
    background: #ffffff;
    border-top-right-radius: 9px;
    border-bottom-right-radius: 9px;
}

.crm-combined-toolbar[b-9u9gcmqnqe] {
    position: relative;
    z-index: 20;
    display: grid;
    grid-column: 1 / 3;
    grid-row: 1;
    grid-template-columns: minmax(0, 1fr) 38px auto;
    gap: 8px;
    min-width: 0;
    padding: 10px;
    border-top-left-radius: 9px;
    border-right: 1px solid var(--crm-line);
    border-bottom: 1px solid var(--crm-line);
    background: var(--crm-panel-soft);
}

.crm-combined-toolbar .sort-filter-wrap[b-9u9gcmqnqe] {
    width: 38px;
    min-width: 38px;
}

.crm-combined-toolbar .btn-sort-filter[b-9u9gcmqnqe] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
}

.crm-mobile-flow[b-9u9gcmqnqe] {
    display: none;
}

.crm-panel-toolbar[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px;
    gap: 8px;
    padding: 10px;
    border-bottom: 1px solid var(--crm-line);
    background: var(--crm-panel-soft);
}

.crm-search[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 10px;
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    background: #fff;
    color: var(--crm-faint);
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.crm-search:focus-within[b-9u9gcmqnqe] {
    border-color: #8ec5ff;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.11);
}

.crm-search input[b-9u9gcmqnqe] {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--crm-text);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
}

.crm-search input[b-9u9gcmqnqe]::placeholder {
    color: var(--crm-faint);
    font-weight: 400;
}

.crm-search-clear[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--crm-faint);
    cursor: pointer;
    font: inherit;
    font-size: 16px;
    line-height: 1;
}

.crm-search-clear:hover[b-9u9gcmqnqe],
.crm-search-clear:focus-visible[b-9u9gcmqnqe] {
    background: #f2f2f7;
    color: var(--crm-text);
    outline: none;
}

.crm-add-button[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    grid-column: 1 / -1;
    min-height: 36px;
    border: 1px solid var(--crm-accent);
    border-radius: 8px;
    background: var(--crm-accent);
    color: #fff;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.crm-add-button:hover[b-9u9gcmqnqe],
.project-crm .btn-primary:hover[b-9u9gcmqnqe] {
    background: #006edb;
    border-color: #006edb;
    box-shadow: 0 8px 18px rgba(0, 122, 255, 0.16);
    opacity: 1;
    transform: translateY(-1px);
}

.crm-add-button:active[b-9u9gcmqnqe],
.project-crm .btn-primary:active[b-9u9gcmqnqe] {
    transform: translateY(0);
}

.crm-combined-toolbar .crm-add-button[b-9u9gcmqnqe] {
    grid-column: auto;
    min-height: 38px;
    padding: 0 12px;
    white-space: nowrap;
}

.crm-combined-toolbar .crm-add-button:disabled[b-9u9gcmqnqe] {
    border-color: var(--crm-line-strong);
    background: #f2f2f4;
    color: var(--crm-faint);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.crm-create-wrap[b-9u9gcmqnqe] {
    position: relative;
    display: inline-flex;
}

.crm-create-button[b-9u9gcmqnqe] {
    min-width: 92px;
}

.crm-create-button--open .crm-create-chevron[b-9u9gcmqnqe] {
    transform: rotate(180deg);
}

.crm-create-chevron[b-9u9gcmqnqe] {
    transition: transform 0.16s;
}

.crm-create-backdrop[b-9u9gcmqnqe] {
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    background: transparent;
    cursor: default;
}

.crm-create-menu[b-9u9gcmqnqe] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 82;
    display: grid;
    width: 220px;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--crm-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.16);
}

.crm-create-option[b-9u9gcmqnqe] {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 8px;
    padding: 7px 9px;
    background: transparent;
    color: var(--crm-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.crm-create-option:hover[b-9u9gcmqnqe],
.crm-create-option:focus-visible[b-9u9gcmqnqe] {
    background: #f6f7f9;
    outline: none;
}

.crm-create-option:disabled[b-9u9gcmqnqe] {
    color: var(--crm-faint);
    cursor: not-allowed;
}

.crm-create-option strong[b-9u9gcmqnqe],
.crm-create-option small[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-create-option strong[b-9u9gcmqnqe] {
    font-size: 13px;
    font-weight: 800;
}

.crm-create-option small[b-9u9gcmqnqe] {
    color: var(--crm-muted);
    font-size: 11px;
    font-weight: 650;
}

.crm-list[b-9u9gcmqnqe] {
    display: flex;
    min-height: 0;
    flex: 1;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
    padding: 9px;
}

.crm-list-row[b-9u9gcmqnqe] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: stretch;
    overflow: hidden;
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    background: #fff;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.crm-list-row *[b-9u9gcmqnqe],
.document-row *[b-9u9gcmqnqe] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
}

.crm-list-row:hover[b-9u9gcmqnqe] {
    border-color: #cfd8e6;
    background: #f6f8fb;
}

.crm-list-row.is-active[b-9u9gcmqnqe] {
    background: var(--crm-accent-soft);
}

.crm-list-row--jobsite.is-active[b-9u9gcmqnqe] {
    background: var(--crm-accent-soft);
}

.crm-list-main[b-9u9gcmqnqe] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    padding: 10px 8px 10px 10px;
    text-align: left;
}

.crm-row-title[b-9u9gcmqnqe],
.crm-row-sub[b-9u9gcmqnqe],
.crm-row-meta[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-row-title-wrap[b-9u9gcmqnqe] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.crm-result-type[b-9u9gcmqnqe] {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid var(--crm-line);
    border-radius: 6px;
    background: #f6f7f9;
    color: var(--crm-muted);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;
}

.crm-row-title[b-9u9gcmqnqe] {
    color: var(--crm-text);
    font-size: 13px;
    font-weight: 750;
    line-height: 1.25;
}

.crm-row-sub[b-9u9gcmqnqe] {
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 550;
    line-height: 1.25;
}

.crm-row-meta[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--crm-faint);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.crm-row-meta span[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-row-actions[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: 32px;
    grid-template-rows: repeat(2, 32px);
    align-content: center;
    gap: 2px;
    padding: 6px 6px 6px 0;
}

.crm-icon-button[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    min-height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--crm-faint);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.crm-icon-button:hover[b-9u9gcmqnqe],
.crm-icon-button:focus-visible[b-9u9gcmqnqe] {
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    outline: none;
}

.crm-icon-button--danger:hover[b-9u9gcmqnqe],
.crm-icon-button--danger:focus-visible[b-9u9gcmqnqe] {
    background: var(--crm-danger-soft);
    color: var(--crm-danger);
}

.crm-status-badge[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--baustellen-status-color, var(--crm-accent)) 20%, #e5e5ea);
    border-radius: 6px;
    background: color-mix(in srgb, var(--baustellen-status-color, var(--crm-accent)) 9%, #ffffff);
    color: color-mix(in srgb, var(--baustellen-status-color, var(--crm-accent)) 70%, #1b241e);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
}

.crm-status-badge i[b-9u9gcmqnqe] {
    width: 7px;
    height: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--baustellen-status-color, var(--crm-accent));
}

.crm-empty[b-9u9gcmqnqe] {
    display: flex;
    min-height: 260px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 26px 18px;
    color: var(--crm-muted);
    text-align: center;
}

.crm-empty strong[b-9u9gcmqnqe] {
    color: var(--crm-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1.25;
}

.crm-empty span[b-9u9gcmqnqe] {
    max-width: 34rem;
    font-size: 13px;
    font-weight: 550;
    line-height: 1.45;
}

.crm-empty--compact[b-9u9gcmqnqe] {
    min-height: 180px;
}

.crm-empty--main[b-9u9gcmqnqe] {
    min-height: 100%;
}

.crm-empty--table[b-9u9gcmqnqe] {
    min-height: 280px;
    border-top: 1px solid var(--crm-line);
}

.crm-context[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 14px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--crm-line);
}

.crm-context-title[b-9u9gcmqnqe] {
    min-width: 0;
}

.crm-context-title h2[b-9u9gcmqnqe] {
    margin: 2px 0 0;
    overflow-wrap: anywhere;
    color: var(--crm-text);
    font-size: 18px;
    font-weight: 780;
    line-height: 1.18;
    letter-spacing: 0;
}

.crm-context-actions[b-9u9gcmqnqe] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.crm-info-popover-wrap[b-9u9gcmqnqe] {
    position: relative;
    display: inline-flex;
    min-width: 0;
}

.crm-info-trigger[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    background: #fff;
    color: var(--crm-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.crm-info-trigger:hover[b-9u9gcmqnqe],
.crm-info-trigger:focus-visible[b-9u9gcmqnqe],
.crm-info-trigger.is-open[b-9u9gcmqnqe] {
    border-color: var(--crm-accent);
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    outline: none;
}

.crm-info-backdrop[b-9u9gcmqnqe] {
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    background: transparent;
    cursor: default;
}

.crm-info-popover[b-9u9gcmqnqe] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 82;
    width: min(420px, calc(100vw - 24px));
    max-height: min(72dvh, 520px);
    overflow: auto;
    border: 1px solid var(--crm-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
}

.crm-info-header[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--crm-line);
    background: #fbfbfd;
}

.crm-info-title[b-9u9gcmqnqe] {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.crm-info-title > span[b-9u9gcmqnqe] {
    color: var(--crm-faint);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.06em;
    line-height: 1;
    text-transform: uppercase;
}

.crm-info-title strong[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    color: var(--crm-text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-info-header-actions[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.crm-info-copy[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 32px;
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    background: #fff;
    color: var(--crm-text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 850;
    padding: 0 10px;
    white-space: nowrap;
}

.crm-info-copy:hover[b-9u9gcmqnqe],
.crm-info-copy:focus-visible[b-9u9gcmqnqe] {
    border-color: var(--crm-accent);
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
    outline: none;
}

.crm-info-close[b-9u9gcmqnqe] {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    min-width: 32px;
    height: 32px;
    border: 1px solid var(--crm-line);
    border-radius: 8px;
    background: #fff;
    color: var(--crm-muted);
    cursor: pointer;
}

.crm-info-close:hover[b-9u9gcmqnqe],
.crm-info-close:focus-visible[b-9u9gcmqnqe] {
    border-color: #f5bbb4;
    background: var(--crm-danger-soft);
    color: var(--crm-danger);
    outline: none;
}

.crm-info-content[b-9u9gcmqnqe] {
    display: grid;
    gap: 12px;
    padding: 12px;
}

.crm-info-section[b-9u9gcmqnqe] {
    display: grid;
    gap: 8px;
}

.crm-info-section h3[b-9u9gcmqnqe] {
    margin: 0;
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.2;
}

.crm-info-section dl[b-9u9gcmqnqe] {
    display: grid;
    gap: 1px;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--crm-line);
    border-radius: 9px;
}

.crm-info-section dl div[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: minmax(92px, 0.38fr) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 10px;
    background: #fff;
}

.crm-info-section dl div + div[b-9u9gcmqnqe] {
    border-top: 1px solid #edf0f4;
}

.crm-info-section dt[b-9u9gcmqnqe],
.crm-info-section dd[b-9u9gcmqnqe] {
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.3;
}

.crm-info-section dt[b-9u9gcmqnqe] {
    color: var(--crm-faint);
    font-size: 11px;
    font-weight: 800;
}

.crm-info-section dd[b-9u9gcmqnqe] {
    color: var(--crm-text);
    font-size: 12px;
    font-weight: 680;
}

.crm-context-backdrop[b-9u9gcmqnqe] {
    position: fixed;
    inset: 0;
    z-index: 2250;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.crm-context-menu[b-9u9gcmqnqe] {
    position: fixed;
    --ctx-menu-width: 184px;
    --ctx-menu-height: 154px;
    top: min(var(--ctx-y), calc(100dvh - var(--ctx-menu-height) - 8px));
    left: min(var(--ctx-x), calc(100dvw - var(--ctx-menu-width) - 8px));
    z-index: 2251;
    width: var(--ctx-menu-width);
    max-width: calc(100vw - 16px);
    overflow: visible;
    padding: 4px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.crm-context-menu button:not(.crm-context-backdrop)[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 31px;
    border: 0;
    border-radius: 6px;
    padding: 0 8px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 730;
    text-align: left;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.crm-context-menu button:hover[b-9u9gcmqnqe],
.crm-context-menu button:focus-visible[b-9u9gcmqnqe] {
    background: #f1f5f9;
    color: #0f4c81;
    outline: none;
}

.crm-context-menu svg[b-9u9gcmqnqe] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.82;
}

.crm-context-menu .crm-context-danger[b-9u9gcmqnqe] {
    color: #a33131;
}

.crm-context-menu .crm-context-danger:hover[b-9u9gcmqnqe],
.crm-context-menu .crm-context-danger:focus-visible[b-9u9gcmqnqe] {
    background: #fff1f1;
    color: #9f1d1d;
}

.crm-context-menu--document[b-9u9gcmqnqe] {
    --ctx-menu-width: 178px;
    --ctx-menu-height: 176px;
}

.crm-context-divider[b-9u9gcmqnqe] {
    height: 1px;
    margin: 4px 2px;
    background: #edf1f5;
}

.crm-context-submenu[b-9u9gcmqnqe] {
    position: relative;
}

.crm-context-submenu-trigger[b-9u9gcmqnqe] {
    justify-content: flex-start;
}

.crm-context-submenu-trigger .crm-context-chevron[b-9u9gcmqnqe] {
    margin-left: auto;
    opacity: 0.58;
}

.crm-context-submenu-panel[b-9u9gcmqnqe] {
    position: absolute;
    top: -4px;
    left: calc(100% + 4px);
    z-index: 2252;
    display: block;
    visibility: hidden;
    width: 156px;
    padding: 4px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.14);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-2px);
    transition: opacity 0.08s ease, transform 0.08s ease, visibility 0s linear 0.08s;
}

.crm-context-submenu-panel[b-9u9gcmqnqe]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -8px;
    width: 8px;
}

.crm-context-submenu-panel--actions[b-9u9gcmqnqe] {
    width: 148px;
}

.crm-context-submenu:hover > .crm-context-submenu-panel[b-9u9gcmqnqe],
.crm-context-submenu:focus-within > .crm-context-submenu-panel[b-9u9gcmqnqe],
.crm-context-submenu.is-open > .crm-context-submenu-panel[b-9u9gcmqnqe] {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0s;
}

.crm-context-submenu:hover > .crm-context-submenu-trigger[b-9u9gcmqnqe],
.crm-context-submenu:focus-within > .crm-context-submenu-trigger[b-9u9gcmqnqe],
.crm-context-submenu.is-open > .crm-context-submenu-trigger[b-9u9gcmqnqe] {
    background: #eef4fb;
    color: #0f4c81;
    border-radius: 6px;
}

.crm-context-menu--fly-left .crm-context-submenu-panel[b-9u9gcmqnqe] {
    right: calc(100% + 4px);
    left: auto;
    transform: translateX(2px);
}

.crm-context-menu--fly-left .crm-context-submenu-panel[b-9u9gcmqnqe]::before {
    right: -8px;
    left: auto;
    width: 8px;
}

.crm-context-menu--fly-left .crm-context-submenu:hover > .crm-context-submenu-panel[b-9u9gcmqnqe],
.crm-context-menu--fly-left .crm-context-submenu:focus-within > .crm-context-submenu-panel[b-9u9gcmqnqe],
.crm-context-menu--fly-left .crm-context-submenu.is-open > .crm-context-submenu-panel[b-9u9gcmqnqe] {
    transform: translateX(0);
}

.crm-context-menu--fly-up .crm-context-submenu-panel[b-9u9gcmqnqe] {
    top: auto;
    bottom: -4px;
}

.documents-workspace[b-9u9gcmqnqe] {
    display: flex;
    container-type: inline-size;
    min-height: 0;
    flex: 1;
    flex-direction: column;
}

.documents-toolbar[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) max-content 38px max-content;
    grid-template-areas: "search filter sort create";
    position: relative;
    z-index: 18;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--crm-line);
    background: var(--crm-panel-soft);
}

.crm-search--wide[b-9u9gcmqnqe] {
    grid-area: search;
    width: 100%;
    max-width: none;
    min-height: 38px;
    min-width: 0;
}

.documents-filter[b-9u9gcmqnqe] {
    grid-area: filter;
    display: inline-grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    height: 38px;
    padding: 3px;
    border: 1px solid var(--crm-line);
    border-radius: 9px;
    background: #f2f2f7;
}

.documents-filter-button[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    min-height: 30px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--crm-muted);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 0 10px;
    white-space: nowrap;
}

.documents-filter-button span[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.documents-toolbar .sort-filter-wrap[b-9u9gcmqnqe] {
    grid-area: sort;
    justify-self: end;
}

.documents-toolbar .sort-filter-wrap[b-9u9gcmqnqe],
.documents-toolbar .btn-sort-filter[b-9u9gcmqnqe] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
}

.document-create-wrap[b-9u9gcmqnqe] {
    position: relative;
    grid-area: create;
    justify-self: end;
    display: inline-flex;
    min-width: 0;
}

.document-create-button[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    height: 38px;
    white-space: nowrap;
}

.document-create-button--open .document-create-chevron[b-9u9gcmqnqe] {
    transform: rotate(180deg);
}

.document-create-chevron[b-9u9gcmqnqe] {
    transition: transform 0.16s;
}

.document-create-backdrop[b-9u9gcmqnqe] {
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    background: transparent;
    cursor: default;
}

.document-create-menu[b-9u9gcmqnqe] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 82;
    display: grid;
    width: 246px;
    gap: 4px;
    padding: 6px;
    border: 1px solid var(--crm-line);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.16);
}

.document-create-option[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    border: 0;
    border-radius: 8px;
    padding: 7px 8px;
    background: transparent;
    color: var(--crm-text);
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.document-create-option:hover[b-9u9gcmqnqe],
.document-create-option:focus-visible[b-9u9gcmqnqe] {
    background: #f6f7f9;
    outline: none;
}

.document-create-icon[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #eef4ff;
    color: var(--crm-accent);
}

.document-create-icon--aufmass[b-9u9gcmqnqe] {
    background: #f6f1e8;
    color: #9a5a00;
}

.document-create-option strong[b-9u9gcmqnqe],
.document-create-option small[b-9u9gcmqnqe] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-create-option strong[b-9u9gcmqnqe] {
    font-size: 13px;
    font-weight: 800;
}

.document-create-option small[b-9u9gcmqnqe] {
    margin-top: 2px;
    color: var(--crm-muted);
    font-size: 11px;
    font-weight: 650;
}

.documents-filter-button em[b-9u9gcmqnqe] {
    color: var(--crm-faint);
    font-size: 11px;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.documents-filter-button:hover[b-9u9gcmqnqe],
.documents-filter-button:focus-visible[b-9u9gcmqnqe],
.documents-filter-button.is-active[b-9u9gcmqnqe] {
    background: #fff;
    color: var(--crm-text);
    outline: none;
    box-shadow: 0 1px 4px rgba(28, 28, 30, 0.08);
}

@container (max-width: 760px) {
    .documents-toolbar[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) 38px max-content;
        grid-template-areas:
            "search sort create"
            "filter filter filter";
    }

    .documents-filter[b-9u9gcmqnqe] {
        width: 100%;
    }
}

@container (max-width: 520px) {
    .documents-toolbar[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) 38px;
        grid-template-areas:
            "search sort"
            "filter filter"
            "create create";
    }

    .document-create-wrap[b-9u9gcmqnqe],
    .document-create-button[b-9u9gcmqnqe] {
        width: 100%;
    }

    .document-create-button[b-9u9gcmqnqe] {
        justify-content: center;
    }
}

.project-crm .btn-primary[b-9u9gcmqnqe] {
    min-height: 38px;
    border: 1px solid var(--crm-accent);
    border-radius: 8px;
    background: var(--crm-accent);
    box-shadow: none;
    color: #fff;
    font-size: 13px;
    font-weight: 750;
    padding: 0 12px;
}

.project-crm .btn-icon-action[b-9u9gcmqnqe] {
    min-height: 36px;
    border-color: var(--crm-line);
    border-radius: 8px;
    color: var(--crm-muted);
    font-size: 12px;
    font-weight: 750;
    padding: 0 10px;
}

.project-crm .btn-icon-action:hover[b-9u9gcmqnqe] {
    border-color: #b8daff;
    background: var(--crm-accent-soft);
    color: var(--crm-accent);
}

.project-crm .btn-icon-action--danger:hover[b-9u9gcmqnqe] {
    border-color: #f5bbb4;
    background: var(--crm-danger-soft);
    color: var(--crm-danger);
}

.documents-table-wrap[b-9u9gcmqnqe] {
    min-height: 0;
    flex: 1;
    overflow: auto;
    scrollbar-gutter: stable;
}

.documents-table[b-9u9gcmqnqe] {
    width: 100%;
    min-width: 720px;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--crm-text);
    font-size: 12px;
    table-layout: fixed;
}

.documents-table th[b-9u9gcmqnqe] {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 32px;
    border-bottom: 1px solid var(--crm-line);
    background: #f5f5f7;
    color: var(--crm-muted);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.documents-table th[b-9u9gcmqnqe],
.documents-table td[b-9u9gcmqnqe] {
    padding: 7px 10px;
    vertical-align: middle;
}

.documents-table td[b-9u9gcmqnqe] {
    border-bottom: 1px solid #ededf2;
    color: var(--crm-muted);
    font-weight: 600;
    line-height: 1.3;
}

.documents-table tbody tr[b-9u9gcmqnqe] {
    background: #fff;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.documents-table tbody tr:hover[b-9u9gcmqnqe] {
    background: #f3f6fa;
}

.documents-table th:nth-child(1)[b-9u9gcmqnqe],
.documents-table td:nth-child(1)[b-9u9gcmqnqe] {
    width: 86px;
}

.documents-table th:nth-child(3)[b-9u9gcmqnqe],
.documents-table td:nth-child(3)[b-9u9gcmqnqe] {
    width: 112px;
}

.documents-table th:nth-child(4)[b-9u9gcmqnqe],
.documents-table td:nth-child(4)[b-9u9gcmqnqe] {
    width: 122px;
}

.documents-table th:nth-child(5)[b-9u9gcmqnqe],
.documents-table td:nth-child(5)[b-9u9gcmqnqe] {
    width: 104px;
}

.documents-table th:nth-child(6)[b-9u9gcmqnqe],
.documents-table td:nth-child(6)[b-9u9gcmqnqe] {
    width: 108px;
}

.document-type[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 6px;
    background: #eef6ff;
    color: #005eb8;
    font-size: 10px;
    font-weight: 850;
    padding: 0 7px;
    white-space: nowrap;
}

.document-type--aufmass[b-9u9gcmqnqe] {
    background: #f5efe4;
    color: #a45b00;
}

.document-title-cell[b-9u9gcmqnqe] {
    min-width: 0;
}

.document-title-text[b-9u9gcmqnqe] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--crm-text);
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.document-row:hover .document-title-text[b-9u9gcmqnqe] {
    color: var(--crm-accent);
}

.document-row[b-9u9gcmqnqe] {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.document-actions[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.document-actions .crm-icon-button[b-9u9gcmqnqe] {
    width: 28px;
    min-width: 28px;
    min-height: 28px;
    border-radius: 6px;
}

.project-crm .sort-filter-popover[b-9u9gcmqnqe] {
    right: 0;
}

.project-crm .sort-filter-popover--crm[b-9u9gcmqnqe] {
    right: auto;
    left: 0;
}

.project-crm .sort-filter-popover--documents[b-9u9gcmqnqe] {
    right: 0;
    left: auto;
}

.project-crm .btn-sort-filter[b-9u9gcmqnqe] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
}

.crm-panel-toolbar .sort-filter-wrap[b-9u9gcmqnqe] {
    width: 38px;
    min-width: 38px;
}

.crm-panel-toolbar .btn-sort-filter[b-9u9gcmqnqe] {
    width: 38px;
    min-width: 38px;
    height: 38px;
    border-radius: 8px;
}

@media (max-width: 1180px) {
    .project-crm[b-9u9gcmqnqe] {
        padding: var(--crm-top-gap) 18px var(--crm-top-gap);
    }

    .crm-grid[b-9u9gcmqnqe] {
        grid-template-columns: minmax(218px, 242px) minmax(218px, 242px) minmax(0, 1fr);
    }

    .crm-context[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
    }

    .crm-context-actions[b-9u9gcmqnqe] {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .project-crm[b-9u9gcmqnqe] {
        height: calc(100dvh - var(--crm-header-height));
        min-height: calc(100dvh - var(--crm-header-height));
        padding-bottom: 12px;
    }

    .crm-grid[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto minmax(0, 1fr);
        height: calc(100dvh - var(--crm-header-height) - var(--crm-top-gap) - 12px);
        min-height: 0;
        overflow: hidden;
    }

    .crm-combined-toolbar[b-9u9gcmqnqe],
    .crm-sidebar[b-9u9gcmqnqe],
    .crm-sidebar--combined-results[b-9u9gcmqnqe],
    .crm-documents[b-9u9gcmqnqe] {
        grid-column: 1;
        grid-row: auto;
    }

    .crm-combined-toolbar[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) 38px auto;
        grid-row: 1;
        border-top-right-radius: 9px;
        border-right: 0;
    }

    .crm-mobile-flow[b-9u9gcmqnqe] {
        display: grid;
        grid-column: 1;
        grid-row: 2;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 7px;
        padding: 8px 10px;
        border-bottom: 1px solid var(--crm-line);
        background: linear-gradient(180deg, #ffffff 0%, #f8f9fb 100%);
    }

    .crm-mobile-step[b-9u9gcmqnqe] {
        position: relative;
        display: flex;
        min-width: 0;
        min-height: 48px;
        flex-direction: column;
        justify-content: center;
        gap: 2px;
        border: 1px solid #cfd6e3;
        border-radius: 8px;
        background: #fff;
        color: #3f4652;
        cursor: pointer;
        font: inherit;
        padding: 6px 8px;
        text-align: left;
        box-shadow: 0 1px 2px rgba(28, 28, 30, 0.05);
        transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s, transform 0.12s;
    }

    .crm-mobile-step:not(:last-child)[b-9u9gcmqnqe]::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -6px;
        z-index: 1;
        width: 10px;
        height: 10px;
        border-top: 1px solid #b9c2d0;
        border-right: 1px solid #b9c2d0;
        background: #fff;
        transform: translateY(-50%) rotate(45deg);
    }

    .crm-mobile-step:hover:not(:disabled)[b-9u9gcmqnqe],
    .crm-mobile-step:focus-visible[b-9u9gcmqnqe] {
        border-color: color-mix(in srgb, var(--crm-accent) 44%, #cfd6e3);
        background: #f7faff;
        box-shadow: 0 3px 9px rgba(37, 99, 235, 0.11);
        outline: none;
    }

    .crm-mobile-step:active:not(:disabled)[b-9u9gcmqnqe] {
        transform: translateY(1px);
    }

    .crm-mobile-step span[b-9u9gcmqnqe],
    .crm-mobile-step strong[b-9u9gcmqnqe] {
        display: block;
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .crm-mobile-step span[b-9u9gcmqnqe] {
        font-size: 10px;
        font-weight: 850;
        letter-spacing: 0.02em;
        text-transform: uppercase;
    }

    .crm-mobile-step strong[b-9u9gcmqnqe] {
        color: var(--crm-text);
        font-size: 12px;
        font-weight: 800;
    }

    .crm-mobile-step.is-active[b-9u9gcmqnqe] {
        border-color: color-mix(in srgb, var(--crm-accent) 38%, var(--crm-line));
        background: var(--crm-accent-soft);
        color: var(--crm-accent);
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--crm-accent) 20%, transparent);
    }

    .crm-mobile-step:disabled[b-9u9gcmqnqe] {
        cursor: default;
        opacity: 0.52;
    }

    .crm-grid > .crm-sidebar:nth-of-type(1)[b-9u9gcmqnqe] {
        border-bottom-left-radius: 0;
    }

    .crm-combined-toolbar .crm-add-button[b-9u9gcmqnqe] {
        grid-column: auto;
    }

    .crm-sidebar[b-9u9gcmqnqe] {
        max-height: none;
        border-right: 0;
        border-bottom: 0;
    }

    .crm-customers[b-9u9gcmqnqe],
    .crm-jobsites[b-9u9gcmqnqe],
    .crm-documents[b-9u9gcmqnqe] {
        grid-row: 3;
        display: none;
        min-height: 0;
        overflow: hidden;
        border-radius: 0 0 9px 9px;
    }

    .crm-grid--mobile-kunden .crm-customers[b-9u9gcmqnqe],
    .crm-grid--mobile-search .crm-customers[b-9u9gcmqnqe],
    .crm-grid--mobile-baustellen .crm-jobsites[b-9u9gcmqnqe],
    .crm-grid--mobile-auswahl .crm-documents[b-9u9gcmqnqe] {
        display: flex;
    }

    .crm-list[b-9u9gcmqnqe] {
        max-height: none;
    }

    .crm-documents[b-9u9gcmqnqe] {
        min-height: 0;
        border-radius: 0 0 9px 9px;
    }

    .crm-context[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
    }

    .crm-context-actions[b-9u9gcmqnqe] {
        align-items: center;
        flex-direction: row;
        justify-content: flex-end;
    }

    .crm-info-popover[b-9u9gcmqnqe] {
        position: fixed;
        top: calc(var(--crm-header-height) + 12px);
        right: 12px;
        left: 12px;
        width: auto;
        height: auto;
        max-height: calc(100dvh - var(--crm-header-height) - 24px);
        overscroll-behavior: contain;
    }

    .crm-info-close[b-9u9gcmqnqe] {
        display: inline-flex;
    }

    .project-crm .sort-filter-popover[b-9u9gcmqnqe],
.project-crm .sort-filter-popover--crm[b-9u9gcmqnqe],
.project-crm .sort-filter-popover--documents[b-9u9gcmqnqe] {
    position: fixed;
    right: 12px;
    left: 12px;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        width: auto;
        max-width: none;
        height: min(316px, calc(100dvh - var(--crm-header-height) - 24px));
        max-height: calc(100dvh - var(--crm-header-height) - 24px);
}

.project-crm .sort-filter-popover--crm[b-9u9gcmqnqe] {
    height: min(316px, calc(100dvh - var(--crm-header-height) - var(--crm-top-gap) - 70px));
    max-height: calc(100dvh - var(--crm-header-height) - var(--crm-top-gap) - 70px);
}
}

@media (max-width: 640px) {
    .project-crm[b-9u9gcmqnqe] {
        padding: var(--crm-top-gap) 12px 12px;
    }

    .crm-combined-toolbar[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) 38px auto;
    }

    .crm-combined-toolbar .crm-create-wrap[b-9u9gcmqnqe] {
        grid-column: auto;
        width: auto;
    }

    .crm-create-button[b-9u9gcmqnqe] {
        width: auto;
        min-width: 76px;
        padding-inline: 10px;
    }

    .crm-create-button[b-9u9gcmqnqe] {
        justify-content: center;
    }

    .crm-create-menu[b-9u9gcmqnqe] {
        left: auto;
        right: 0;
        width: min(220px, calc(100dvw - 24px));
    }

    .documents-toolbar[b-9u9gcmqnqe] {
        padding-inline: 12px;
    }

    .crm-context[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        padding-inline: 12px;
    }

    .documents-toolbar[b-9u9gcmqnqe] {
        grid-template-columns: minmax(0, 1fr) 38px auto;
        grid-template-areas:
            "search sort create"
            "filter filter filter";
    }

    .crm-search--wide[b-9u9gcmqnqe] {
        max-width: none;
    }

    .documents-filter[b-9u9gcmqnqe] {
        grid-area: filter;
        grid-template-columns: 1fr 1fr 1fr;
        width: 100%;
    }

    .document-create-wrap[b-9u9gcmqnqe] {
        grid-area: create;
        width: auto;
    }

    .document-create-button[b-9u9gcmqnqe] {
        width: auto;
        min-width: 78px;
        justify-content: center;
        padding-inline: 10px;
    }

    .document-create-label[b-9u9gcmqnqe] {
        font-size: 0;
    }

    .document-create-label[b-9u9gcmqnqe]::after {
        content: "Neu";
        font-size: 13px;
    }

    .document-create-menu[b-9u9gcmqnqe] {
        left: auto;
        right: 0;
        width: min(246px, calc(100dvw - 24px));
    }

    .documents-filter-button[b-9u9gcmqnqe] {
        padding: 0 6px;
    }

    .project-crm .btn-primary[b-9u9gcmqnqe],
    .project-crm .btn-icon-action[b-9u9gcmqnqe] {
        width: 100%;
        justify-content: center;
    }

    .crm-combined-toolbar .crm-create-button[b-9u9gcmqnqe],
    .documents-toolbar .document-create-button[b-9u9gcmqnqe] {
        width: auto;
    }

    .crm-context-actions[b-9u9gcmqnqe] {
        align-items: center;
        flex-direction: row;
        justify-content: flex-end;
    }

    .crm-info-popover-wrap[b-9u9gcmqnqe],
    .crm-info-trigger[b-9u9gcmqnqe] {
        width: auto;
    }

    .crm-info-popover[b-9u9gcmqnqe] {
        right: 12px;
        left: 12px;
        width: auto;
    }

    .crm-info-close[b-9u9gcmqnqe] {
        align-self: flex-start;
        flex: 0 0 32px;
        width: 32px;
        min-width: 32px;
        height: 32px;
    }

    .crm-info-section dl div[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
        gap: 3px;
    }

    .baustellen-status-picker[b-9u9gcmqnqe],
    .baustellen-status-trigger[b-9u9gcmqnqe] {
        width: auto;
    }

    .baustellen-status-trigger[b-9u9gcmqnqe] {
        width: clamp(106px, 34vw, 132px);
        min-width: 0;
    }

    .crm-context-title h2[b-9u9gcmqnqe] {
        font-size: 16px;
    }

    .crm-context-menu--document[b-9u9gcmqnqe] {
        --ctx-menu-width: min(220px, calc(100dvw - 16px));
    }

    .crm-context-submenu-panel[b-9u9gcmqnqe],
    .crm-context-menu--fly-left .crm-context-submenu-panel[b-9u9gcmqnqe],
    .crm-context-menu--fly-up .crm-context-submenu-panel[b-9u9gcmqnqe] {
        position: static;
        display: none;
        visibility: visible;
        width: auto;
        margin: 2px 0 2px 22px;
        border: 0;
        border-left: 1px solid #edf1f5;
        border-radius: 0;
        opacity: 1;
        pointer-events: auto;
        box-shadow: none;
        transform: none;
        transition: none;
    }

    .crm-context-submenu-panel[b-9u9gcmqnqe]::before {
        display: none;
    }

    .crm-context-submenu:hover > .crm-context-submenu-panel[b-9u9gcmqnqe],
    .crm-context-submenu:focus-within > .crm-context-submenu-panel[b-9u9gcmqnqe],
    .crm-context-submenu.is-open > .crm-context-submenu-panel[b-9u9gcmqnqe] {
        display: block;
    }
}

.bc-link[b-9u9gcmqnqe] {
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 6px;
    color: #007aff;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    transition: background 0.15s;
}

    .bc-link:hover[b-9u9gcmqnqe] {
        background: #f0f7ff;
    }

.bc-sep[b-9u9gcmqnqe] {
    color: #c7c7cc;
    font-size: 15px;
    padding: 0 2px;
}

.bc-current[b-9u9gcmqnqe] {
    color: #1c1c1e;
    font-weight: 700;
    padding: 4px 8px;
    font-size: 13px;
}

/* --------------------------------------------------------------
   ROOT
-------------------------------------------------------------- */
.setup-root[b-9u9gcmqnqe] {
    font-family: -apple-system, system-ui, sans-serif;
    min-height: calc(100%);
}

.setup-shell[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: 340px minmax(0, 1fr);
    gap: 24px;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 24px;
    align-items: start;
}

.setup-main[b-9u9gcmqnqe] {
    min-width: 0;
}

.recent-documents[b-9u9gcmqnqe] {
    position: sticky;
    top: 16px;
    margin-top: 2rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfbfd 100%);
    border: 1px solid #e3e5ea;
    border-radius: 16px;
    overflow: hidden;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.08);
}

.recent-documents-header[b-9u9gcmqnqe] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 13px;
    border-bottom: 1px solid #eceef2;
    background: rgba(255, 255, 255, 0.82);
}

.recent-documents-title[b-9u9gcmqnqe] {
    font-size: 15px;
    font-weight: 800;
    color: #1c1c1e;
}

.recent-documents-count[b-9u9gcmqnqe] {
    color: #8e8e93;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.recent-documents-empty[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 32px 20px;
    color: #8e8e93;
    font-size: 13px;
    text-align: center;
}

.recent-documents-list[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
}

.recent-document-row[b-9u9gcmqnqe] {
    position: relative;
    display: flex;
    gap: 12px;
    width: 100%;
    padding: 14px;
    background: white;
    border: 1px solid #eceef2;
    border-radius: 12px;
    color: inherit;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    box-shadow: 0 6px 18px rgba(28, 28, 30, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

    .recent-document-row:hover[b-9u9gcmqnqe] {
        border-color: #34c759;
        box-shadow: 0 10px 24px rgba(52, 199, 89, 0.14);
        transform: translateY(-1px);
    }

    .recent-document-row:last-child[b-9u9gcmqnqe] {
        border-bottom: 1px solid #eceef2;
    }

    .recent-document-row--aufmass:hover[b-9u9gcmqnqe] {
        border-color: #ff9500;
        box-shadow: 0 10px 24px rgba(255, 149, 0, 0.14);
    }

.recent-document-accent[b-9u9gcmqnqe] {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 12px 0 0 12px;
    background: #34c759;
}

.recent-document-row--aufmass .recent-document-accent[b-9u9gcmqnqe] {
    background: #ff9500;
}

.recent-document-content[b-9u9gcmqnqe] {
    display: flex;
    flex: 1;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
    margin-left: 2px;
}

.recent-document-topline[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.recent-document-type[b-9u9gcmqnqe] {
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 6px;
    background: #edfaf1;
    color: #34c759;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.recent-document-row--aufmass .recent-document-type[b-9u9gcmqnqe] {
    background: #fff4e6;
    color: #ff9500;
}

.recent-document-customer[b-9u9gcmqnqe],
.recent-document-site[b-9u9gcmqnqe],
.recent-document-title[b-9u9gcmqnqe] {
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.recent-document-customer[b-9u9gcmqnqe] {
    color: #1c1c1e;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.25;
}

.recent-document-site[b-9u9gcmqnqe] {
    color: #636366;
    font-size: 12px;
    font-weight: 650;
    line-height: 1.25;
}

.recent-document-title[b-9u9gcmqnqe] {
    margin-top: 3px;
    color: #1c1c1e;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.3;
}

.recent-document-detail[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 1px 6px;
    border-radius: 999px;
    background: #f7f7f9;
    color: #b8b8bf;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.5;
}

.recent-document-row--aufmass .recent-document-detail[b-9u9gcmqnqe] {
    background: #f9f7f3;
    color: #c2b5a2;
}

.recent-document-date[b-9u9gcmqnqe] {
    font-size: 11px;
    font-weight: 600;
    color: #8e8e93;
    white-space: nowrap;
    max-width: 145px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --------------------------------------------------------------
   PAGE LAYOUT
-------------------------------------------------------------- */
.page-layout[b-9u9gcmqnqe] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 2rem 2.5rem 4rem;
}

.page-toolbar[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.page-toolbar--inner[b-9u9gcmqnqe] {
    margin-top: 24px;
    margin-bottom: 18px;
}

.page-count[b-9u9gcmqnqe] {
    font-size: 13px;
    color: #8e8e93;
    font-weight: 600;
    flex: 1;
}

/* -- Search ------------------------ */
.search-wrap[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    flex: 1;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    padding: 0 14px;
    gap: 8px;
    transition: border-color 0.15s;
}

    .search-wrap:focus-within[b-9u9gcmqnqe] {
        border-color: #007aff;
    }

.search-icon[b-9u9gcmqnqe] {
    color: #8e8e93;
    flex-shrink: 0;
}

.search-input[b-9u9gcmqnqe] {
    flex: 1;
    border: none;
    background: none;
    outline: none;
    font-size: 15px;
    font-family: inherit;
    color: #1c1c1e;
    padding: 13px 0;
}

.search-clear[b-9u9gcmqnqe] {
    background: none;
    border: none;
    color: #8e8e93;
    cursor: pointer;
    font-size: 14px;
    padding: 4px 6px;
    border-radius: 4px;
    line-height: 1;
}

    .search-clear:hover[b-9u9gcmqnqe] {
        color: #1c1c1e;
    }

.sort-filter-wrap[b-9u9gcmqnqe] {
    position: relative;
    flex-shrink: 0;
}

.sort-filter-backdrop[b-9u9gcmqnqe] {
    position: fixed;
    inset: 0;
    z-index: 70;
    border: 0;
    background: transparent;
    cursor: default;
}

.btn-sort-filter[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    min-width: 46px;
    height: 46px;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    background: #fff;
    color: #1c1c1e;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    padding: 0;
    cursor: pointer;
    white-space: normal;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

    .btn-sort-filter:hover[b-9u9gcmqnqe],
    .btn-sort-filter--open[b-9u9gcmqnqe],
    .btn-sort-filter--active[b-9u9gcmqnqe] {
        border-color: var(--crm-accent);
        background: var(--crm-accent-soft);
        color: var(--crm-accent);
    }

.sort-filter-popover[b-9u9gcmqnqe] {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 80;
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    width: min(380px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    height: min(296px, calc(100dvh - 24px));
    max-height: calc(100dvh - 24px);
    background: #fff;
    border: 1px solid #e5e5ea;
    border-radius: 16px;
    box-shadow: 0 18px 52px rgba(28,28,30,0.18);
    overflow: hidden;
}

.sort-filter-popover--documents[b-9u9gcmqnqe] {
    right: 0;
    left: auto;
    width: min(380px, calc(100vw - 24px));
}

.sort-filter-popover--crm[b-9u9gcmqnqe] {
    right: auto;
    left: 0;
}

.sort-filter-pane[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    padding: 11px;
    min-height: 0;
    overflow: hidden;
}

.sort-filter-pane--sort[b-9u9gcmqnqe] {
    border-right: 1px solid #ededf2;
    background: #fbfbfd;
    overflow: hidden;
}

.sort-filter-title[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    min-height: 28px;
    margin-bottom: 10px;
    color: #8e8e93;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.sort-filter-title-row[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 28px;
    margin-bottom: 10px;
}

    .sort-filter-title-row .sort-filter-title[b-9u9gcmqnqe] {
        margin-bottom: 0;
    }

.filter-clear-button[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 28px;
    border: 1px solid #ffd7d4;
    border-radius: 9px;
    background: #fff7f6;
    color: #c4261d;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}

    .filter-clear-button:hover[b-9u9gcmqnqe] {
        border-color: #ff3b30;
        background: #fff0ef;
    }

.sort-option-group[b-9u9gcmqnqe] {
    display: grid;
    gap: 3px;
    padding: 4px;
    border: 1px solid #ededf2;
    border-radius: 11px;
    background: #fff;
}

.sort-option-group + .sort-option-group[b-9u9gcmqnqe] {
    margin-top: 7px;
}

.sort-option[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #3c3c43;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    padding: 0 9px;
    cursor: pointer;
}

    .sort-option:hover[b-9u9gcmqnqe],
    .sort-option--active[b-9u9gcmqnqe] {
        background: #eef6ff;
        color: #007aff;
    }

.date-mode-switch[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 8px;
    padding: 3px;
    border-radius: 10px;
    background: #f2f2f7;
}

.date-mode[b-9u9gcmqnqe] {
    min-height: 26px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #636366;
    font: inherit;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

    .date-mode--active[b-9u9gcmqnqe] {
        background: #fff;
        color: #1c1c1e;
        box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    }

/* -- Section label ----------------- */
.section-label[b-9u9gcmqnqe] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8e8e93;
    padding-bottom: 4px;
    border-bottom: 1px solid #e5e5ea;
    margin-bottom: 10px;
}

/* --------------------------------------------------------------
   INFO PANELS
-------------------------------------------------------------- */
.info-panel-combined[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 8px;
}

@media (max-width: 700px) {
    .info-panel-combined[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
    }
}

.info-section[b-9u9gcmqnqe] {
    border-radius: 16px;
    padding: 18px 20px;
}

.info-section--kunde[b-9u9gcmqnqe] {
    background: #f0f7ff;
    border: 1.5px solid #c5deff;
}

.info-section--baustelle[b-9u9gcmqnqe] {
    background: #fff9f0;
    border: 1.5px solid #ffddb0;
}

.info-panel[b-9u9gcmqnqe] {
    border-radius: 16px;
    padding: 18px 20px;
    margin-bottom: 8px;
}

.info-panel--kunde[b-9u9gcmqnqe] {
    background: #f0f7ff;
    border: 1.5px solid #c5deff;
}

.info-panel--baustelle[b-9u9gcmqnqe] {
    background: #fff9f0;
    border: 1.5px solid #ffddb0;
}

.info-panel-header[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.info-panel-label[b-9u9gcmqnqe] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #8e8e93;
}

.info-panel-actions[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.info-grid[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 8px 24px;
}

.info-grid--compact[b-9u9gcmqnqe] {
    gap: 6px 20px;
}

.info-item-row[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.info-item-label[b-9u9gcmqnqe] {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #8e8e93;
}

.info-item-value[b-9u9gcmqnqe] {
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1e;
    word-break: break-word;
}

/* --------------------------------------------------------------
   ENTITY CARDS
-------------------------------------------------------------- */
.card-grid[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.entity-card[b-9u9gcmqnqe] {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

    .entity-card:hover[b-9u9gcmqnqe] {
        border-color: #007aff;
        box-shadow: 0 4px 20px rgba(0,122,255,0.1);
        transform: translateY(-2px);
    }

.entity-card--baustelle:hover[b-9u9gcmqnqe] {
    border-color: #ff9f0a;
    box-shadow: 0 4px 20px rgba(255,159,10,0.1);
}

.entity-card-shell[b-9u9gcmqnqe] {
    position: relative;
    min-width: 0;
}

.entity-card--baustelle[b-9u9gcmqnqe] {
    overflow: hidden;
}

.entity-card:active[b-9u9gcmqnqe] {
    transform: translateY(0);
}

.entity-card-main[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 10px 16px 16px;
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    min-width: 0;
}

.entity-card-action[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: none;
    border: none;
    border-left: 1px solid #f0f0f0;
    color: #c7c7cc;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

    .entity-card-action:hover[b-9u9gcmqnqe] {
        background: #f0f7ff;
        color: #007aff;
    }

.entity-card-delete[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    background: none;
    border: none;
    border-left: 1px solid #f0f0f0;
    color: #c7c7cc;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

    .entity-card-delete:hover[b-9u9gcmqnqe] {
        background: #fff0ef;
        color: #ff3b30;
    }

.baustellen-status-picker[b-9u9gcmqnqe] {
    --baustellen-status-color: #007aff;
    position: relative;
    flex-shrink: 0;
}

.baustellen-status-trigger[b-9u9gcmqnqe] {
    min-width: 150px;
    height: 36px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) 13px;
    align-items: center;
    gap: 7px;
    border: 1px solid #e5e5ea;
    border-radius: 8px;
    padding: 0 9px;
    color: #1c1c1e;
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.baustellen-status-trigger:disabled[b-9u9gcmqnqe] {
    cursor: not-allowed;
    opacity: 0.56;
}

.baustellen-status-trigger:hover:not(:disabled)[b-9u9gcmqnqe],
.baustellen-status-trigger:focus-visible[b-9u9gcmqnqe] {
    color: var(--baustellen-status-color);
    background: color-mix(in srgb, var(--baustellen-status-color) 10%, #ffffff);
    outline: none;
}

.baustellen-status-trigger span:nth-child(2)[b-9u9gcmqnqe],
.baustellen-status-option span:nth-child(2)[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.baustellen-status-dot[b-9u9gcmqnqe] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--baustellen-status-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--baustellen-status-color) 16%, transparent);
}

.baustellen-status-menu[b-9u9gcmqnqe] {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 91;
    width: max(170px, 100%);
    max-height: 220px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    border: 1px solid #e5e5ea;
    border-radius: 10px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.18);
}

.baustellen-status-backdrop[b-9u9gcmqnqe] {
    position: fixed;
    inset: 0;
    z-index: 90;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.baustellen-status-option[b-9u9gcmqnqe] {
    min-width: 0;
    min-height: 34px;
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 8px;
    padding: 0 9px;
    color: #1c1c1e;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    text-align: left;
}

.baustellen-status-option:hover[b-9u9gcmqnqe],
.baustellen-status-option:focus-visible[b-9u9gcmqnqe],
.baustellen-status-option--active[b-9u9gcmqnqe] {
    color: var(--baustellen-status-color);
    background: color-mix(in srgb, var(--baustellen-status-color) 11%, #ffffff);
    outline: none;
}

.entity-card-icon[b-9u9gcmqnqe] {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.entity-card--kunde .entity-card-icon[b-9u9gcmqnqe] {
    background: #e8f3ff;
    color: #007aff;
}

.entity-card--baustelle .entity-card-icon[b-9u9gcmqnqe] {
    background: #fff4e6;
    color: #ff9f0a;
}

.entity-card-body[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.entity-card-title[b-9u9gcmqnqe] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-card-sub[b-9u9gcmqnqe] {
    font-size: 13px;
    color: #636366;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.entity-card-meta[b-9u9gcmqnqe] {
    font-size: 11px;
    color: #aeaeb2;
    font-weight: 500;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.entity-card-footer-row[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.entity-badge[b-9u9gcmqnqe] {
    background: #e5e5ea;
    color: #636366;
    padding: 2px 9px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
}

.chevron[b-9u9gcmqnqe] {
    color: #c7c7cc;
    flex-shrink: 0;
}

/* --------------------------------------------------------------
   ANGEBOTE LISTE
-------------------------------------------------------------- */
.angebot-list[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.angebot-row-wrap[b-9u9gcmqnqe] {
    display: flex;
    align-items: stretch;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 16px;
    overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}

    .angebot-row-wrap:hover[b-9u9gcmqnqe] {
        border-color: #34c759;
        box-shadow: 0 4px 20px rgba(52,199,89,0.1);
        transform: translateY(-2px);
    }

.angebot-row[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 10px 18px 18px;
    flex: 1;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    min-width: 0;
}

.angebot-row-action[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: none;
    border: none;
    border-left: 1px solid #f0f0f0;
    color: #c7c7cc;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

    .angebot-row-action:hover[b-9u9gcmqnqe] {
        background: #f0f7ff;
        color: #007aff;
    }

.angebot-row-action--duplicate:hover[b-9u9gcmqnqe] {
    background: #edfaf1;
    color: #34c759;
}

.angebot-row-delete[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    background: none;
    border: none;
    border-left: 1px solid #f0f0f0;
    color: #c7c7cc;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
}

    .angebot-row-delete:hover[b-9u9gcmqnqe] {
        background: #fff0ef;
        color: #ff3b30;
    }

.angebot-row-icon[b-9u9gcmqnqe] {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #edfaf1;
    color: #34c759;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.angebot-row-body[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

.angebot-row-title[b-9u9gcmqnqe] {
    font-size: 15px;
    font-weight: 700;
    color: #1c1c1e;
}

.angebot-row-meta[b-9u9gcmqnqe] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #8e8e93;
}

    .angebot-row-meta span[b-9u9gcmqnqe] {
        white-space: nowrap;
    }

.dot[b-9u9gcmqnqe] {
    color: #c7c7cc;
}

.angebot-row-title-wrap[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.angebot-row-type-badge[b-9u9gcmqnqe] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: #34c759;
    background: #edfaf1;
    padding: 2px 8px;
    border-radius: 6px;
    flex-shrink: 0;
}

.angebot-row-type-badge--aufmass[b-9u9gcmqnqe] {
    color: #ff9500;
    background: #fff4e6;
}

/* Aufmaß-Icon: Blaupausen-Farbe */
.angebot-row-icon--aufmass[b-9u9gcmqnqe] {
    background: #fff4e6;
    color: #ff9500;
}

/* --------------------------------------------------------------
   HOVER-FARBEN (Typ-spezifisch)
-------------------------------------------------------------- */
.angebot-row-wrap--aufmass:hover[b-9u9gcmqnqe] {
    border-color: #ff9500;
    box-shadow: 0 4px 20px rgba(255,149,0,0.1);
}

/* --------------------------------------------------------------
   SUCHERGEBNISSE
-------------------------------------------------------------- */
.result-list[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.result-row[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    transition: border-color 0.15s, box-shadow 0.15s;
}

    .result-row:hover[b-9u9gcmqnqe] {
        border-color: #007aff;
        box-shadow: 0 3px 12px rgba(0,122,255,0.1);
    }

.type-badge[b-9u9gcmqnqe] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.type-badge--kunde[b-9u9gcmqnqe] {
    background: #e8f3ff;
    color: #007aff;
}

.type-badge--baustelle[b-9u9gcmqnqe] {
    background: #fff4e6;
    color: #ff9f0a;
}

.result-body[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.result-title[b-9u9gcmqnqe] {
    font-size: 15px;
    font-weight: 600;
    color: #1c1c1e;
}

.result-sub[b-9u9gcmqnqe] {
    font-size: 12px;
    color: #8e8e93;
}

/* --------------------------------------------------------------
   EMPTY STATE
-------------------------------------------------------------- */
.empty-state[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 56px 24px;
    color: #8e8e93;
    text-align: center;
}

    .empty-state svg[b-9u9gcmqnqe] {
        opacity: 0.3;
    }

    .empty-state p[b-9u9gcmqnqe] {
        font-size: 16px;
        margin: 0;
    }

/* --------------------------------------------------------------
   MODAL OVERLAY (Formulare + Löschen)
-------------------------------------------------------------- */
.modal-backdrop[b-9u9gcmqnqe] {
    --modal-bg: #f5f5f7;
    --modal-panel: #ffffff;
    --modal-panel-soft: #fbfbfd;
    --modal-line: #e5e5ea;
    --modal-line-strong: #d1d1d6;
    --modal-text: #1c1c1e;
    --modal-muted: #636366;
    --modal-faint: #8e8e93;
    --modal-accent: #2563eb;
    --modal-accent-soft: #f3f6fb;
    --modal-success: #1f8f3d;
    --modal-success-soft: #edfaf1;
    --modal-danger: #c4261d;
    --modal-danger-soft: #fff0ef;
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 24px;
    background: rgba(28, 28, 30, 0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: backdropIn-b-9u9gcmqnqe 0.16s ease;
}

@keyframes backdropIn-b-9u9gcmqnqe {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.form-modal[b-9u9gcmqnqe] {
    position: relative;
    width: 100%;
    max-width: 560px;
    max-height: min(760px, calc(100dvh - 48px));
    overflow: hidden;
    border: 1px solid var(--modal-line-strong);
    border-radius: 10px;
    background: var(--modal-panel);
    color: var(--modal-text);
    box-shadow: 0 18px 48px rgba(28, 28, 30, 0.18);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    animation: modalSlideIn-b-9u9gcmqnqe 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.form-modal--small[b-9u9gcmqnqe] {
    max-width: 430px;
}

.filter-year-grid[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
    gap: 8px;
    margin-top: 14px;
}

.filter-year-grid--popover[b-9u9gcmqnqe] {
    grid-template-columns: repeat(3, 1fr);
    margin-top: 0;
}

.filter-step-list[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}

.filter-step-button[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 42px;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    background: #fff;
    color: #1c1c1e;
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    padding: 0 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

    .filter-step-button:hover[b-9u9gcmqnqe] {
        border-color: #007aff;
        background: #f0f7ff;
        color: #007aff;
    }

.filter-step-header[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
    color: #1c1c1e;
    font-size: 13px;
    font-weight: 900;
}

.filter-back-button[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 28px;
    border: 1px solid #e5e5ea;
    border-radius: 9px;
    background: #fff;
    color: #636366;
    font: inherit;
    font-size: 12px;
    font-weight: 900;
    padding: 0 8px 0 6px;
    cursor: pointer;
}

    .filter-back-button:hover[b-9u9gcmqnqe] {
        border-color: #007aff;
        color: #007aff;
    }

.filter-step-list--months[b-9u9gcmqnqe] {
    flex: 1;
}

.filter-year[b-9u9gcmqnqe],
.filter-all-check[b-9u9gcmqnqe] {
    border: 1.5px solid #e5e5ea;
    background: #fff;
    border-radius: 12px;
    min-height: 42px;
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    color: #1c1c1e;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

    .filter-year:hover[b-9u9gcmqnqe],
    .filter-year--active[b-9u9gcmqnqe],
    .filter-all-check:hover[b-9u9gcmqnqe],
    .filter-all-check--active[b-9u9gcmqnqe] {
        border-color: #007aff;
        background: #f0f7ff;
        color: #007aff;
    }

.filter-month-panel[b-9u9gcmqnqe] {
    margin-top: 10px;
}

.filter-all-check[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    gap: 8px;
    padding: 0 12px;
}

    .filter-all-check input[b-9u9gcmqnqe] {
        width: 14px;
        height: 14px;
        accent-color: #007aff;
        flex-shrink: 0;
    }

    .filter-all-check span[b-9u9gcmqnqe] {
        line-height: 1;
    }

.filter-clear-link[b-9u9gcmqnqe] {
    margin-top: 10px;
    border: 0;
    background: transparent;
    color: #8e8e93;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    padding: 4px 0;
}

    .filter-clear-link:hover[b-9u9gcmqnqe] {
        color: #ff3b30;
    }

.filter-month-grid[b-9u9gcmqnqe] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.filter-month[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-height: 38px;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    background: #fff;
    color: #3c3c43;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    gap: 8px;
    padding: 0 12px;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

    .filter-month input[b-9u9gcmqnqe] {
        width: 14px;
        height: 14px;
        accent-color: #34c759;
        flex-shrink: 0;
    }

    .filter-month:hover[b-9u9gcmqnqe],
    .filter-month--active[b-9u9gcmqnqe] {
        border-color: #34c759;
        background: #edfaf1;
        color: #1f8f3d;
    }

.filter-empty-hint[b-9u9gcmqnqe] {
    margin: 14px 0 0;
    color: #8e8e93;
    font-size: 13px;
}

.form-modal--danger[b-9u9gcmqnqe] {
    max-width: 460px;
}

@keyframes modalSlideIn-b-9u9gcmqnqe {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* -- Modal Header -------------------- */
.form-modal-header[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 64px;
    padding: 16px 58px 15px 20px;
    border-bottom: 1px solid var(--modal-line);
    background: linear-gradient(180deg, var(--modal-panel-soft) 0%, var(--modal-panel) 100%);
}

.form-modal-header--danger[b-9u9gcmqnqe] {
    border-bottom-color: #ffd7d4;
    background: linear-gradient(180deg, #fff7f6 0%, var(--modal-panel) 100%);
}

.form-modal-header-icon[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid #dce8fb;
    border-radius: 8px;
    background: var(--modal-accent-soft);
    color: var(--modal-accent);
}

.form-modal-header--danger .form-modal-header-icon[b-9u9gcmqnqe] {
    border-color: #ffd7d4;
    background: var(--modal-danger-soft);
    color: var(--modal-danger);
}

.form-modal-header-icon svg[b-9u9gcmqnqe] {
    width: 15px;
    height: 15px;
}

.form-modal-title[b-9u9gcmqnqe] {
    flex: 1;
    min-width: 0;
    margin: 0;
    color: var(--modal-text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.modal-danger-title[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: var(--modal-danger);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
}

.modal-danger-title svg[b-9u9gcmqnqe] {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.modal-close[b-9u9gcmqnqe] {
    display: none;
}

/* -- Schließen-Button oben rechts im Modal -- */
.btn-close-floating[b-9u9gcmqnqe] {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--modal-line);
    border-radius: 8px;
    background: var(--modal-panel);
    color: var(--modal-muted);
    box-shadow: 0 1px 4px rgba(28, 28, 30, 0.06);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.btn-close-floating svg[b-9u9gcmqnqe] {
    width: 17px;
    height: 17px;
    stroke-width: 2.4;
}

.btn-close-floating:hover[b-9u9gcmqnqe],
.btn-close-floating:focus-visible[b-9u9gcmqnqe] {
    border-color: #f2b3ad;
    background: var(--modal-danger-soft);
    color: var(--modal-danger);
    outline: none;
    box-shadow: 0 0 0 3px rgba(196, 38, 29, 0.08);
}

.btn-close-floating:active[b-9u9gcmqnqe] {
    transform: translateY(1px);
}

/* -- Modal Body ----------------------- */
.form-modal-body[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(100dvh - 194px);
    overflow-y: auto;
    padding: 20px;
    background: var(--modal-panel);
}

/* -- Modal Footer -------------------- */
.form-modal-footer[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 20px;
    border-top: 1px solid var(--modal-line);
    background: var(--modal-panel-soft);
}

/* -- Form Fields ------------------- */
.field-row[b-9u9gcmqnqe] {
    display: grid;
    gap: 12px;
}

    .field-row.two[b-9u9gcmqnqe] {
        grid-template-columns: 1fr 1fr;
    }

@media (max-width: 520px) {
    .field-row.two[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
    }
}

.field-group[b-9u9gcmqnqe] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

    .field-group label[b-9u9gcmqnqe] {
        font-size: 12px;
        font-weight: 750;
        color: var(--modal-muted);
        letter-spacing: 0;
    }

.field-input[b-9u9gcmqnqe] {
    width: 100%;
    box-sizing: border-box;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--modal-line);
    border-radius: 8px;
    background: var(--modal-panel-soft);
    color: var(--modal-text);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.35;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.field-input[b-9u9gcmqnqe]::placeholder {
    color: var(--modal-faint);
    font-weight: 400;
}

    .field-input:focus[b-9u9gcmqnqe] {
        outline: none;
        border-color: #8ec5ff;
        background: var(--modal-panel);
        box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.11);
    }

.field-input--error[b-9u9gcmqnqe] {
    border-color: var(--modal-danger) !important;
    background: var(--modal-danger-soft) !important;
    box-shadow: 0 0 0 3px rgba(196, 38, 29, 0.08) !important;
}

.field-error[b-9u9gcmqnqe] {
    margin: 0;
    padding: 9px 11px;
    border: 1px solid #ffd7d4;
    border-left: 3px solid var(--modal-danger);
    border-radius: 8px;
    background: var(--modal-danger-soft);
    color: var(--modal-danger);
    font-size: 12px;
    font-weight: 700;
}

/* -- Kunde Chip ------------------- */
.kunde-chip[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    max-width: 100%;
    padding: 6px 10px;
    border: 1px solid #dce8fb;
    border-radius: 8px;
    background: var(--modal-accent-soft);
    color: var(--modal-accent);
    font-size: 12px;
    font-weight: 750;
}

/* --------------------------------------------------------------
   LÖSCHEN MODAL
-------------------------------------------------------------- */
.delete-warning-text[b-9u9gcmqnqe] {
    margin: 0;
    color: var(--modal-muted);
    font-size: 13px;
    font-weight: 650;
}

.delete-subject[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px;
    border: 1px solid #ffd7d4;
    border-radius: 8px;
    background: var(--modal-danger-soft);
}

.delete-subject-type[b-9u9gcmqnqe] {
    flex-shrink: 0;
    padding: 3px 8px;
    border-radius: 6px;
    background: #ffe5e3;
    color: var(--modal-danger);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
}

.delete-subject-name[b-9u9gcmqnqe] {
    color: var(--modal-text);
    font-size: 14px;
    font-weight: 800;
    word-break: break-word;
}

.delete-cascade-hint[b-9u9gcmqnqe] {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #ffddb0;
    border-radius: 8px;
    background: #fff9f0;
    color: #9a5a00;
    font-size: 12px;
    font-weight: 700;
}

.delete-timer-row[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.delete-timer[b-9u9gcmqnqe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.delete-timer-ring[b-9u9gcmqnqe] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: conic-gradient(var(--modal-danger) calc(var(--pct, 0) * 1%), var(--modal-line) calc(var(--pct, 0) * 1%));
}

    .delete-timer-ring[b-9u9gcmqnqe]::before {
        content: '';
        position: absolute;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--modal-panel);
    }

    .delete-timer-ring span[b-9u9gcmqnqe] {
        position: relative;
        z-index: 1;
        color: var(--modal-danger);
        font-size: 14px;
        font-weight: 800;
    }

.delete-timer-label[b-9u9gcmqnqe] {
    color: var(--modal-muted);
    font-size: 12px;
    font-weight: 700;
}

.delete-ready-hint[b-9u9gcmqnqe] {
    color: var(--modal-success);
    font-size: 12px;
    font-weight: 800;
}

/* --------------------------------------------------------------
   BUTTONS
-------------------------------------------------------------- */
.btn-primary[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--modal-accent);
    border-radius: 8px;
    background: var(--modal-accent);
    color: #fff;
    white-space: nowrap;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.btn-primary:hover[b-9u9gcmqnqe],
.btn-primary:focus-visible[b-9u9gcmqnqe] {
    border-color: #006edb;
    background: #006edb;
    outline: none;
    box-shadow: 0 8px 18px rgba(0, 122, 255, 0.16);
    transform: translateY(-1px);
}

.btn-primary:active[b-9u9gcmqnqe] {
    transform: translateY(0);
}

.btn-secondary-action[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #f2f2f7;
    color: #3c3c43;
    border: 1.5px solid #e5e5ea;
    padding: 11px 20px;
    border-radius: 11px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}

    .btn-secondary-action:hover[b-9u9gcmqnqe] {
        background: #e9f1ff;
        border-color: #007aff;
        color: #007aff;
        transform: translateY(-1px);
    }

    .btn-secondary-action:active[b-9u9gcmqnqe] {
        transform: translateY(0);
    }

.btn-toolbar[b-9u9gcmqnqe] {
    flex-shrink: 0;
}

.btn-success[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--modal-success);
    border-radius: 8px;
    background: var(--modal-success);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.btn-success:hover[b-9u9gcmqnqe],
.btn-success:focus-visible[b-9u9gcmqnqe] {
    border-color: #187333;
    background: #187333;
    outline: none;
    box-shadow: 0 8px 18px rgba(31, 143, 61, 0.14);
    transform: translateY(-1px);
}

.btn-success:active[b-9u9gcmqnqe] {
    transform: translateY(0);
}

.btn-ghost[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--modal-line);
    border-radius: 8px;
    background: var(--modal-panel);
    color: var(--modal-muted);
    font: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.12s;
}

.btn-ghost:hover[b-9u9gcmqnqe],
.btn-ghost:focus-visible[b-9u9gcmqnqe] {
    border-color: var(--modal-line-strong);
    background: #f7f7f9;
    color: var(--modal-text);
    outline: none;
}

.btn-ghost:active[b-9u9gcmqnqe] {
    transform: translateY(1px);
}

.btn-icon-action[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: white;
    border: 1.5px solid #e5e5ea;
    color: #3c3c43;
    padding: 7px 13px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

    .btn-icon-action:hover[b-9u9gcmqnqe] {
        border-color: #007aff;
        background: #f0f7ff;
        color: #007aff;
    }

.btn-icon-action--danger:hover[b-9u9gcmqnqe] {
    border-color: #ff3b30;
    background: #fff0ef;
    color: #ff3b30;
}

.btn-delete[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--modal-danger);
    border-radius: 8px;
    background: var(--modal-danger);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 750;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}

.btn-delete:hover[b-9u9gcmqnqe],
.btn-delete:focus-visible[b-9u9gcmqnqe] {
    border-color: #a61f18;
    background: #a61f18;
    outline: none;
    box-shadow: 0 8px 18px rgba(196, 38, 29, 0.14);
    transform: translateY(-1px);
}

.btn-delete:active[b-9u9gcmqnqe] {
    transform: translateY(0);
}

.btn-delete--disabled[b-9u9gcmqnqe] {
    border-color: var(--modal-line-strong) !important;
    background: #c7c7cc !important;
    cursor: not-allowed !important;
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------
   RESPONSIVE
-------------------------------------------------------------- */
@media (max-width: 700px) {
    .setup-shell[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0;
    }

    .recent-documents[b-9u9gcmqnqe] {
        position: static;
        margin: 1rem 1.25rem 0;
        max-height: none;
    }

    .page-layout[b-9u9gcmqnqe] {
        padding: 1.5rem 1.25rem 3rem;
    }

    .breadcrumbs[b-9u9gcmqnqe] {
        padding: 12px 16px 10px;
    }

    .card-grid[b-9u9gcmqnqe] {
        grid-template-columns: 1fr;
    }

    .page-toolbar[b-9u9gcmqnqe] {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 40px;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
    }

    .search-wrap[b-9u9gcmqnqe] {
        min-width: 0;
        height: 40px;
        padding: 0 10px;
        gap: 6px;
        border-radius: 11px;
    }

    .search-icon[b-9u9gcmqnqe] {
        width: 15px;
        height: 15px;
    }

    .search-input[b-9u9gcmqnqe] {
        min-width: 0;
        font-size: 13px;
        padding: 10px 0;
    }

    .search-clear[b-9u9gcmqnqe] {
        padding: 3px 4px;
        font-size: 12px;
    }

    .sort-filter-wrap[b-9u9gcmqnqe] {
        width: 40px;
        min-width: 40px;
    }

    .btn-sort-filter[b-9u9gcmqnqe] {
        width: 40px;
        min-width: 40px;
        height: 40px;
        border-radius: 11px;
        max-width: 40px;
    }

    .btn-sort-filter svg[b-9u9gcmqnqe] {
        width: 14px;
        height: 14px;
    }

    .crm-combined-toolbar .sort-filter-wrap[b-9u9gcmqnqe],
    .documents-toolbar .sort-filter-wrap[b-9u9gcmqnqe] {
        position: static;
    }

.project-crm .sort-filter-popover[b-9u9gcmqnqe],
.project-crm .sort-filter-popover--crm[b-9u9gcmqnqe],
.project-crm .sort-filter-popover--documents[b-9u9gcmqnqe] {
    position: absolute;
    right: 12px;
    left: 12px;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    width: auto;
        max-width: none;
        height: min(316px, calc(100dvh - var(--crm-header-height) - 24px));
        max-height: calc(100dvh - var(--crm-header-height) - 24px);
        margin-top: 0;
        border-radius: 14px;
}

.project-crm .sort-filter-popover--crm[b-9u9gcmqnqe] {
    height: min(316px, calc(100dvh - var(--crm-header-height) - var(--crm-top-gap) - 78px));
    max-height: calc(100dvh - var(--crm-header-height) - var(--crm-top-gap) - 78px);
}

    .sort-filter-pane--sort[b-9u9gcmqnqe] {
        border-right: 1px solid #ededf2;
        border-bottom: 0;
    }

    .sort-filter-pane[b-9u9gcmqnqe] {
        padding: 10px;
    }

    .sort-filter-title[b-9u9gcmqnqe],
    .sort-filter-title-row[b-9u9gcmqnqe] {
        min-height: 22px;
        margin-bottom: 7px;
    }

    .sort-filter-title[b-9u9gcmqnqe] {
        font-size: 9px;
    }

    .filter-clear-button[b-9u9gcmqnqe] {
        min-height: 24px;
        border-radius: 8px;
        padding: 0 6px;
        gap: 4px;
        font-size: 10px;
    }

    .filter-clear-button svg[b-9u9gcmqnqe] {
        width: 11px;
        height: 11px;
    }

    .sort-option[b-9u9gcmqnqe] {
        min-height: 31px;
        border-radius: 8px;
        padding: 0 8px;
        font-size: 11px;
        font-weight: 800;
    }

    .date-mode-switch[b-9u9gcmqnqe] {
        margin-bottom: 6px;
        border-radius: 9px;
    }

    .date-mode[b-9u9gcmqnqe] {
        min-height: 24px;
        border-radius: 7px;
        font-size: 10px;
    }

    .filter-step-list[b-9u9gcmqnqe] {
        gap: 5px;
    }

    .filter-step-button[b-9u9gcmqnqe] {
        min-height: 34px;
        border-radius: 9px;
        padding: 0 8px;
        font-size: 12px;
    }

    .filter-step-header[b-9u9gcmqnqe] {
        gap: 7px;
        margin-bottom: 6px;
        font-size: 11px;
    }

    .filter-back-button[b-9u9gcmqnqe] {
        min-height: 24px;
        border-radius: 8px;
        padding: 0 6px 0 4px;
        font-size: 10px;
    }

    .filter-all-check[b-9u9gcmqnqe] {
        min-height: 34px;
        border-radius: 9px;
        gap: 6px;
        padding: 0 8px;
        font-size: 11px;
    }

    .filter-all-check input[b-9u9gcmqnqe],
    .filter-month input[b-9u9gcmqnqe] {
        width: 12px;
        height: 12px;
    }

    .filter-month[b-9u9gcmqnqe] {
        min-height: 30px;
        border-radius: 8px;
        gap: 5px;
        padding: 0 7px;
        font-size: 10px;
    }

    .filter-step-list--months[b-9u9gcmqnqe] {
        gap: 5px;
    }

    .btn-toolbar[b-9u9gcmqnqe] {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
    }

    .form-modal[b-9u9gcmqnqe] {
        max-height: calc(100dvh - 24px);
        border-radius: 10px;
    }

    .modal-backdrop[b-9u9gcmqnqe] {
        padding: 12px;
    }

    .form-modal-header[b-9u9gcmqnqe] {
        min-height: 58px;
        padding: 14px 54px 13px 16px;
    }

    .form-modal-body[b-9u9gcmqnqe] {
        max-height: calc(100dvh - 174px);
        padding: 16px;
    }

    .form-modal-footer[b-9u9gcmqnqe] {
        align-items: stretch;
        flex-direction: column-reverse;
        padding: 12px 16px;
    }

    .form-modal-footer .btn-primary[b-9u9gcmqnqe],
    .form-modal-footer .btn-success[b-9u9gcmqnqe],
    .form-modal-footer .btn-ghost[b-9u9gcmqnqe],
    .form-modal-footer .btn-delete[b-9u9gcmqnqe] {
        width: 100%;
    }

    .delete-subject[b-9u9gcmqnqe] {
        align-items: flex-start;
        flex-direction: column;
    }

    .info-panel-actions[b-9u9gcmqnqe] {
        align-items: flex-end;
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------
   WORKSPACE TABS (Dokumente / Nachrichten) — Folder-Tab Style
-------------------------------------------------------------- */
.workspace-tab-bar[b-9u9gcmqnqe] {
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--workspace-tab-border, #e5e7eb);
    background: var(--workspace-tab-bg, #f7f8fa);
}

.workspace-tab-list[b-9u9gcmqnqe] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.workspace-tab[b-9u9gcmqnqe] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    max-width: 200px;
    min-height: 34px;
    margin-bottom: -1px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    background: transparent;
    color: #475569;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0;
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.workspace-tab span[b-9u9gcmqnqe] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-tab em[b-9u9gcmqnqe] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #475569;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.workspace-tab:hover[b-9u9gcmqnqe],
.workspace-tab:focus-visible[b-9u9gcmqnqe] {
    color: #0f4c81;
    border-color: var(--workspace-tab-border, #d6e0eb);
    background: rgba(255, 255, 255, 0.5);
    outline: none;
}

.workspace-tab--active[b-9u9gcmqnqe] {
    z-index: 1;
    color: #0f172a;
    border-color: var(--workspace-tab-border, #e5e7eb);
    background: var(--workspace-tab-active-bg, #ffffff);
}

.workspace-tab--active:hover[b-9u9gcmqnqe],
.workspace-tab--active:focus-visible[b-9u9gcmqnqe] {
    color: #0f172a;
    background: var(--workspace-tab-active-bg, #ffffff);
}

.workspace-tab--active em[b-9u9gcmqnqe] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--crm-accent);
}

.workspace-tab--active[b-9u9gcmqnqe]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: var(--workspace-tab-active-bg, #ffffff);
}

@media (max-width: 760px) {
    .workspace-tab-bar[b-9u9gcmqnqe] {
        padding: 6px 10px 0;
    }

    .workspace-tab[b-9u9gcmqnqe] {
        padding: 0 10px;
        font-size: 0.7rem;
    }
}
/* /Components/Pages/Calendar/Calendar.razor.rz.scp.css */
.calendar-page[b-zku8ulalvl],
:root[b-zku8ulalvl] {
    --calendar-z-cell-overlay: 2;
    --calendar-z-appointment: 6;
    --calendar-z-header: 30;
    --calendar-z-now-marker: 40;
    --calendar-z-top-mask: 60;
    --calendar-z-now-label: 65;
    --calendar-z-first-column: 50;
    --calendar-z-first-column-control: 55;
    --calendar-z-first-column-header: 70;
    --calendar-z-control-popover-context: 2302;
    --calendar-z-appointment-panel: 2400;
    --calendar-z-jobsite-panel: 2401;
    --calendar-z-jobsite-menu-backdrop: 2402;
    --calendar-z-jobsite-menu: 2403;
}

.calendar-page[b-zku8ulalvl] {
    --cal-bg: #f4f6f8;
    --cal-surface: #ffffff;
    --cal-panel: #eef2f6;
    --cal-panel-strong: #e2e8f0;
    --cal-line: #cbd5e1;
    --cal-line-soft: #e2e8f0;
    --cal-text: #0f172a;
    --cal-muted: #64748b;
    --cal-accent: #1d4ed8;
    --cal-accent-strong: #1e40af;
    --cal-accent-soft: #dbeafe;
    --cal-current: #475569;
    --cal-current-soft: #eef2f7;
    --cal-weekend: #edf1f5;
    --cal-weekend-text: #7b8794;
    height: calc(100vh - 48px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--cal-text);
    background: var(--cal-bg);
}

.calendar-delete-modal-layer[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: 2300;
    display: grid;
    place-items: center;
    padding: 18px;
}

.calendar-delete-modal-backdrop[b-zku8ulalvl] {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(2px);
    cursor: default;
}

.calendar-delete-modal-shell[b-zku8ulalvl] {
    position: relative;
    width: min(390px, calc(100vw - 28px));
    border: 1px solid rgba(203, 213, 225, 0.82);
    border-radius: 18px;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.18);
    animation: calendar-delete-modal-in-b-zku8ulalvl 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.calendar-delete-modal-core[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 13px;
    border-radius: 18px;
    padding: 16px;
    color: #172033;
    background: #ffffff;
    box-shadow: none;
}

.calendar-delete-modal-head[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.calendar-delete-modal-close[b-zku8ulalvl],
.calendar-delete-modal-cancel[b-zku8ulalvl],
.calendar-delete-modal-confirm[b-zku8ulalvl] {
    border: 0;
    font: inherit;
    cursor: pointer;
    transition:
        transform 260ms cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1),
        background 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-delete-modal-close[b-zku8ulalvl] {
    width: 30px;
    height: 30px;
    display: inline-grid;
    place-items: center;
    border-radius: 9px;
    color: #475569;
    background: transparent;
}

.calendar-delete-modal-close:hover[b-zku8ulalvl],
.calendar-delete-modal-close:focus-visible[b-zku8ulalvl] {
    color: #0f172a;
    background: #f1f5f9;
    outline: none;
    transform: translateY(-1px);
}

.calendar-delete-modal-icon[b-zku8ulalvl] {
    display: none;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 12px;
    color: #9f1239;
    background: #fff1f2;
    box-shadow: none;
}

.calendar-delete-modal-head h2[b-zku8ulalvl] {
    margin: 0;
    color: #0f172a;
    font-size: 1.08rem;
    line-height: 1.22;
    font-weight: 900;
    text-wrap: balance;
}

.calendar-delete-modal-summary[b-zku8ulalvl] {
    display: grid;
    gap: 3px;
    border: 1px solid rgba(226, 232, 240, 0.88);
    border-radius: 12px;
    padding: 10px 12px;
    background: #f8fafc;
}

.calendar-delete-modal-summary span[b-zku8ulalvl] {
    color: #94a3b8;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.calendar-delete-modal-summary strong[b-zku8ulalvl] {
    min-width: 0;
    color: #172033;
    overflow-wrap: anywhere;
    font-size: 0.88rem;
    line-height: 1.25;
    font-weight: 850;
}

.calendar-delete-modal-summary small[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
}

.calendar-delete-modal-actions[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
}

.calendar-delete-modal-cancel[b-zku8ulalvl],
.calendar-delete-modal-confirm[b-zku8ulalvl] {
    min-height: 36px;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 0.82rem;
    font-weight: 850;
}

.calendar-delete-modal-cancel[b-zku8ulalvl] {
    color: #334155;
    background: #f1f5f9;
}

.calendar-delete-modal-confirm[b-zku8ulalvl] {
    color: #ffffff;
    background: #b4232d;
    box-shadow: 0 8px 18px rgba(180, 35, 45, 0.18);
}

.calendar-delete-modal-cancel:hover[b-zku8ulalvl],
.calendar-delete-modal-cancel:focus-visible[b-zku8ulalvl],
.calendar-delete-modal-confirm:hover[b-zku8ulalvl],
.calendar-delete-modal-confirm:focus-visible[b-zku8ulalvl] {
    outline: none;
    transform: translateY(-1px);
}

.calendar-delete-modal-confirm:hover[b-zku8ulalvl],
.calendar-delete-modal-confirm:focus-visible[b-zku8ulalvl] {
    box-shadow: 0 10px 22px rgba(180, 35, 45, 0.22);
}

.calendar-delete-modal-cancel:active[b-zku8ulalvl],
.calendar-delete-modal-confirm:active[b-zku8ulalvl],
.calendar-delete-modal-close:active[b-zku8ulalvl] {
    transform: scale(0.98);
}

@keyframes calendar-delete-modal-in-b-zku8ulalvl {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 540px) {
    .calendar-delete-modal-layer[b-zku8ulalvl] {
        align-items: end;
        padding: 10px;
    }

    .calendar-delete-modal-shell[b-zku8ulalvl] {
        width: 100%;
        border-radius: 16px;
    }

    .calendar-delete-modal-core[b-zku8ulalvl] {
        border-radius: 16px;
        padding: 14px;
    }

    .calendar-delete-modal-actions[b-zku8ulalvl] {
        grid-template-columns: 1fr;
    }
}

.calendar-toolbar[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-shrink: 0;
    padding: 12px 18px 10px;
    border-bottom: 1px solid var(--cal-line);
    background: var(--cal-panel);
}

.calendar-title-block[b-zku8ulalvl] {
    min-width: 0;
}

.calendar-kicker[b-zku8ulalvl] {
    display: block;
    color: var(--cal-muted);
    font-size: 0.63rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-title-block h1[b-zku8ulalvl] {
    margin: 3px 0 0;
    overflow: hidden;
    color: var(--cal-text);
    font-size: 1.24rem;
    font-weight: 950;
    line-height: 1.12;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-toolbar-actions[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.calendar-plan-btn[b-zku8ulalvl] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(20, 93, 160, 0.28);
    border-radius: 8px;
    padding: 0 13px;
    color: #ffffff;
    background: #145da0;
    cursor: pointer;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: 0 10px 22px rgba(20, 93, 160, 0.18);
    transition: background 0.16s, transform 0.12s, box-shadow 0.16s;
}

.calendar-plan-btn:hover[b-zku8ulalvl],
.calendar-plan-btn:focus-visible[b-zku8ulalvl] {
    background: #0f4c81;
    box-shadow: 0 12px 26px rgba(20, 93, 160, 0.24);
    outline: none;
    transform: translateY(-1px);
}

.calendar-plan-btn:active[b-zku8ulalvl] {
    transform: translateY(0);
}

.calendar-range-controls[b-zku8ulalvl],
.calendar-view-switch[b-zku8ulalvl] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--cal-line);
    border-radius: 8px;
    padding: 3px;
    background: var(--cal-surface);
}

.calendar-view-switch[b-zku8ulalvl] {
    gap: 2px;
    border-color: #b7c4d2;
    padding: 4px;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 20px rgba(15, 23, 42, 0.07);
}

.calendar-icon-btn[b-zku8ulalvl],
.calendar-today-btn[b-zku8ulalvl],
.calendar-view-btn[b-zku8ulalvl] {
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    color: var(--cal-text);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.83rem;
    font-weight: 850;
    white-space: nowrap;
    transition: background 0.16s, color 0.16s, box-shadow 0.16s;
}

.calendar-icon-btn[b-zku8ulalvl] {
    width: 30px;
    padding: 0;
}

.calendar-today-btn[b-zku8ulalvl] {
    gap: 7px;
    padding: 0 11px;
    min-width: 126px;
}

.calendar-today-btn:hover[b-zku8ulalvl],
.calendar-today-btn--open[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
}

.calendar-today-btn--open[b-zku8ulalvl] {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.22);
}

.calendar-view-btn[b-zku8ulalvl] {
    min-width: 68px;
    padding: 0 10px;
    border-radius: 5px;
    color: #334155;
    font-size: 0.78rem;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px transparent;
}

.calendar-icon-btn:hover[b-zku8ulalvl],
.calendar-view-btn:hover[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
}

.calendar-view-btn--active[b-zku8ulalvl] {
    color: #ffffff;
    background: #0f4c81;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 4px 12px rgba(15, 76, 129, 0.24);
}

.calendar-view-btn--active:hover[b-zku8ulalvl] {
    color: white;
    background: #0f4c81;
}

.calendar-edit-toggle[b-zku8ulalvl] {
    height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--cal-line);
    border-radius: 8px;
    padding: 0 11px 0 9px;
    color: var(--cal-muted);
    background: var(--cal-surface);
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 900;
    white-space: nowrap;
    transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.calendar-edit-toggle input[b-zku8ulalvl] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.calendar-edit-toggle-box[b-zku8ulalvl] {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    background: #ffffff;
    box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.08);
}

.calendar-edit-toggle-box[b-zku8ulalvl]::before {
    content: "";
    width: 8px;
    height: 5px;
    border-bottom: 2px solid #ffffff;
    border-left: 2px solid #ffffff;
    opacity: 0;
    transform: rotate(-45deg) translate(1px, -1px);
}

.calendar-edit-toggle:hover[b-zku8ulalvl],
.calendar-edit-toggle:focus-within[b-zku8ulalvl] {
    color: var(--cal-accent);
    border-color: rgba(29, 78, 216, 0.34);
    background: var(--cal-accent-soft);
}

.calendar-edit-toggle--active[b-zku8ulalvl] {
    color: #0f4c81;
    border-color: rgba(15, 76, 129, 0.38);
    background: #e8f1fa;
    box-shadow: inset 0 0 0 1px rgba(15, 76, 129, 0.08);
}

.calendar-edit-toggle--active .calendar-edit-toggle-box[b-zku8ulalvl] {
    border-color: #0f4c81;
    background: #0f4c81;
}

.calendar-edit-toggle--active .calendar-edit-toggle-box[b-zku8ulalvl]::before {
    opacity: 1;
}

.calendar-view-settings[b-zku8ulalvl] {
    position: relative;
    flex: 1;
    min-width: 0;
}

.calendar-view-settings-trigger[b-zku8ulalvl] {
    width: 100%;
    min-width: 0;
    height: 34px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 1fr 1fr;
    align-items: center;
    column-gap: 7px;
    border: 1px solid #b7c4d2;
    border-radius: 7px;
    padding: 4px 8px;
    color: var(--cal-text);
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
    cursor: pointer;
    font: inherit;
    text-align: left;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 7px 18px rgba(15, 23, 42, 0.06);
    transition: background 0.18s cubic-bezier(0.32, 0.72, 0, 1), border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1), transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-view-settings-trigger:hover[b-zku8ulalvl],
.calendar-view-settings-trigger--open[b-zku8ulalvl] {
    border-color: rgba(20, 93, 160, 0.4);
    background: #e8f1fa;
    transform: translateY(-1px);
}

.calendar-view-settings-trigger span[b-zku8ulalvl],
.calendar-view-settings-trigger strong[b-zku8ulalvl] {
    min-width: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-weight: 900;
    letter-spacing: 0;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.calendar-view-settings-trigger span[b-zku8ulalvl] {
    font-size: 0.78rem;
    line-height: 1;
}

.calendar-view-settings-trigger strong[b-zku8ulalvl] {
    grid-column: 1;
    color: var(--cal-muted);
    font-size: 0.62rem;
    line-height: 1;
}

.calendar-view-settings-trigger svg[b-zku8ulalvl] {
    grid-column: 2;
    grid-row: 1 / span 2;
    color: var(--cal-muted);
    transition: transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-view-settings-trigger--open svg[b-zku8ulalvl] {
    transform: rotate(180deg);
}

.calendar-view-settings-backdrop[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: 2300;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.calendar-view-settings-popover[b-zku8ulalvl] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 2301;
    width: min(218px, calc(100vw - 28px));
    display: grid;
    gap: 8px;
    border: 1px solid rgba(148, 163, 184, 0.48);
    border-radius: 10px;
    padding: 8px;
    background: #ffffff;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.calendar-view-settings-popover[b-zku8ulalvl]::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 22px;
    width: 12px;
    height: 12px;
    border-top: 1px solid rgba(148, 163, 184, 0.48);
    border-left: 1px solid rgba(148, 163, 184, 0.48);
    background: #ffffff;
    pointer-events: none;
    transform: rotate(45deg);
}

.calendar-view-settings-popover .calendar-view-switch[b-zku8ulalvl] {
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3px;
}

.calendar-view-settings-popover .calendar-view-btn[b-zku8ulalvl] {
    width: 100%;
    justify-content: flex-start;
    min-width: 0;
}

.calendar-view-settings-popover .calendar-edit-toggle[b-zku8ulalvl] {
    width: 100%;
    justify-content: flex-start;
}

.calendar-date-picker-wrap[b-zku8ulalvl] {
    position: relative;
    display: inline-flex;
}

.calendar-picker-backdrop[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: 2300;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.calendar-date-picker[b-zku8ulalvl] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 2301;
    width: min(374px, calc(100vw - 28px));
    max-width: calc(100vw - 28px);
    max-height: min(660px, calc(100vh - 116px));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.52);
    border-radius: 12px;
    background: var(--cal-surface);
    box-shadow: 0 24px 70px rgba(22, 32, 42, 0.2), 0 8px 22px rgba(22, 32, 42, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.calendar-week-corner .calendar-date-picker[b-zku8ulalvl] {
    right: auto;
    left: 0;
}

.calendar-picker-header[b-zku8ulalvl] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-bottom: 1px solid var(--cal-line-soft);
    padding: 10px;
    background: linear-gradient(180deg, #ffffff 0%, #eef3f8 100%);
}

.calendar-picker-nav[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 8px;
}

.calendar-picker-icon-btn[b-zku8ulalvl] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    color: var(--cal-text);
    background: rgba(226, 232, 240, 0.82);
    cursor: pointer;
    transition: background 0.16s, color 0.16s;
}

.calendar-picker-icon-btn:hover[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
}

.calendar-picker-icon-btn:focus-visible[b-zku8ulalvl] {
    outline: 2px solid rgba(29, 78, 216, 0.28);
    outline-offset: 2px;
}

.calendar-picker-icon-btn:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-title[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.calendar-picker-title span[b-zku8ulalvl] {
    color: var(--cal-muted);
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-picker-shortcuts[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.calendar-picker-title strong[b-zku8ulalvl],
.calendar-picker-title-main[b-zku8ulalvl] {
    color: var(--cal-text);
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
    animation: calendar-picker-in-b-zku8ulalvl 0.12s ease-out;
}

.calendar-picker-title-main[b-zku8ulalvl] {
    border: 0;
    border-radius: 8px;
    padding: 5px 10px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1;
    transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), color 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-picker-title-main:hover[b-zku8ulalvl],
.calendar-picker-title-main:focus-visible[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
    outline: none;
}

.calendar-picker-title-main:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-title-actions[b-zku8ulalvl] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    animation: calendar-picker-in-b-zku8ulalvl 0.12s ease-out;
}

.calendar-picker-title-btn[b-zku8ulalvl] {
    min-width: 0;
    max-width: 150px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    padding: 0 9px;
    overflow: hidden;
    color: var(--cal-text);
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.26);
    transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), color 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-picker-title-btn--year[b-zku8ulalvl] {
    max-width: 76px;
    font-variant-numeric: tabular-nums;
}

.calendar-picker-title-btn:hover[b-zku8ulalvl],
.calendar-picker-title-btn:focus-visible[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
    outline: none;
}

.calendar-picker-title-btn:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-month[b-zku8ulalvl] {
    min-width: 0;
    overflow-y: auto;
    padding: 9px 10px 10px;
    overflow: hidden;
    background: var(--cal-surface);
}

@keyframes calendar-picker-in-b-zku8ulalvl {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.calendar-picker-level-actions[b-zku8ulalvl] {
    display: none;
}

.calendar-picker-level-btn[b-zku8ulalvl] {
    height: 27px;
    border: none;
    border-radius: 999px;
    padding: 0 11px;
    color: var(--cal-text);
    background: rgba(255, 255, 255, 0.64);
    cursor: pointer;
    font: inherit;
    font-size: 0.73rem;
    font-weight: 900;
    white-space: nowrap;
    box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.24);
    transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), color 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-picker-level-btn--left[b-zku8ulalvl] {
    grid-column: 1;
    justify-self: start;
}

.calendar-picker-level-btn--center[b-zku8ulalvl] {
    grid-column: 2;
    justify-self: center;
}

.calendar-picker-level-btn--right[b-zku8ulalvl] {
    grid-column: 3;
    justify-self: end;
}

.calendar-picker-level-btn:hover[b-zku8ulalvl] {
    color: var(--cal-text);
    background: #ffffff;
}

.calendar-picker-level-btn--primary[b-zku8ulalvl] {
    color: #ffffff;
    background: #0f4c81;
    box-shadow: 0 7px 14px rgba(15, 76, 129, 0.18);
}

.calendar-picker-level-btn--primary:hover[b-zku8ulalvl] {
    color: #ffffff;
    background: #145da0;
}

.calendar-picker-level-btn:focus-visible[b-zku8ulalvl] {
    outline: 2px solid rgba(29, 78, 216, 0.28);
    outline-offset: 2px;
}

.calendar-picker-level-btn:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-weekdays[b-zku8ulalvl],
.calendar-picker-week-row[b-zku8ulalvl],
.calendar-picker-week-button[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: 44px repeat(7, minmax(0, 1fr));
    align-items: center;
}

.calendar-picker-weekdays[b-zku8ulalvl] {
    min-height: 26px;
    border-bottom: 1px solid var(--cal-line-soft);
    color: var(--cal-muted);
    background: var(--cal-surface);
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    text-align: center;
}

.calendar-picker-weeks[b-zku8ulalvl] {
    padding: 5px 0 0;
}

.calendar-picker-week-row[b-zku8ulalvl],
.calendar-picker-week-button[b-zku8ulalvl] {
    min-height: 32px;
    border-radius: 8px;
}

.calendar-picker-week-button[b-zku8ulalvl] {
    width: 100%;
    border: none;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.16s cubic-bezier(0.32, 0.72, 0, 1), color 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-picker-week-button:hover[b-zku8ulalvl] {
    color: var(--cal-text);
    background: #eef2f7;
    box-shadow: none;
}

.calendar-picker-week-button:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-week-button:hover .calendar-picker-day--span[b-zku8ulalvl] {
    color: var(--cal-text);
    background: transparent;
}

.calendar-picker-week-button--selected[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
    box-shadow: none;
}

.calendar-picker-week-button--selected .calendar-picker-kw[b-zku8ulalvl],
.calendar-picker-week-button--selected .calendar-picker-day--span[b-zku8ulalvl] {
    color: var(--cal-accent);
}

.calendar-picker-week-button--selected .calendar-picker-day--span[b-zku8ulalvl] {
    background: transparent;
}

.calendar-picker-week-button--today:not(.calendar-picker-week-button--selected) .calendar-picker-kw[b-zku8ulalvl] {
    color: var(--cal-current);
}

.calendar-picker-kw[b-zku8ulalvl] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    height: 25px;
    margin: 0 4px 0 0;
    border-radius: 7px;
    color: var(--cal-muted);
    font-size: 0.62rem;
    font-weight: 950;
    line-height: 1;
    white-space: nowrap;
}

.calendar-picker-day[b-zku8ulalvl] {
    height: 25px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 25px;
    border: none;
    border-radius: 7px;
    color: var(--cal-text);
    background: transparent;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), color 0.16s cubic-bezier(0.32, 0.72, 0, 1), box-shadow 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

button.calendar-picker-day:hover[b-zku8ulalvl] {
    color: var(--cal-text);
    background: #eef2f7;
}

.calendar-picker-day:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-day--outside[b-zku8ulalvl] {
    color: #94a3b8;
    background: rgba(241, 245, 249, 0.42);
}

.calendar-picker-day--today:not(.calendar-picker-day--selected)[b-zku8ulalvl] {
    color: var(--cal-current);
    box-shadow: inset 0 0 0 1px rgba(71, 85, 105, 0.3);
}

.calendar-picker-day--selected[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
    box-shadow: none;
}

.calendar-picker-week-button--selected .calendar-picker-day--selected[b-zku8ulalvl] {
    background: transparent;
}

.calendar-picker-month-select[b-zku8ulalvl],
.calendar-picker-year-select[b-zku8ulalvl] {
    display: grid;
    gap: 7px;
    padding: 10px;
    background: var(--cal-bg);
}

.calendar-picker-month-select[b-zku8ulalvl] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-picker-year-select[b-zku8ulalvl] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-picker-month-btn[b-zku8ulalvl],
.calendar-picker-year-btn[b-zku8ulalvl] {
    min-height: 52px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    border: none;
    border-radius: 9px;
    padding: 8px 9px;
    color: var(--cal-text);
    background: var(--cal-surface);
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.16s cubic-bezier(0.32, 0.72, 0, 1), color 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.16s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-picker-month-btn span[b-zku8ulalvl] {
    color: var(--cal-muted);
    font-size: 0.66rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-picker-month-btn strong[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    width: 100%;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-picker-year-btn[b-zku8ulalvl] {
    align-items: center;
    min-height: 50px;
    color: var(--cal-text);
    font-size: 0.95rem;
    font-weight: 950;
    text-align: center;
}

.calendar-picker-month-btn:hover[b-zku8ulalvl],
.calendar-picker-year-btn:hover[b-zku8ulalvl] {
    color: var(--cal-text);
    background: #eef2f7;
}

.calendar-picker-month-btn:active[b-zku8ulalvl],
.calendar-picker-year-btn:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-picker-month-btn--today[b-zku8ulalvl],
.calendar-picker-year-btn--today[b-zku8ulalvl] {
    color: var(--cal-current);
    box-shadow: none;
}

.calendar-picker-month-btn--selected[b-zku8ulalvl],
.calendar-picker-year-btn--selected[b-zku8ulalvl] {
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
}

.calendar-picker-month-btn--selected span[b-zku8ulalvl],
.calendar-picker-month-btn--selected strong[b-zku8ulalvl] {
    color: var(--cal-accent);
}

.calendar-board[b-zku8ulalvl] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px 12px;
    overflow: hidden;
}

.calendar-empty[b-zku8ulalvl] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--cal-line);
    border-radius: 8px;
    color: var(--cal-muted);
    background: var(--cal-surface);
    font-weight: 850;
}

.calendar-scroller[b-zku8ulalvl] {
    flex: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    border: 1px solid var(--cal-line);
    border-radius: 8px;
    background: var(--cal-surface);
    box-shadow: 0 16px 36px rgba(22, 32, 42, 0.08);
}

.calendar-scroller--horizontal[b-zku8ulalvl] {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.calendar-scroller--horizontal .calendar-week-corner[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-corner[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-group-label[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-person[b-zku8ulalvl] {
    box-shadow: 10px 0 18px -18px rgba(15, 23, 42, 0.62), inset -1px 0 0 var(--cal-line);
}

.calendar-scroller--horizontal .calendar-week-corner[b-zku8ulalvl] {
    z-index: var(--calendar-z-first-column-header, 70);
}

.calendar-scroller--horizontal .calendar-corner[b-zku8ulalvl] {
    z-index: var(--calendar-z-first-column-header, 70);
}

.calendar-scroller--horizontal .calendar-group-label[b-zku8ulalvl] {
    z-index: var(--calendar-z-first-column, 50);
    background: linear-gradient(var(--department-surface, transparent), var(--department-surface, transparent)), var(--cal-surface);
    box-shadow: inset 3px 0 0 var(--department-color, var(--cal-text)), 10px 0 18px -18px rgba(15, 23, 42, 0.62), inset -1px 0 0 var(--cal-line);
}

.calendar-scroller--horizontal .calendar-person[b-zku8ulalvl] {
    z-index: var(--calendar-z-first-column, 50);
    background: var(--cal-surface);
}

.calendar-scroller--horizontal .calendar-week-corner[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-corner[b-zku8ulalvl] {
    background: var(--cal-surface);
}

.calendar-scroller--horizontal .calendar-week-corner .calendar-date-picker[b-zku8ulalvl] {
    position: fixed;
    top: calc(48px + 70px + var(--calendar-week-head-height));
    left: 18px;
    right: auto;
}

.calendar-scroller--horizontal .calendar-corner .calendar-view-settings-popover[b-zku8ulalvl] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
}

.calendar-grid[b-zku8ulalvl] {
    --calendar-people-width: clamp(176px, 23vw, 236px);
    --calendar-multiweek-day-width: max(118px, calc((100vw - var(--calendar-people-width) - 48px) / 7));
    --calendar-now-head-height: 28px;
    --calendar-week-head-height: 28px;
    position: relative;
    display: grid;
    grid-template-rows: var(--calendar-now-head-height) var(--calendar-week-head-height) auto;
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.calendar-grid[b-zku8ulalvl]::before {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1;
    position: sticky;
    top: 0;
    z-index: var(--calendar-z-top-mask, 60);
    background: var(--cal-surface);
    pointer-events: none;
}

.calendar-grid.calendar-grid--resizing[b-zku8ulalvl],
.calendar-grid.calendar-grid--resizing *[b-zku8ulalvl] {
    cursor: col-resize !important;
    user-select: none;
}

.calendar-now-summary[b-zku8ulalvl] {
    position: sticky;
    grid-row: 1;
    top: 0;
    z-index: var(--calendar-z-now-label, 65);
    min-width: 0;
    min-height: var(--calendar-now-head-height);
    overflow: visible;
    pointer-events: none;
}

.calendar-now-summary strong[b-zku8ulalvl] {
    position: absolute;
    top: 0;
    left: var(--calendar-now-position);
    transform: translateX(-50%);
    min-width: 48px;
    border-radius: 7px;
    padding: 3px 8px;
    color: #ffffff;
    background: var(--cal-current);
    font-size: 0.76rem;
    font-weight: 950;
    letter-spacing: 0;
    text-align: center;
    box-shadow: 0 7px 18px rgba(71, 85, 105, 0.2);
}

.calendar-week-corner[b-zku8ulalvl],
.calendar-week-head[b-zku8ulalvl] {
    grid-row: 2;
    position: sticky;
    top: var(--calendar-now-head-height);
    z-index: var(--calendar-z-header, 30);
    min-width: 0;
    min-height: var(--calendar-week-head-height);
    background: var(--cal-surface);
}

.calendar-week-corner[b-zku8ulalvl] {
    grid-column: 1;
    left: 0;
    z-index: var(--calendar-z-first-column-header, 70);
    display: flex;
    align-items: stretch;
    border-bottom: none;
    background: var(--cal-surface);
}

.calendar-week-corner--overlay-open[b-zku8ulalvl],
.calendar-corner--overlay-open[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-week-corner--overlay-open[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-corner--overlay-open[b-zku8ulalvl] {
    z-index: var(--calendar-z-control-popover-context, 2302);
}

.calendar-week-corner .calendar-range-controls[b-zku8ulalvl] {
    width: 100%;
    height: var(--calendar-week-head-height);
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 2px 5px;
    background: transparent;
}

.calendar-week-corner .calendar-icon-btn[b-zku8ulalvl] {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 5px;
}

.calendar-week-corner .calendar-date-picker-wrap[b-zku8ulalvl] {
    flex: 1;
    min-width: 0;
}

.calendar-week-corner .calendar-today-btn[b-zku8ulalvl] {
    width: 100%;
    min-width: 0;
    height: 24px;
    gap: 4px;
    padding: 0 6px;
    border-radius: 5px;
    font-size: 0.68rem;
}

.calendar-week-corner .calendar-today-btn svg[b-zku8ulalvl] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
}

.calendar-week-corner .calendar-today-btn span[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-week-head[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--cal-line-soft);
    color: var(--cal-muted);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-top-left-radius: 6px;
}

.calendar-grid[data-calendar-view="two-weeks"] .calendar-week-head[b-zku8ulalvl],
.calendar-grid[data-calendar-view="month"] .calendar-week-head[b-zku8ulalvl],
.calendar-grid[data-calendar-view="multi-weeks"] .calendar-week-head[b-zku8ulalvl] {
    border-top-right-radius: 6px;
}

.calendar-week-head--current[b-zku8ulalvl] {
    color: var(--cal-text);
    background: #e8edf3;
    box-shadow: inset 0 -2px 0 #94a3b8;
}

.calendar-corner[b-zku8ulalvl],
.calendar-day-head[b-zku8ulalvl] {
    grid-row: 3;
    position: sticky;
    top: calc(var(--calendar-now-head-height) + var(--calendar-week-head-height));
    min-width: 0;
    min-height: 48px;
    z-index: var(--calendar-z-header, 30);
    background: var(--cal-surface);
    border-bottom: 1px solid var(--cal-line);
}

.calendar-corner[b-zku8ulalvl] {
    left: 0;
    z-index: var(--calendar-z-first-column-header, 70);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-right: 1px solid var(--cal-line);
    padding: 0 14px;
    background: var(--cal-surface);
}

.calendar-week-corner--overlay-open[b-zku8ulalvl],
.calendar-corner--overlay-open[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-week-corner--overlay-open[b-zku8ulalvl],
.calendar-scroller--horizontal .calendar-corner--overlay-open[b-zku8ulalvl] {
    z-index: var(--calendar-z-control-popover-context, 2302);
}

.calendar-corner > span[b-zku8ulalvl] {
    color: var(--cal-muted);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.calendar-corner > strong[b-zku8ulalvl] {
    min-width: 28px;
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--cal-accent);
    background: var(--cal-accent-soft);
    font-size: 0.76rem;
    font-weight: 950;
    text-align: center;
}

.calendar-day-head[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-right: 1px solid var(--cal-line-soft);
    padding: 0 8px;
    text-align: center;
}

.calendar-day-head--day[b-zku8ulalvl] {
    min-height: 66px;
    align-items: stretch;
    padding: 5px 0 0;
}

.calendar-day-head > span[b-zku8ulalvl] {
    overflow: hidden;
    width: 100%;
    color: var(--cal-text);
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-day-head > strong[b-zku8ulalvl] {
    overflow: hidden;
    width: 100%;
    color: var(--cal-muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.calendar-hour-head[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: repeat(24, minmax(0, 1fr));
    align-items: end;
    margin-top: 4px;
    border-top: 1px solid var(--cal-line-soft);
    min-height: 23px;
    color: var(--cal-muted);
    background: rgba(255, 255, 255, 0.5);
}

.calendar-hour-head span[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--cal-line-soft);
    padding: 5px 2px 4px;
    font-size: 0.54rem;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-overflow: clip;
    white-space: nowrap;
}

.calendar-hour-head span:last-child[b-zku8ulalvl] {
    border-right: none;
}

.calendar-hour-label--current[b-zku8ulalvl] {
    color: white;
    background: var(--cal-current);
    box-shadow: 0 5px 14px rgba(71, 85, 105, 0.18);
}

.calendar-day-head--current-hour .calendar-hour-head[b-zku8ulalvl] {
    box-shadow: inset 0 -2px 0 rgba(71, 85, 105, 0.2);
}

.calendar-day-head--weekend[b-zku8ulalvl] {
    background: var(--cal-weekend);
    color: var(--cal-weekend-text);
}

.calendar-group-label[b-zku8ulalvl] {
    min-width: 0;
    min-height: 25px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--cal-line);
    background: var(--department-surface, var(--cal-panel));
}

.calendar-group-label[b-zku8ulalvl] {
    position: sticky;
    left: 0;
    z-index: var(--calendar-z-first-column, 50);
    gap: 8px;
    border-right: 1px solid var(--cal-line);
    box-shadow: inset 3px 0 0 var(--department-color, var(--cal-text));
    padding: 0 12px;
    color: var(--department-color, var(--cal-text));
}

.calendar-group-label--collapsed[b-zku8ulalvl] {
    border-bottom-color: var(--cal-line);
}

.calendar-group-name[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    flex: 1;
    font-size: 0.69rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-group-toggle[b-zku8ulalvl] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    margin-right: -5px;
    border: 0;
    border-radius: 999px;
    padding: 0;
    color: var(--department-color, var(--cal-text));
    background: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: background-color 180ms cubic-bezier(0.32, 0.72, 0, 1), color 180ms cubic-bezier(0.32, 0.72, 0, 1), transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-group-toggle svg[b-zku8ulalvl] {
    width: 11px;
    height: 11px;
}

.calendar-group-toggle:hover[b-zku8ulalvl],
.calendar-group-toggle:focus-visible[b-zku8ulalvl] {
    color: white;
    background: var(--department-color, var(--cal-text));
    outline: none;
    transform: translateX(1px);
}

.calendar-group-toggle:active[b-zku8ulalvl] {
    transform: translateX(1px) scale(0.94);
}

.calendar-group-toggle svg[b-zku8ulalvl] {
    transform: rotate(90deg);
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-group-label--collapsed .calendar-group-toggle svg[b-zku8ulalvl] {
    transform: rotate(270deg);
}

.calendar-person[b-zku8ulalvl],
.calendar-time-cell[b-zku8ulalvl] {
    min-width: 0;
    min-height: var(--calendar-row-height, 76px);
    border-bottom: 1px solid var(--cal-line-soft);
}

.calendar-person[b-zku8ulalvl] {
    position: sticky;
    left: 0;
    z-index: var(--calendar-z-first-column, 50);
    display: flex;
    align-items: center;
    gap: 10px;
    border-right: 1px solid var(--cal-line);
    padding: 0 12px;
    background: var(--cal-surface);
}

.calendar-person-avatar[b-zku8ulalvl] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    background: #145da0;
    font-size: 0.76rem;
    font-weight: 950;
}

.calendar-person-text[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.calendar-person-text strong[b-zku8ulalvl],
.calendar-person-text small[b-zku8ulalvl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-person-text strong[b-zku8ulalvl] {
    color: var(--cal-text);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.1;
}

.calendar-person-text small[b-zku8ulalvl] {
    color: var(--cal-muted);
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.1;
}

.calendar-time-cell[b-zku8ulalvl] {
    position: relative;
    overflow: visible;
    border-right: 1px solid var(--cal-line-soft);
    background: var(--cal-surface);
}

.calendar-time-cell:not(.calendar-time-cell--department)[b-zku8ulalvl] {
    cursor: pointer;
}

.calendar-time-cell[b-zku8ulalvl]::before {
    display: none;
    content: none;
}

.calendar-time-cell--weekend[b-zku8ulalvl] {
    background: var(--cal-weekend);
}

.calendar-time-cell--department[b-zku8ulalvl] {
    min-height: 25px;
    border-bottom-color: var(--cal-line);
    background: var(--department-surface, var(--cal-panel));
}

.calendar-column-resize-handle[b-zku8ulalvl] {
    position: absolute;
    top: 0;
    right: -5px;
    bottom: 0;
    z-index: var(--calendar-z-first-column-control, 55);
    width: 10px;
    cursor: col-resize;
    touch-action: none;
}

.calendar-column-resize-handle[b-zku8ulalvl]::before {
    content: "";
    position: absolute;
    top: 10px;
    bottom: 10px;
    left: 4px;
    width: 2px;
    border-radius: 999px;
    background: rgba(20, 93, 160, 0.28);
}

.calendar-column-resize-handle:hover[b-zku8ulalvl]::before {
    background: rgba(20, 93, 160, 0.62);
}

.calendar-time-cell--department[b-zku8ulalvl]::before {
    display: none;
    content: none;
}

.calendar-time-cell--department.calendar-time-cell--day[b-zku8ulalvl] {
    background-color: var(--department-surface, var(--cal-panel));
}

.calendar-time-cell--day[b-zku8ulalvl] {
    background-image: repeating-linear-gradient(
        to right,
        transparent 0,
        transparent calc(100% / 24 - 1px),
        var(--cal-line-soft) calc(100% / 24 - 1px),
        var(--cal-line-soft) calc(100% / 24)
    );
    background-size: 100% 100%;
}

.calendar-time-cell--current-hour[b-zku8ulalvl]::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--calendar-current-hour-start);
    width: var(--calendar-current-hour-width);
    background: rgba(71, 85, 105, 0.08);
    box-shadow: inset 1px 0 0 rgba(71, 85, 105, 0.18), inset -1px 0 0 rgba(71, 85, 105, 0.18);
    pointer-events: none;
}

.calendar-time-slot-grid[b-zku8ulalvl] {
    position: absolute;
    inset: 0;
    z-index: var(--calendar-z-cell-overlay, 2);
    display: grid;
    grid-template-columns: repeat(var(--calendar-slot-count, 96), minmax(0, 1fr));
}

.calendar-time-slot[b-zku8ulalvl] {
    min-width: 0;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}

.calendar-time-slot:hover[b-zku8ulalvl],
.calendar-time-slot:focus-visible[b-zku8ulalvl],
.calendar-time-slot--drag-target[b-zku8ulalvl] {
    background: rgba(29, 78, 216, 0.07);
    outline: none;
}

.calendar-time-cell--drag-target-cell[b-zku8ulalvl] {
    box-shadow: inset 0 0 0 2px rgba(29, 78, 216, 0.2);
}

.calendar-vacation[b-zku8ulalvl] {
    position: absolute;
    inset: 4px;
    z-index: var(--calendar-z-cell-overlay, 2);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(21, 128, 61, 0.48);
    border-radius: 6px;
    padding: 5px 7px;
    color: #ffffff;
    background: #16a34a;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 7px rgba(21, 128, 61, 0.16);
    pointer-events: none;
}

.calendar-vacation span[b-zku8ulalvl] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
}

.calendar-sick[b-zku8ulalvl] {
    position: absolute;
    inset: 4px;
    z-index: calc(var(--calendar-z-cell-overlay, 2) + 1);
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(180, 35, 24, 0.5);
    border-radius: 6px;
    padding: 5px 7px;
    color: #ffffff;
    background: #dc2626;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 2px 7px rgba(180, 35, 24, 0.16);
    pointer-events: none;
}

.calendar-sick span[b-zku8ulalvl] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.7rem;
    font-weight: 900;
    line-height: 1;
}

.calendar-context-backdrop[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: 2250;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.calendar-context-menu[b-zku8ulalvl] {
    position: fixed;
    --ctx-menu-width: 184px;
    --ctx-menu-height: 118px;
    top: min(var(--ctx-y), calc(100dvh - var(--ctx-menu-height) - 8px));
    left: min(var(--ctx-x), calc(100dvw - var(--ctx-menu-width) - 8px));
    z-index: 2251;
    width: var(--ctx-menu-width);
    max-width: calc(100vw - 16px);
    overflow: hidden;
    padding: 4px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

.calendar-context-menu button:not(.calendar-context-backdrop)[b-zku8ulalvl] {
    width: 100%;
    min-height: 31px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 0;
    border-radius: 6px;
    padding: 0 8px;
    color: #0f172a;
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 730;
    text-align: left;
    white-space: nowrap;
    transition: background 0.12s, color 0.12s;
}

.calendar-context-menu button:hover[b-zku8ulalvl],
.calendar-context-menu button:focus-visible[b-zku8ulalvl] {
    color: #0f4c81;
    background: #f1f5f9;
    outline: none;
}

.calendar-context-menu svg[b-zku8ulalvl] {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    opacity: 0.82;
}

.calendar-context-series-delete > svg[b-zku8ulalvl] {
    display: none;
}

.calendar-context-series-delete[b-zku8ulalvl]::before {
    content: "";
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='18' y1='12' y2='18'/%3E%3Cline x1='12' x2='18' y1='18' y2='12'/%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' x2='18' y1='12' y2='18'/%3E%3Cline x1='12' x2='18' y1='18' y2='12'/%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E") center / contain no-repeat;
}

.calendar-context-menu .calendar-context-danger[b-zku8ulalvl] {
    color: #a33131;
}

.calendar-context-menu .calendar-context-danger:hover[b-zku8ulalvl],
.calendar-context-menu .calendar-context-danger:focus-visible[b-zku8ulalvl] {
    color: #9f1d1d;
    background: #fff1f1;
}

.calendar-preview-backdrop[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: 2250;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.calendar-appointment-preview[b-zku8ulalvl] {
    position: fixed;
    top: var(--preview-y);
    left: clamp(170px, var(--preview-x), calc(100vw - 170px));
    z-index: 2251;
    width: 324px;
    max-width: calc(100vw - 16px);
    overflow: visible;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.24);
    transform: translate(-50%, calc(-100% - 10px));
}

.calendar-appointment-preview[b-zku8ulalvl]::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 14px;
    height: 14px;
    border-right: 1px solid #dbe3ec;
    border-bottom: 1px solid #dbe3ec;
    background: #f8fafc;
    pointer-events: none;
    transform: translateX(-50%) rotate(45deg);
}

.calendar-appointment-preview-head[b-zku8ulalvl] {
    display: grid;
    gap: 5px;
    padding: 14px 16px 10px;
    border-bottom: 1px solid #edf1f6;
}

.calendar-appointment-preview-head span[b-zku8ulalvl] {
    color: #334155;
    font-size: 0.72rem;
    font-weight: 850;
}

.calendar-appointment-preview-head strong[b-zku8ulalvl] {
    color: #0f172a;
    font-size: 0.96rem;
    font-weight: 950;
    line-height: 1.15;
}

.calendar-appointment-preview-head small[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-appointment-preview-details[b-zku8ulalvl] {
    display: grid;
    gap: 9px;
    margin: 0;
    padding: 12px 16px;
}

.calendar-appointment-preview-details div[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.calendar-appointment-preview-details dt[b-zku8ulalvl],
.calendar-appointment-preview-details dd[b-zku8ulalvl] {
    margin: 0;
}

.calendar-appointment-preview-details dt[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 850;
}

.calendar-appointment-preview-details dd[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-appointment-preview-actions[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-top: 1px solid #edf1f6;
    border-radius: 0 0 7px 7px;
    background: #f8fafc;
}

.calendar-preview-action[b-zku8ulalvl] {
    min-width: 0;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 7px;
    padding: 0 9px;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 900;
}

.calendar-preview-action svg[b-zku8ulalvl] {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.calendar-preview-action span[b-zku8ulalvl] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-preview-action--danger[b-zku8ulalvl] {
    color: #b91c1c;
}

.calendar-preview-action--danger:hover[b-zku8ulalvl],
.calendar-preview-action--danger:focus-visible[b-zku8ulalvl] {
    color: #ffffff;
    background: #dc2626;
    outline: none;
}

.calendar-preview-action--edit[b-zku8ulalvl] {
    margin-left: auto;
    color: #145da0;
}

.calendar-preview-action--edit:hover[b-zku8ulalvl],
.calendar-preview-action--edit:focus-visible[b-zku8ulalvl] {
    color: #ffffff;
    background: #145da0;
    outline: none;
}

.calendar-appointment[b-zku8ulalvl] {
    position: absolute;
    z-index: var(--calendar-z-appointment, 6);
    box-sizing: border-box;
    container-type: inline-size;
    min-width: 36px;
    display: grid;
    grid-template-columns: 7px minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid color-mix(in srgb, var(--appt-color, #145da0) 24%, rgba(15, 23, 42, 0.16));
    border-radius: 8px;
    padding: 0;
    overflow: hidden;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)),
        color-mix(in srgb, var(--appt-color, #145da0) 10%, #ffffff);
    cursor: pointer;
    font: inherit;
    text-align: left;
    touch-action: none;
    user-select: none;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transition: transform 0.14s, box-shadow 0.14s, border-color 0.14s, background 0.14s;
}

.calendar-appointment-sidebar[b-zku8ulalvl] {
    position: fixed;
    top: 112px;
    right: 0;
    bottom: 0;
    z-index: var(--calendar-z-appointment-panel, 2400);
    width: min(430px, 100vw);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 22px 55px rgba(15, 23, 42, 0.22);
}

.calendar-appointment-sidebar-header[b-zku8ulalvl] {
    border-bottom: 1px solid #dbe3ec;
    padding: 8px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.calendar-appointment-sidebar-body[b-zku8ulalvl] {
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 14px 14px 126px;
}

.calendar-sidebar-close[b-zku8ulalvl] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    border-radius: 7px;
    padding: 0;
    color: #334155;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: background 0.14s, color 0.14s, transform 0.12s;
}

.calendar-sidebar-close:hover[b-zku8ulalvl],
.calendar-sidebar-close:focus-visible[b-zku8ulalvl] {
    color: #0f172a;
    background: #e2e8f0;
    outline: none;
}

.calendar-sidebar-close:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-sidebar-close svg[b-zku8ulalvl] {
    width: 16px;
    height: 16px;
}

.calendar-appointment:hover[b-zku8ulalvl],
.calendar-appointment:focus-visible[b-zku8ulalvl] {
    border-color: color-mix(in srgb, var(--appt-color, #145da0) 48%, #ffffff);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.2);
    outline: none;
    transform: translateY(-1px);
}

.calendar-appointment--dragging-source[b-zku8ulalvl] {
    opacity: 0.38;
    pointer-events: none;
}

.calendar-appointment-drag-ghost[b-zku8ulalvl] {
    opacity: 0.9;
    box-shadow: 0 16px 28px rgba(15, 23, 42, 0.28);
    transform-origin: 0 0;
}

.calendar-appointment-accent[b-zku8ulalvl] {
    width: 7px;
    min-width: 7px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.24), transparent 34%),
        var(--appt-color, #145da0);
    box-shadow:
        inset -2px 0 0 rgba(255, 255, 255, 0.38),
        inset 1px 0 0 rgba(15, 23, 42, 0.18);
}

.calendar-appointment-content[b-zku8ulalvl] {
    position: relative;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px 6px 9px;
    background:
        linear-gradient(90deg, color-mix(in srgb, var(--appt-color, #145da0) 13%, transparent), transparent 64%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.94));
}

.calendar-appointment-title[b-zku8ulalvl],
.calendar-appointment-meta[b-zku8ulalvl],
.calendar-appointment-meta > span[b-zku8ulalvl],
.calendar-appointment-series[b-zku8ulalvl] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-appointment-audit[b-zku8ulalvl] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    flex: 1 1 100%;
    min-width: 0;
    max-width: 100%;
    border-right: 0;
    border-bottom: 1px solid #e5e7eb;
    padding-right: 0;
    padding-bottom: 6px;
    color: #667085;
    font-size: 0.64rem;
    font-weight: 750;
    line-height: 1.2;
    white-space: nowrap;
}

.calendar-appointment-audit span[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.calendar-appointment-audit span:last-child[b-zku8ulalvl] {
    text-align: right;
}

.calendar-appointment-audit strong[b-zku8ulalvl] {
    color: #111827;
    font-weight: 850;
}

.calendar-appointment-title[b-zku8ulalvl] {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 950;
    line-height: 1.08;
    letter-spacing: 0;
    overflow-wrap: anywhere;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.calendar-appointment-meta[b-zku8ulalvl] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: color-mix(in srgb, var(--appt-color, #145da0) 72%, #0f172a);
    font-size: 0.61rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

.calendar-appointment-meta > span:first-child[b-zku8ulalvl] {
    flex: 0 1 auto;
}

.calendar-appointment-series[b-zku8ulalvl] {
    flex: 0 0 auto;
    border: 1px solid color-mix(in srgb, var(--appt-color, #145da0) 24%, rgba(15, 23, 42, 0.12));
    border-radius: 999px;
    padding: 2px 5px;
    color: color-mix(in srgb, var(--appt-color, #145da0) 76%, #0f172a);
    background: rgba(255, 255, 255, 0.88);
    font-size: 0.52rem;
    font-weight: 900;
    line-height: 1;
}

.calendar-grid:not([data-calendar-view="day"]) .calendar-appointment[b-zku8ulalvl] {
    grid-template-columns: 6px minmax(0, 1fr);
    min-width: 46px;
}

.calendar-grid:not([data-calendar-view="day"]) .calendar-appointment-accent[b-zku8ulalvl] {
    width: 6px;
    min-width: 6px;
}

.calendar-grid:not([data-calendar-view="day"]) .calendar-appointment-content[b-zku8ulalvl] {
    padding: 6px 7px 6px 8px;
}

.calendar-grid:not([data-calendar-view="day"]) .calendar-appointment-title[b-zku8ulalvl] {
    font-size: 0.74rem;
}

.calendar-grid[data-calendar-view="day"] .calendar-appointment-content[b-zku8ulalvl] {
    gap: 4px;
    padding: 5px 6px 5px 8px;
}

.calendar-grid[data-calendar-view="day"] .calendar-appointment-title[b-zku8ulalvl] {
    font-size: 0.7rem;
    line-height: 1.06;
}

.calendar-grid[data-calendar-view="day"] .calendar-appointment-meta[b-zku8ulalvl] {
    font-size: 0.55rem;
}

@container (max-width: 190px) {
    .calendar-appointment-content[b-zku8ulalvl] {
        padding-right: 6px;
        padding-left: 7px;
    }
}

@container (max-width: 166px) {
    .calendar-appointment-title[b-zku8ulalvl] {
        font-size: 0.7rem;
    }

    .calendar-appointment-meta[b-zku8ulalvl] {
        font-size: 0.52rem;
    }
}

@container (max-width: 150px) {
    .calendar-appointment-title[b-zku8ulalvl] {
        font-size: 0.68rem;
    }

    .calendar-appointment-series[b-zku8ulalvl] {
        display: none;
    }
}

@container (max-width: 82px) {
    .calendar-grid:not([data-calendar-view="day"]) .calendar-appointment[b-zku8ulalvl] {
        grid-template-columns: 4px minmax(0, 1fr);
    }

    .calendar-grid:not([data-calendar-view="day"]) .calendar-appointment-accent[b-zku8ulalvl] {
        width: 4px;
        min-width: 4px;
    }

    .calendar-grid:not([data-calendar-view="day"]) .calendar-appointment-content[b-zku8ulalvl] {
        padding-right: 2px;
        padding-left: 4px;
    }

    .calendar-grid:not([data-calendar-view="day"]) .calendar-appointment-title[b-zku8ulalvl] {
        font-size: 0.68rem;
    }

    .calendar-appointment-meta[b-zku8ulalvl] {
        display: none;
    }
}


.calendar-appointment:active[b-zku8ulalvl] {
    transform: translateY(0);
}

.calendar-now-line[b-zku8ulalvl] {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: var(--calendar-z-now-marker, 40);
    width: 0;
    justify-self: stretch;
    pointer-events: none;
}

.calendar-now-line[b-zku8ulalvl]::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -1px;
    width: 2px;
    background: var(--cal-current);
    box-shadow: 0 0 0 1px rgba(71, 85, 105, 0.08), 0 0 18px rgba(71, 85, 105, 0.22);
}

.calendar-sr-only[b-zku8ulalvl] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.calendar-modal-header[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
}

.calendar-modal-kicker[b-zku8ulalvl] {
    display: block;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-modal-header h2[b-zku8ulalvl] {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: 1.34rem;
    font-weight: 950;
    line-height: 1.12;
}

.calendar-modal-header-actions[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 8px;
}

.calendar-edit-scope[b-zku8ulalvl] {
    width: 104px;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    padding: 0 9px;
    color: #0f4c81;
    background: #eff6ff;
    cursor: pointer;
    font: inherit;
    text-align: center;
}

.calendar-edit-scope:hover[b-zku8ulalvl],
.calendar-edit-scope:focus-visible[b-zku8ulalvl] {
    border-color: #145da0;
    background: #dbeafe;
    outline: none;
}

.calendar-edit-scope span[b-zku8ulalvl] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    color: #0f4c81;
    font-size: 0.7rem;
    font-weight: 950;
    line-height: 1.12;
}

.calendar-series-head[b-zku8ulalvl] {
    position: relative;
    min-width: 0;
    width: min(300px, 100%);
}

.calendar-series-head-btn[b-zku8ulalvl] {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 9px;
    color: #0f172a;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.14s, border-color 0.14s, box-shadow 0.14s;
}

.calendar-series-head-btn:hover[b-zku8ulalvl],
.calendar-series-head-btn:focus-visible[b-zku8ulalvl],
.calendar-series-head-btn--open[b-zku8ulalvl] {
    border-color: #145da0;
    background: #eff6ff;
    box-shadow: 0 0 0 3px rgba(20, 93, 160, 0.1);
    outline: none;
}

.calendar-series-head-btn--active[b-zku8ulalvl] {
    border-color: rgba(20, 93, 160, 0.42);
    background: #f0f7ff;
}

.calendar-series-popup-backdrop[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: 2200;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.calendar-series-popup[b-zku8ulalvl] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2201;
    width: min(500px, calc(100vw - 32px));
    max-height: min(460px, calc(100vh - 126px));
    display: flex;
    flex-direction: column;
    overflow: auto;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.24), 0 8px 22px rgba(15, 23, 42, 0.1);
}

.calendar-series-popup-head[b-zku8ulalvl] {
    min-height: 46px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid #dbe3ec;
    padding: 8px 10px;
    background: #eef2f6;
}

.calendar-series-popup-head div[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-series-popup-head span[b-zku8ulalvl],
.calendar-series-popup-head strong[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-series-popup-head span[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.calendar-series-popup-head strong[b-zku8ulalvl] {
    color: #0f172a;
    font-size: 0.84rem;
    font-weight: 950;
}

.calendar-series-popup-close[b-zku8ulalvl] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 0;
    border-radius: 7px;
    padding: 0;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    font: inherit;
    transition: background 0.14s, color 0.14s, transform 0.12s;
}

.calendar-series-popup-close:hover[b-zku8ulalvl],
.calendar-series-popup-close:focus-visible[b-zku8ulalvl] {
    color: #0f172a;
    background: #dbeafe;
    outline: none;
}

.calendar-series-popup-close:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-series-popup-close svg[b-zku8ulalvl] {
    width: 16px;
    height: 16px;
}

.calendar-modal-shell[b-zku8ulalvl] {
    height: 100%;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
    gap: 12px;
}

.calendar-modal-shell--single[b-zku8ulalvl] {
    grid-template-columns: minmax(0, 1fr);
}

.calendar-modal-body[b-zku8ulalvl] {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: visible;
}

.calendar-jobsite-panel[b-zku8ulalvl] {
    --jobsite-status-color: #007aff;
    position: fixed;
    top: auto;
    bottom: 14px;
    left: 14px;
    z-index: var(--calendar-z-jobsite-panel, 2401);
    width: 320px;
    max-height: min(720px, calc(100vh - 56px));
    transform: none;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border: 1.5px solid color-mix(in srgb, var(--jobsite-status-color) 36%, #ffffff);
    border-radius: 16px;
    padding: 14px;
    overflow-y: auto;
    background: color-mix(in srgb, var(--jobsite-status-color) 9%, #ffffff);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.2), inset 4px 0 0 var(--jobsite-status-color);
}

.calendar-jobsite-panel--dragging[b-zku8ulalvl] {
    cursor: grabbing;
    will-change: transform;
}

.calendar-jobsite-panel--free[b-zku8ulalvl] {
    top: var(--jobsite-panel-y, 92px);
    bottom: auto;
    left: var(--jobsite-panel-x, 16px);
    height: auto;
    transform: none;
}

.calendar-jobsite-panel--minimized[b-zku8ulalvl] {
    top: auto;
    right: auto;
    bottom: 14px;
    left: 14px;
    width: 208px;
    height: auto;
    min-height: 0;
    max-height: none;
    transform: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 32px;
    align-items: center;
    gap: 8px;
    padding: 9px;
    overflow: hidden;
}

@media (max-width: 1080px) and (min-width: 681px) {
    .calendar-jobsite-panel[b-zku8ulalvl] {
        left: 14px;
        bottom: 14px;
        width: 300px;
    }
}

.calendar-jobsite-panel.calendar-jobsite-panel--minimized[b-zku8ulalvl] {
    width: 208px;
    height: auto;
}

.calendar-jobsite-panel-top[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 10px;
}

.calendar-jobsite-panel-head[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-jobsite-panel-actions[b-zku8ulalvl] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.calendar-jobsite-panel-icon-btn[b-zku8ulalvl] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--jobsite-status-color) 26%, #dbe3ec);
    border-radius: 8px;
    color: #0f172a;
    background: rgba(255, 255, 255, 0.76);
    cursor: pointer;
}

.calendar-jobsite-panel-icon-btn:hover[b-zku8ulalvl],
.calendar-jobsite-panel-icon-btn:focus-visible[b-zku8ulalvl],
.calendar-jobsite-panel-icon-btn--active[b-zku8ulalvl] {
    border-color: var(--jobsite-status-color);
    color: var(--jobsite-status-color);
    background: #ffffff;
    outline: none;
}

.calendar-jobsite-panel-drag-btn[b-zku8ulalvl] {
    cursor: grab;
    touch-action: none;
}

.calendar-jobsite-panel-drag-btn:active[b-zku8ulalvl] {
    cursor: grabbing;
}

.calendar-jobsite-panel-dock-main[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.calendar-jobsite-panel-dock-main span[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.calendar-jobsite-panel-dock-main strong[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-jobsite-panel-head span[b-zku8ulalvl],
.calendar-jobsite-status > span[b-zku8ulalvl],
.calendar-jobsite-info-grid span[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.65rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.calendar-jobsite-panel-head strong[b-zku8ulalvl] {
    color: #0f172a;
    font-size: 1.03rem;
    font-weight: 950;
    line-height: 1.15;
}

.calendar-jobsite-info-section[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid color-mix(in srgb, var(--jobsite-status-color) 22%, #ffffff);
    border-radius: 12px;
    padding: 11px;
    background: rgba(255, 255, 255, 0.7);
}

.calendar-jobsite-info-section--customer[b-zku8ulalvl] {
    background: #ffffff;
}

.calendar-jobsite-info-title[b-zku8ulalvl] {
    color: var(--jobsite-status-color);
    font-size: 0.68rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.calendar-jobsite-status[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.calendar-status-dropdown[b-zku8ulalvl] {
    position: relative;
}

.calendar-status-trigger[b-zku8ulalvl],
.calendar-status-option[b-zku8ulalvl] {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 8px 10px;
    color: #0f172a;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.calendar-status-trigger:disabled[b-zku8ulalvl] {
    cursor: not-allowed;
    opacity: 0.62;
}

.calendar-status-trigger strong[b-zku8ulalvl],
.calendar-status-option strong[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    color: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-status-trigger:hover:not(:disabled)[b-zku8ulalvl],
.calendar-status-trigger:focus-visible[b-zku8ulalvl],
.calendar-status-option:hover[b-zku8ulalvl],
.calendar-status-option:focus-visible[b-zku8ulalvl] {
    border-color: var(--jobsite-status-color);
    background: #ffffff;
    outline: none;
}

.calendar-status-dot[b-zku8ulalvl] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--jobsite-status-color, #007aff);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--jobsite-status-color, #007aff) 16%, transparent);
}

.calendar-status-menu[b-zku8ulalvl] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: var(--calendar-z-jobsite-menu, 2403);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: min(190px, calc(100vh - 120px));
    overflow-y: auto;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    padding: 6px;
    background: #ffffff;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.18);
}

.calendar-status-backdrop[b-zku8ulalvl] {
    position: fixed;
    inset: 0;
    z-index: var(--calendar-z-jobsite-menu-backdrop, 2402);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.calendar-status-option[b-zku8ulalvl] {
    grid-template-columns: 14px minmax(0, 1fr);
    border-color: transparent;
    background: transparent;
}

.calendar-status-option--active[b-zku8ulalvl] {
    color: var(--jobsite-status-color);
    background: color-mix(in srgb, var(--jobsite-status-color) 12%, #ffffff);
}

.calendar-jobsite-info-grid[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: minmax(82px, auto) minmax(0, 1fr);
    gap: 8px 12px;
    align-items: baseline;
    padding-top: 4px;
}

.calendar-jobsite-info-grid strong[b-zku8ulalvl] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: #0f172a;
    font-size: 0.83rem;
    font-weight: 850;
    line-height: 1.25;
}

.calendar-modal-block[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    border: 1px solid #dbe3ec;
    border-radius: 8px;
    overflow: visible;
    background: #ffffff;
}

.calendar-modal-block--time[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 8px;
    padding: 8px 10px;
    flex-shrink: 0;
    overflow: visible;
}

.calendar-modal-block--selection[b-zku8ulalvl] {
    flex: 1;
    min-height: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
}

.calendar-modal-time-grid[b-zku8ulalvl] {
    position: relative;
    z-index: 2200;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    gap: 8px;
    padding: 0;
}

.calendar-modal-title-field[b-zku8ulalvl] {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    height: 36px;
    display: flex;
    align-items: center;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    background: #ffffff;
}

.calendar-modal-title-field:focus-within[b-zku8ulalvl] {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.calendar-modal-title-field input[b-zku8ulalvl] {
    min-width: 0;
    width: 100%;
    border: none;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    outline: none;
}

.calendar-modal-title-field input[b-zku8ulalvl]::placeholder {
    color: #94a3b8;
    font-weight: 750;
}

.calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp-field {
    min-height: 36px;
    border-radius: 7px;
    padding: 4px 9px;
}

.calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp-field span {
    font-size: 0.58rem;
}

.calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp-field strong {
    font-size: 0.78rem;
}

.calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp:last-child .calendar-dtp-popup {
    right: 0;
    left: auto;
}

.calendar-appointment-sidebar .calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp {
    position: static;
}

.calendar-appointment-sidebar .calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp-popup,
.calendar-appointment-sidebar .calendar-modal-time-grid[b-zku8ulalvl]  .calendar-dtp:last-child .calendar-dtp-popup {
    top: calc(100% + 7px);
    right: auto;
    left: 0;
    width: min(100%, calc(100vw - 28px));
    max-width: 100%;
}

.calendar-series-toggle[b-zku8ulalvl] {
    width: 100%;
    min-height: 42px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    border: none;
    padding: 7px 10px;
    color: #0f172a;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: background 0.14s, color 0.14s;
}

.calendar-series-toggle:hover[b-zku8ulalvl],
.calendar-series-toggle:focus-visible[b-zku8ulalvl] {
    color: #0f4c81;
    background: #eef6ff;
    outline: none;
}

.calendar-series-toggle:disabled[b-zku8ulalvl] {
    cursor: default;
}

.calendar-series-toggle:disabled:hover[b-zku8ulalvl],
.calendar-series-toggle:disabled:focus-visible[b-zku8ulalvl] {
    color: #0f172a;
    background: transparent;
}

.calendar-series-toggle--active[b-zku8ulalvl] {
    color: #0f4c81;
    background: #eff6ff;
}

.calendar-series-icon[b-zku8ulalvl] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #145da0;
    background: #dbeafe;
}

.calendar-series-toggle-text[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.calendar-series-toggle-text strong[b-zku8ulalvl],
.calendar-series-toggle-text small[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-series-toggle-text strong[b-zku8ulalvl] {
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.1;
}

.calendar-series-toggle-text small[b-zku8ulalvl],
.calendar-series-preview[b-zku8ulalvl],
.calendar-series-note[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
}

.calendar-series-panel[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    align-items: end;
    padding: 12px;
    overflow: visible;
    background: #ffffff;
}

.calendar-series-popup .calendar-series-panel[b-zku8ulalvl] {
    border-top: 0;
}

.calendar-series-field[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calendar-series-field span[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-series-field select[b-zku8ulalvl],
.calendar-series-field input[b-zku8ulalvl] {
    width: 100%;
    min-width: 0;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    padding: 0 9px;
    color: #0f172a;
    background: #ffffff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 850;
    outline: none;
}

.calendar-series-field select:focus[b-zku8ulalvl],
.calendar-series-field input:focus[b-zku8ulalvl] {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.calendar-series-field--number[b-zku8ulalvl] {
    max-width: none;
}

.calendar-series-field--date[b-zku8ulalvl] {
    max-width: none;
}

.calendar-series-weekdays[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    align-items: end;
}

.calendar-series-weekday[b-zku8ulalvl] {
    width: auto;
    height: 34px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    color: #334155;
    background: #f8fafc;
    cursor: pointer;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 950;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.calendar-series-weekday:hover[b-zku8ulalvl],
.calendar-series-weekday:focus-visible[b-zku8ulalvl] {
    border-color: #93c5fd;
    color: #0f4c81;
    background: #eff6ff;
    outline: none;
}

.calendar-series-weekday--active[b-zku8ulalvl] {
    border-color: #145da0;
    color: #ffffff;
    background: #145da0;
}

.calendar-series-preview[b-zku8ulalvl] {
    grid-column: 1 / -1;
    min-width: 0;
    min-height: 20px;
    display: flex;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-series-note[b-zku8ulalvl] {
    border-top: 1px solid #dbe3ec;
    padding: 0 10px 9px 51px;
}

.calendar-modal-tabs[b-zku8ulalvl] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
}

.calendar-modal-tab-bar[b-zku8ulalvl] {
    flex-shrink: 0;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: flex-end;
    gap: 7px;
    border-bottom: 1px solid #cbd5e1;
    background: #eef2f6;
    margin-right: 0.3rem;
}

.calendar-modal-tab-list[b-zku8ulalvl] {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    border: 0;
    background: transparent;
}

.calendar-modal-tab[b-zku8ulalvl] {
    min-width: 0;
    max-width: 170px;
    min-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: 7px 7px 0 0;
    margin-bottom: -1px;
    padding: 0 12px;
    position: relative;
    color: #334155;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: center;
    box-shadow: none;
    transition: background 0.14s, border-color 0.14s, color 0.14s;
}

.calendar-modal-tab--with-search[b-zku8ulalvl] {
    gap: 7px;
    padding-right: 7px;
}

.calendar-modal-tab:hover[b-zku8ulalvl],
.calendar-modal-tab:focus-visible[b-zku8ulalvl] {
    color: #0f4c81;
    border-color: #d6e0eb;
    background: #e2e8f0;
    outline: none;
}

.calendar-modal-tab--active[b-zku8ulalvl] {
    z-index: 1;
    color: #0f172a;
    border-color: #cbd5e1;
    background: #ffffff;
}

.calendar-modal-tab--active:hover[b-zku8ulalvl],
.calendar-modal-tab--active:focus-visible[b-zku8ulalvl] {
    color: #0f172a;
    background: #ffffff;
}

.calendar-modal-tab--active[b-zku8ulalvl]::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 1px;
    background: #ffffff;
}

.calendar-modal-tab span[b-zku8ulalvl],
.calendar-modal-tab strong[b-zku8ulalvl] {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-modal-tab span[b-zku8ulalvl] {
    font-size: 0.75rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: none;
}

.calendar-modal-tab strong[b-zku8ulalvl] {
    display: none;
}

.calendar-modal-tab-panel[b-zku8ulalvl] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    border: 1px solid #cbd5e1;
    border-top: 0;
    border-radius: 0 0 8px 8px;
    padding: 8px;
    overflow: hidden;
    background: #ffffff;
}

.calendar-modal-search-clear[b-zku8ulalvl] {
    width: 20px;
    height: 20px;
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    border: 0;
    border-radius: 6px;
    padding: 0;
    color: #64748b;
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 900;
    line-height: 1;
}

.calendar-modal-search-clear:hover[b-zku8ulalvl],
.calendar-modal-search-clear:focus-visible[b-zku8ulalvl] {
    color: #b91c1c;
    background: #fee2e2;
    outline: none;
}

.calendar-custom-fields[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px;
}

.calendar-custom-address-grid[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.calendar-modal-field[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendar-modal-field span[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 900;
}

.calendar-modal-field input[b-zku8ulalvl] {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 9px 10px;
    color: #0f172a;
    background: #ffffff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    outline: none;
}

.calendar-modal-field input:focus[b-zku8ulalvl] {
    border-color: #1d4ed8;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
}

.calendar-modal-section-toggle[b-zku8ulalvl] {
    width: 100%;
    min-height: 54px;
    display: grid;
    grid-template-columns: minmax(110px, auto) minmax(0, 1fr) 28px;
    align-items: center;
    gap: 10px;
    border: none;
    padding: 10px 13px;
    color: #0f172a;
    background: #eef2f6;
    cursor: pointer;
    font: inherit;
    text-align: left;
}

.calendar-modal-section-toggle:hover[b-zku8ulalvl],
.calendar-modal-section-toggle:focus-visible[b-zku8ulalvl] {
    background: #e2e8f0;
    outline: none;
}

.calendar-modal-section-toggle > span[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.69rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-modal-section-toggle > strong[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-modal-chevron[b-zku8ulalvl] {
    justify-self: end;
    color: #64748b;
    transition: transform 0.16s;
}

.calendar-modal-chevron--open[b-zku8ulalvl] {
    transform: rotate(180deg);
}

.calendar-modal-panel[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-top: 1px solid #dbe3ec;
    padding: 11px;
    background: #ffffff;
}

.calendar-modal-search[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 0 10px;
    color: #64748b;
    background: #f8fafc;
}

.calendar-modal-search svg[b-zku8ulalvl] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.calendar-modal-search input[b-zku8ulalvl] {
    flex: 1;
    min-width: 0;
    border: none;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    outline: none;
}

.calendar-modal-search input[b-zku8ulalvl]::placeholder {
    color: #94a3b8;
}

.calendar-modal-option-list[b-zku8ulalvl],
.calendar-modal-employee-list[b-zku8ulalvl],
.calendar-modal-jobsite-list[b-zku8ulalvl] {
    min-width: 0;
}

.calendar-modal-option-list[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}

.calendar-modal-option-list--compact[b-zku8ulalvl] {
    max-height: 170px;
    overflow-y: auto;
}

.calendar-modal-employee-list[b-zku8ulalvl],
.calendar-modal-jobsite-list[b-zku8ulalvl] {
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
    padding-right: 2px;
}

.calendar-modal-jobsite-group[b-zku8ulalvl] {
    margin-bottom: 10px;
}

.calendar-modal-jobsite-group:last-child[b-zku8ulalvl] {
    margin-bottom: 0;
}

.calendar-modal-employee-group[b-zku8ulalvl] {
    margin-bottom: 10px;
}

.calendar-modal-employee-group:last-child[b-zku8ulalvl] {
    margin-bottom: 0;
}

.calendar-modal-employee-group-title[b-zku8ulalvl],
.calendar-modal-jobsite-group-title[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    margin-bottom: 6px;
    color: var(--department-color, #0f172a);
}

.calendar-modal-jobsite-group-title[b-zku8ulalvl] {
    color: #145da0;
    margin-bottom: 0;
    border: 1px solid #dbe3ec;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 6px 9px 6px 11px;
    background: #f8fbff;
}

.calendar-modal-employee-group-title[b-zku8ulalvl] {
    margin-bottom: 0;
    border: 1px solid #dbe3ec;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 6px 9px 6px 11px;
    background: var(--department-surface, #f8fbff);
}

.calendar-modal-employee-group .calendar-modal-option-list[b-zku8ulalvl] {
    border-radius: 0 0 8px 8px;
}

.calendar-modal-jobsite-group .calendar-modal-option-list[b-zku8ulalvl] {
    border-radius: 0 0 8px 8px;
}

.calendar-modal-employee-group-title span[b-zku8ulalvl],
.calendar-modal-jobsite-group-title span[b-zku8ulalvl],
.calendar-modal-jobsite-group-title small[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-modal-employee-group-title span[b-zku8ulalvl],
.calendar-modal-jobsite-group-title span[b-zku8ulalvl] {
    font-size: 0.7rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.calendar-modal-jobsite-group-title small[b-zku8ulalvl] {
    grid-column: 1;
    color: #64748b;
    font-size: 0.69rem;
    font-weight: 750;
}

.calendar-modal-jobsite-group-title span[b-zku8ulalvl],
.calendar-modal-jobsite-group-title small[b-zku8ulalvl] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.calendar-modal-employee-group-title strong[b-zku8ulalvl],
.calendar-modal-jobsite-group-title strong[b-zku8ulalvl] {
    grid-column: 2;
    grid-row: 1 / span 2;
    min-width: 24px;
    border-radius: 999px;
    padding: 2px 7px;
    background: var(--department-surface, #eef2f6);
    font-size: 0.68rem;
    font-weight: 950;
    text-align: center;
}

.calendar-modal-option[b-zku8ulalvl] {
    width: 100%;
    min-height: 40px;
    display: grid;
    grid-template-columns: 22px 30px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    border: none;
    border-bottom: 1px solid #e2e8f0;
    border-radius: 0;
    padding: 6px 9px;
    color: #0f172a;
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    text-align: left;
    transition: border-color 0.14s, background 0.14s, box-shadow 0.14s;
}

.calendar-modal-option:last-child[b-zku8ulalvl] {
    border-bottom: none;
}

.calendar-modal-option-list--compact .calendar-modal-option[b-zku8ulalvl] {
    grid-template-columns: 22px minmax(0, 1fr) auto;
}

.calendar-modal-option--jobsite[b-zku8ulalvl] {
    grid-template-columns: 22px minmax(0, 1fr) auto;
}

.calendar-modal-option:hover[b-zku8ulalvl],
.calendar-modal-option:focus-visible[b-zku8ulalvl] {
    background: #f8fbff;
    outline: none;
}

.calendar-modal-option--selected[b-zku8ulalvl] {
    background: #eff6ff;
    box-shadow: inset 3px 0 0 #145da0;
}

.calendar-modal-check[b-zku8ulalvl] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    background: #ffffff;
}

.calendar-modal-option--selected .calendar-modal-check[b-zku8ulalvl] {
    border-color: #145da0;
    background: #145da0;
}

.calendar-modal-option--selected .calendar-modal-check[b-zku8ulalvl]::after {
    content: "";
    width: 8px;
    height: 5px;
    border-left: 2px solid #ffffff;
    border-bottom: 2px solid #ffffff;
    transform: translateY(-1px) rotate(-45deg);
}

.calendar-modal-avatar[b-zku8ulalvl] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: #145da0;
    font-size: 0.72rem;
    font-weight: 950;
}

.calendar-modal-option-main[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.calendar-modal-option-main strong[b-zku8ulalvl],
.calendar-modal-option-main small[b-zku8ulalvl],
.calendar-modal-option-meta[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-modal-option-main strong[b-zku8ulalvl] {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.1;
}

.calendar-modal-option-main small[b-zku8ulalvl],
.calendar-modal-option-meta[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 750;
}

.calendar-modal-option-meta[b-zku8ulalvl] {
    justify-self: end;
    max-width: none;
    white-space: nowrap;
}

.calendar-modal-option--jobsite .calendar-modal-option-main strong[b-zku8ulalvl],
.calendar-modal-option--jobsite .calendar-modal-option-main small[b-zku8ulalvl] {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.calendar-modal-option--jobsite .calendar-modal-option-main strong[b-zku8ulalvl] {
    line-height: 1.16;
}

.calendar-modal-option--jobsite .calendar-modal-option-main small[b-zku8ulalvl] {
    line-height: 1.2;
}

.calendar-modal-jobsite-list[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 4px;
}

.calendar-modal-jobsite-group[b-zku8ulalvl] {
    margin-bottom: 0;
    border: 1px solid #d3deeb;
    border-left: 4px solid #145da0;
    border-radius: 10px;
    padding: 7px 7px 8px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.calendar-modal-jobsite-group:last-child[b-zku8ulalvl] {
    margin-bottom: 0;
}

.calendar-modal-jobsite-group-title[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    margin: 0 0 6px;
    border: none;
    border-radius: 0;
    padding: 0;
    color: #0f172a;
    background: transparent;
    text-transform: none;
}

.calendar-modal-jobsite-group-marker[b-zku8ulalvl] {
    width: 28px;
    height: 28px;
    display: inline-grid;
    place-items: center;
    border-radius: 7px;
    color: #0f4c81;
    background: #eaf4ff;
}

.calendar-modal-jobsite-group-marker svg[b-zku8ulalvl] {
    width: 15px;
    height: 15px;
}

.calendar-modal-jobsite-group-copy[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    gap: 2px;
    text-transform: none;
}

.calendar-modal-jobsite-group-title .calendar-modal-jobsite-group-kicker[b-zku8ulalvl] {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    text-transform: none;
}

.calendar-modal-jobsite-group-title .calendar-modal-jobsite-group-copy strong[b-zku8ulalvl] {
    grid-column: auto;
    grid-row: auto;
    min-width: 0;
    overflow: hidden;
    border-radius: 0;
    padding: 0;
    color: #0f172a;
    background: transparent;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.14;
    text-align: left;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.calendar-modal-jobsite-group-title .calendar-modal-jobsite-group-copy small[b-zku8ulalvl] {
    grid-column: auto;
    overflow: hidden;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 750;
    line-height: 1.2;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
}

.calendar-modal-jobsite-grid[b-zku8ulalvl] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 6px;
}

.calendar-modal-jobsite-card[b-zku8ulalvl] {
    min-height: 58px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border: 1px solid #e0e8f2;
    border-radius: 8px;
    padding: 7px 8px;
    background: #ffffff;
    box-shadow: none;
    transition:
        border-color 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        background 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        box-shadow 0.18s cubic-bezier(0.32, 0.72, 0, 1),
        transform 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}

.calendar-modal-jobsite-card:last-child[b-zku8ulalvl] {
    border-bottom: 1px solid #e0e8f2;
}

.calendar-modal-jobsite-card:hover[b-zku8ulalvl],
.calendar-modal-jobsite-card:focus-visible[b-zku8ulalvl] {
    border-color: rgba(20, 93, 160, 0.42);
    background: #f8fbff;
    box-shadow: 0 8px 18px rgba(15, 76, 129, 0.09);
    outline: none;
    transform: translateY(-1px);
}

.calendar-modal-jobsite-card.calendar-modal-option--selected[b-zku8ulalvl] {
    border-color: rgba(20, 93, 160, 0.62);
    background:
        linear-gradient(180deg, #f2f8ff 0%, #ffffff 100%),
        #ffffff;
    box-shadow: inset 0 0 0 2px rgba(20, 93, 160, 0.12), 0 8px 18px rgba(15, 76, 129, 0.1);
}

.calendar-modal-jobsite-card-main[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    align-content: start;
    gap: 5px;
}

.calendar-modal-jobsite-card-title[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

.calendar-modal-jobsite-pin[b-zku8ulalvl] {
    width: 12px;
    height: 12px;
    display: inline-block;
    border: 3px solid #cfe2f8;
    border-radius: 4px 4px 4px 1px;
    background: #145da0;
    transform: rotate(-45deg) translateY(2px);
}

.calendar-modal-jobsite-card-title strong[b-zku8ulalvl] {
    min-width: 0;
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1.16;
    overflow-wrap: anywhere;
    text-wrap: pretty;
}

.calendar-modal-jobsite-address[b-zku8ulalvl] {
    min-width: 0;
    display: grid;
    grid-template-columns: 13px minmax(0, 1fr);
    align-items: start;
    gap: 5px;
    color: #64748b;
}

.calendar-modal-jobsite-address svg[b-zku8ulalvl] {
    margin-top: 1px;
    width: 13px;
    height: 13px;
    color: #7890aa;
}

.calendar-modal-jobsite-address small[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 760;
    line-height: 1.18;
    text-overflow: ellipsis;
    white-space: normal;
}

.calendar-modal-jobsite-card .calendar-modal-check[b-zku8ulalvl] {
    width: 18px;
    height: 18px;
    border-radius: 6px;
}

.calendar-modal-empty[b-zku8ulalvl] {
    border-radius: 8px;
    padding: 10px 11px;
    color: #64748b;
    background: #f8fafc;
    font-size: 0.84rem;
    font-weight: 800;
}

.calendar-modal-validation[b-zku8ulalvl] {
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #bfdbfe;
    border-left: 4px solid #145da0;
    border-radius: 8px;
    padding: 7px 10px;
    color: #0f4c81;
    background: linear-gradient(90deg, #f0f7ff 0%, #ffffff 100%);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.25;
}

.calendar-modal-validation[b-zku8ulalvl]::before {
    content: "";
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #145da0;
    box-shadow: 0 0 0 4px rgba(20, 93, 160, 0.12);
}

.calendar-modal-footer[b-zku8ulalvl] {
    position: fixed;
    top: calc(50% + min(372px, calc((100vh - 56px) / 2 + 12px)));
    left: 50%;
    z-index: var(--calendar-z-appointment-panel, 2400);
    width: min(920px, calc(100vw - 32px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    transform: translateX(-50%);
    pointer-events: none;
}

.calendar-modal-footer--with-panel[b-zku8ulalvl] {
    left: calc(50% + 168px);
    width: min(820px, calc(100vw - 376px));
}

.calendar-modal-action-row[b-zku8ulalvl] {
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    align-self: center;
    align-items: stretch;
    gap: 8px;
    border: 1px solid #dbe3ec;
    border-radius: 12px;
    padding: 8px;
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.12);
    pointer-events: auto;
}

.calendar-modal-action-row--one-action[b-zku8ulalvl] {
    grid-template-columns: minmax(0, 1fr);
}

.calendar-modal-action-row--two-actions[b-zku8ulalvl] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.calendar-modal-action-row--three-actions[b-zku8ulalvl] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.calendar-modal-action[b-zku8ulalvl] {
    width: 100%;
    height: 32px;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    border-radius: 9px;
    padding: 0 9px;
    color: #ffffff;
    background: #145da0;
    cursor: pointer;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 900;
    transition: background 0.15s, opacity 0.15s, transform 0.12s;
}

.calendar-modal-action svg[b-zku8ulalvl] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.calendar-modal-action span[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-modal-action:hover[b-zku8ulalvl],
.calendar-modal-action:focus-visible[b-zku8ulalvl] {
    background: #0f4c81;
    outline: none;
}

.calendar-modal-action:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-modal-action:disabled[b-zku8ulalvl] {
    cursor: not-allowed;
    opacity: 0.48;
}

.calendar-modal-action--danger[b-zku8ulalvl] {
    border: 1px solid #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.calendar-modal-action--danger:hover[b-zku8ulalvl],
.calendar-modal-action--danger:focus-visible[b-zku8ulalvl] {
    color: #ffffff;
    background: #dc2626;
}

.calendar-modal-action--series-danger[b-zku8ulalvl] {
    border: 1px solid #fecaca;
    color: #b91c1c;
    background: #fff5f5;
}

.calendar-modal-action--series-danger:hover[b-zku8ulalvl],
.calendar-modal-action--series-danger:focus-visible[b-zku8ulalvl] {
    color: #ffffff;
    background: #dc2626;
}

.calendar-modal-action--ghost[b-zku8ulalvl] {
    color: #0f172a;
    background: #eef2f6;
}

.calendar-modal-action--ghost:hover[b-zku8ulalvl],
.calendar-modal-action--ghost:focus-visible[b-zku8ulalvl] {
    color: #1d4ed8;
    background: #dbeafe;
}

.calendar-modal-save-btn[b-zku8ulalvl] {
    width: 100%;
    min-width: 0;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: none;
    border-radius: 9px;
    padding: 0 12px;
    color: #ffffff;
    background: #007aff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.18);
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
}

.calendar-modal-save-btn:hover[b-zku8ulalvl],
.calendar-modal-save-btn:focus-visible[b-zku8ulalvl] {
    opacity: 0.92;
    box-shadow: 0 4px 14px rgba(0, 122, 255, 0.24);
    outline: none;
}

.calendar-modal-save-btn:active[b-zku8ulalvl] {
    transform: translateY(1px);
}

.calendar-modal-save-btn svg[b-zku8ulalvl] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.calendar-modal-save-btn span[b-zku8ulalvl] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-appointment-sidebar .calendar-modal-header[b-zku8ulalvl] {
    grid-template-columns: auto minmax(0, 1fr);
}

.calendar-appointment-sidebar .calendar-modal-header-actions[b-zku8ulalvl] {
    align-items: center;
}

.calendar-appointment-sidebar-header .calendar-edit-scope[b-zku8ulalvl],
.calendar-appointment-sidebar-header .calendar-series-head[b-zku8ulalvl] {
    display: none;
}

.calendar-time-block-head[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.calendar-time-block-head > strong[b-zku8ulalvl] {
    min-width: 0;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
    line-height: 1.1;
}

.calendar-time-series-actions[b-zku8ulalvl] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.calendar-time-series-actions .calendar-edit-scope[b-zku8ulalvl] {
    min-height: 28px;
    border-radius: 7px;
    padding: 0 8px;
    font-size: 0.68rem;
}

.calendar-time-series-actions .calendar-series-head[b-zku8ulalvl] {
    width: auto;
}

.calendar-time-series-actions .calendar-series-head-btn[b-zku8ulalvl] {
    width: auto;
    min-height: 28px;
    grid-template-columns: 18px auto;
    gap: 5px;
    border-radius: 7px;
    padding: 0 8px;
}

.calendar-time-series-actions .calendar-series-icon[b-zku8ulalvl] {
    width: 18px;
    height: 18px;
}

.calendar-time-series-actions .calendar-series-icon svg[b-zku8ulalvl] {
    width: 15px;
    height: 15px;
}

.calendar-time-series-actions .calendar-series-toggle-text strong[b-zku8ulalvl] {
    font-size: 0.68rem;
}

.calendar-time-series-actions .calendar-series-toggle-text small[b-zku8ulalvl] {
    display: none;
}

.calendar-appointment-sidebar .calendar-modal-body[b-zku8ulalvl] {
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 2px;
}

.calendar-appointment-sidebar .calendar-modal-block--time[b-zku8ulalvl] {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 10px;
    border: 1px solid #dbe3ec;
    padding: 12px;
    background: #f8fafc;
}

.calendar-appointment-sidebar .calendar-modal-time-grid[b-zku8ulalvl] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.calendar-appointment-sidebar .calendar-modal-block--selection[b-zku8ulalvl] {
    min-height: 0;
    overflow: visible;
    gap: 9px;
}

.calendar-appointment-sidebar .calendar-modal-tabs[b-zku8ulalvl] {
    min-height: 0;
    border-radius: 8px;
}

.calendar-appointment-sidebar .calendar-modal-tab-bar[b-zku8ulalvl] {
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
}

.calendar-appointment-sidebar .calendar-modal-tab-list[b-zku8ulalvl] {
    flex: 1 1 0;
    width: auto;
}

.calendar-appointment-sidebar .calendar-modal-tab[b-zku8ulalvl] {
    flex: 1 1 0;
    max-width: none;
    min-height: 32px;
    padding: 0 6px;
}

.calendar-appointment-sidebar .calendar-modal-tab span[b-zku8ulalvl] {
    font-size: 0.68rem;
}

.calendar-appointment-sidebar .calendar-modal-jobsite-list[b-zku8ulalvl],
.calendar-appointment-sidebar .calendar-modal-employee-list[b-zku8ulalvl] {
    max-height: none;
    min-height: 220px;
    padding-right: 2px;
}

.calendar-appointment-sidebar .calendar-modal-jobsite-list[b-zku8ulalvl] {
    gap: 10px;
}

.calendar-appointment-sidebar .calendar-modal-jobsite-group[b-zku8ulalvl] {
    border-radius: 10px;
    padding: 8px;
}

.calendar-appointment-sidebar .calendar-modal-jobsite-group-title[b-zku8ulalvl] {
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.calendar-appointment-sidebar .calendar-modal-jobsite-group-marker[b-zku8ulalvl] {
    width: 32px;
    height: 32px;
    border-radius: 8px;
}

.calendar-appointment-sidebar .calendar-modal-jobsite-grid[b-zku8ulalvl] {
    grid-template-columns: 1fr;
}

.calendar-appointment-sidebar .calendar-modal-option--jobsite.calendar-modal-jobsite-card[b-zku8ulalvl] {
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 7px 8px;
}

.calendar-appointment-sidebar .calendar-modal-employee-list[b-zku8ulalvl] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.calendar-appointment-sidebar .calendar-modal-employee-group[b-zku8ulalvl] {
    margin-bottom: 0;
}

.calendar-appointment-sidebar .calendar-modal-employee-group-title[b-zku8ulalvl] {
    min-height: 28px;
    padding: 5px 9px 5px 10px;
}

.calendar-appointment-sidebar .calendar-modal-employee-list .calendar-modal-option[b-zku8ulalvl] {
    grid-template-columns: 22px 30px minmax(0, 1fr);
    min-height: 42px;
    gap: 8px;
    padding: 6px 9px;
}

.calendar-appointment-sidebar .calendar-modal-employee-list .calendar-modal-option-main strong[b-zku8ulalvl] {
    font-size: 0.8rem;
}

.calendar-appointment-sidebar .calendar-modal-employee-list .calendar-modal-option-main small[b-zku8ulalvl] {
    font-size: 0.66rem;
}

.calendar-appointment-sidebar .calendar-modal-employee-list .calendar-modal-avatar[b-zku8ulalvl] {
    width: 28px;
    height: 28px;
    font-size: 0.68rem;
}

.calendar-appointment-sidebar .calendar-modal-option--jobsite.calendar-modal-jobsite-card[b-zku8ulalvl] {
    grid-template-columns: minmax(0, 1fr) auto;
}

.calendar-appointment-sidebar .calendar-modal-employee-list .calendar-modal-option-meta[b-zku8ulalvl] {
    justify-self: start;
    grid-column: 2;
}

.calendar-appointment-sidebar .calendar-series-popup[b-zku8ulalvl] {
    position: fixed;
    top: 126px;
    right: 462px;
    left: auto;
    width: min(390px, calc(100vw - 492px));
    max-height: calc(100vh - 154px);
}

.calendar-modal-footer[b-zku8ulalvl],
.calendar-modal-footer--with-panel[b-zku8ulalvl] {
    top: auto;
    right: 0;
    bottom: 0;
    left: auto;
    z-index: var(--calendar-z-appointment-panel, 2400);
    width: min(430px, 100vw);
    transform: none;
}

.calendar-modal-action-row[b-zku8ulalvl] {
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: 0;
    box-shadow: 0 -12px 28px rgba(15, 23, 42, 0.08);
}

@media (max-width: 820px) {
    .calendar-toolbar[b-zku8ulalvl] {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        padding: 10px 12px 9px;
    }

    .calendar-toolbar-actions[b-zku8ulalvl] {
        justify-content: flex-start;
    }

    .calendar-plan-btn[b-zku8ulalvl] {
        flex: 1 1 180px;
    }

    .calendar-title-block h1[b-zku8ulalvl] {
        font-size: 1.2rem;
    }

    .calendar-board[b-zku8ulalvl] {
        padding: 8px;
    }

    .calendar-appointment-sidebar[b-zku8ulalvl] {
        top: 152px;
        right: 0;
        bottom: 0;
        width: min(420px, 100vw);
    }

    .calendar-appointment-sidebar-body[b-zku8ulalvl] {
        padding-bottom: 132px;
    }

    .calendar-appointment-sidebar .calendar-series-popup[b-zku8ulalvl] {
        top: 164px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 184px);
    }

    .calendar-modal-footer[b-zku8ulalvl],
    .calendar-modal-footer--with-panel[b-zku8ulalvl] {
        right: 0;
        bottom: 0;
        left: auto;
        width: min(420px, 100vw);
        transform: none;
    }

    .calendar-modal-header[b-zku8ulalvl],
    .calendar-modal-block--time[b-zku8ulalvl] {
        grid-template-columns: 1fr;
    }

    .calendar-appointment-sidebar .calendar-modal-header[b-zku8ulalvl] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .calendar-series-head[b-zku8ulalvl] {
        justify-self: stretch;
        width: 100%;
    }

    .calendar-series-popup[b-zku8ulalvl] {
        right: 0;
        left: auto;
        width: min(500px, calc(100vw - 24px));
        max-height: min(460px, calc(100vh - 102px));
    }

    .calendar-series-panel[b-zku8ulalvl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-series-weekdays[b-zku8ulalvl] {
        grid-column: 1 / -1;
    }

    .calendar-series-preview[b-zku8ulalvl] {
        grid-column: 1 / -1;
    }

    .calendar-modal-tab-bar[b-zku8ulalvl] {
        flex-wrap: wrap;
        padding: 6px 8px 0;
    }

    .calendar-custom-address-grid[b-zku8ulalvl] {
        grid-template-columns: 1fr;
    }

    .calendar-modal-employee-list[b-zku8ulalvl] {
        max-height: 300px;
    }

}

@media (max-width: 560px) {
    .calendar-toolbar-actions[b-zku8ulalvl] {
        gap: 8px;
    }

    .calendar-range-controls[b-zku8ulalvl] {
        width: 100%;
        justify-content: space-between;
    }

    .calendar-view-switch[b-zku8ulalvl] {
        width: 100%;
    }

    .calendar-date-picker-wrap[b-zku8ulalvl] {
        flex: 1;
    }

    .calendar-today-btn[b-zku8ulalvl] {
        width: 100%;
        min-width: 0;
    }

    .calendar-view-btn[b-zku8ulalvl] {
        flex: 1;
        min-width: 0;
        padding: 0 7px;
    }

    .calendar-plan-btn[b-zku8ulalvl] {
        width: 100%;
    }

    .calendar-date-picker[b-zku8ulalvl] {
        position: fixed;
        top: 58px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 74px);
    }

    .calendar-picker-month-select[b-zku8ulalvl],
    .calendar-picker-year-select[b-zku8ulalvl] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .calendar-picker-level-btn[b-zku8ulalvl] {
        max-width: 100%;
        padding: 0 8px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .calendar-grid[b-zku8ulalvl] {
        --calendar-people-width: 152px;
        --calendar-multiweek-day-width: max(92px, calc((100vw - var(--calendar-people-width) - 24px) / 7));
    }

    .calendar-hour-head span[b-zku8ulalvl] {
        font-size: 0.5rem;
    }

    .calendar-hour-head span:not(:nth-child(3n+1))[b-zku8ulalvl] {
        color: transparent;
    }

    .calendar-corner[b-zku8ulalvl] {
        padding: 0 10px;
    }

    .calendar-corner span[b-zku8ulalvl] {
        font-size: 0.64rem;
    }

    .calendar-person[b-zku8ulalvl] {
        gap: 8px;
        padding: 0 10px;
    }

    .calendar-person-avatar[b-zku8ulalvl] {
        width: 30px;
        height: 30px;
        font-size: 0.7rem;
    }

    .calendar-modal-section-toggle[b-zku8ulalvl] {
        grid-template-columns: 1fr;
    }

    .calendar-series-panel[b-zku8ulalvl] {
        grid-template-columns: 1fr;
    }

    .calendar-series-popup[b-zku8ulalvl] {
        position: fixed;
        top: 64px;
        right: 10px;
        left: 10px;
        width: auto;
        max-height: calc(100vh - 82px);
    }

    .calendar-series-field--number[b-zku8ulalvl] {
        max-width: none;
    }

    .calendar-series-note[b-zku8ulalvl] {
        padding-left: 10px;
    }

    .calendar-appointment-preview[b-zku8ulalvl] {
        left: clamp(166px, var(--preview-x), calc(100vw - 166px));
        width: min(324px, calc(100vw - 16px));
        max-width: calc(100vw - 16px);
    }

    .calendar-appointment-preview-actions[b-zku8ulalvl] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .calendar-modal-action-row[b-zku8ulalvl] {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    }

    .calendar-appointment-audit[b-zku8ulalvl] {
        flex-direction: column;
        align-items: flex-start;
        grid-template-columns: 1fr;
        flex-basis: 100%;
        max-width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        padding-right: 0;
        padding-bottom: 8px;
        white-space: normal;
    }

    .calendar-appointment-audit span:last-child[b-zku8ulalvl] {
        text-align: left;
    }

    .calendar-modal-footer[b-zku8ulalvl],
    .calendar-modal-footer--with-panel[b-zku8ulalvl] {
        top: auto;
        right: 0;
        bottom: 0;
        left: auto;
        width: min(420px, 100vw);
        transform: none;
    }

    .calendar-modal-option-list--compact .calendar-modal-option[b-zku8ulalvl],
    .calendar-modal-option--jobsite[b-zku8ulalvl] {
        grid-template-columns: 22px minmax(0, 1fr);
    }

    .calendar-modal-option--jobsite.calendar-modal-jobsite-card[b-zku8ulalvl] {
        grid-template-columns: minmax(0, 1fr);
    }

    .calendar-modal-jobsite-group-title[b-zku8ulalvl] {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .calendar-modal-option-meta[b-zku8ulalvl] {
        max-width: none;
    }
}

@media (max-width: 680px) {
    .calendar-jobsite-panel[b-zku8ulalvl] {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: 10px;
        left: 10px;
        z-index: var(--calendar-z-jobsite-panel, 2401);
        width: auto;
        max-height: min(42vh, calc(100vh - 24px));
        transform: none;
        padding-bottom: 18px;
    }

    .calendar-jobsite-panel--minimized[b-zku8ulalvl] {
        top: auto;
        right: 10px;
        bottom: 10px;
        left: 10px;
        width: auto;
        height: auto;
        max-height: none;
        padding-bottom: 9px;
    }

    .calendar-status-backdrop[b-zku8ulalvl] {
        z-index: var(--calendar-z-jobsite-menu-backdrop, 2402);
    }

    .calendar-status-menu[b-zku8ulalvl] {
        z-index: var(--calendar-z-jobsite-menu, 2403);
    }
}
/* /Components/Pages/Calendar/CalendarDateTimePicker.razor.rz.scp.css */
.calendar-dtp[b-7ipr7s47z0] {
    position: relative;
    min-width: 0;
}

.calendar-dtp-field[b-7ipr7s47z0] {
    width: 100%;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px 10px;
    color: #0f172a;
    background: #ffffff;
    font: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.calendar-dtp-field:hover[b-7ipr7s47z0],
.calendar-dtp-field:focus-visible[b-7ipr7s47z0] {
    border-color: #1d4ed8;
    background: #f8fbff;
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
    outline: none;
}

.calendar-dtp-field span[b-7ipr7s47z0] {
    color: #64748b;
    font-size: 0.64rem;
    font-weight: 950;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.calendar-dtp-field strong[b-7ipr7s47z0] {
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 900;
    line-height: 1.15;
}

.calendar-dtp-backdrop[b-7ipr7s47z0] {
    position: fixed;
    inset: 0;
    z-index: 2198;
    border: none;
    padding: 0;
    background: transparent;
    cursor: default;
}

.calendar-dtp-popup[b-7ipr7s47z0] {
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    z-index: 2199;
    width: min(392px, calc(100vw - 42px));
    max-width: calc(100vw - 28px);
    max-height: min(286px, calc(100vh - 112px));
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 18px 48px rgba(15, 23, 42, 0.22), 0 7px 18px rgba(15, 23, 42, 0.1);
}

.calendar-dtp-layout[b-7ipr7s47z0] {
    display: grid;
    grid-template-columns: minmax(0, 274px) 116px;
    align-items: stretch;
    height: min(286px, calc(100vh - 112px));
}

.calendar-dtp-calendar[b-7ipr7s47z0],
.calendar-dtp-time[b-7ipr7s47z0] {
    min-width: 0;
    min-height: 0;
    background: #ffffff;
}

.calendar-dtp-calendar[b-7ipr7s47z0] {
    border-right: 1px solid #e2e8f0;
}

.calendar-dtp-picker-head[b-7ipr7s47z0] {
    height: 40px;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 5px;
    border-bottom: 1px solid #e2e8f0;
    padding: 5px 7px;
    background: #eef2f6;
}

.calendar-dtp-picker-head strong[b-7ipr7s47z0] {
    min-width: 0;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.83rem;
    font-weight: 950;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-dtp-icon-btn[b-7ipr7s47z0] {
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    color: #0f172a;
    background: #e2e8f0;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

.calendar-dtp-icon-btn:hover[b-7ipr7s47z0],
.calendar-dtp-icon-btn:focus-visible[b-7ipr7s47z0] {
    color: #1d4ed8;
    background: #dbeafe;
    outline: none;
}

.calendar-dtp-weekdays[b-7ipr7s47z0],
.calendar-dtp-days[b-7ipr7s47z0] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-dtp-weekdays[b-7ipr7s47z0] {
    height: 26px;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
    color: #64748b;
    background: #ffffff;
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.05em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-dtp-days[b-7ipr7s47z0] {
    gap: 3px;
    padding: 8px;
}

.calendar-dtp-day[b-7ipr7s47z0] {
    aspect-ratio: 1;
    min-width: 0;
    border: none;
    border-radius: 6px;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-size: 0.75rem;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.14s, color 0.14s, transform 0.12s;
}

.calendar-dtp-day:hover[b-7ipr7s47z0],
.calendar-dtp-day:focus-visible[b-7ipr7s47z0] {
    color: #0f172a;
    background: #eef2f7;
    outline: none;
}

.calendar-dtp-day:active[b-7ipr7s47z0] {
    transform: translateY(1px);
}

.calendar-dtp-day--outside[b-7ipr7s47z0] {
    color: #94a3b8;
}

.calendar-dtp-day--today[b-7ipr7s47z0] {
    color: #be123c;
}

.calendar-dtp-day--selected[b-7ipr7s47z0] {
    color: #ffffff;
    background: #1d4ed8;
}

.calendar-dtp-day--selected:hover[b-7ipr7s47z0],
.calendar-dtp-day--selected:focus-visible[b-7ipr7s47z0] {
    color: #ffffff;
    background: #1d4ed8;
}

.calendar-dtp-time[b-7ipr7s47z0] {
    height: 100%;
}

.calendar-dtp-time-list[b-7ipr7s47z0] {
    height: 100%;
    overflow-y: auto;
    padding: 7px;
}

.calendar-dtp-time-btn[b-7ipr7s47z0] {
    width: 100%;
    height: 30px;
    border: none;
    border-radius: 6px;
    color: #0f172a;
    background: transparent;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

.calendar-dtp-time-btn:hover[b-7ipr7s47z0],
.calendar-dtp-time-btn:focus-visible[b-7ipr7s47z0] {
    color: #1d4ed8;
    background: #dbeafe;
    outline: none;
}

.calendar-dtp-time-btn--selected[b-7ipr7s47z0] {
    color: #ffffff;
    background: #1d4ed8;
}

.calendar-dtp-time-btn--selected:hover[b-7ipr7s47z0],
.calendar-dtp-time-btn--selected:focus-visible[b-7ipr7s47z0] {
    color: #ffffff;
    background: #1d4ed8;
}

@media (max-width: 560px) {
    .calendar-dtp-popup[b-7ipr7s47z0] {
        width: min(360px, calc(100vw - 28px));
    }

    .calendar-dtp-layout[b-7ipr7s47z0] {
        grid-template-columns: minmax(0, 1fr) 104px;
    }
}
/* /Components/Pages/ChangePassword.razor.rz.scp.css */
.change-page[b-kf72d42gsk] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: #f5f5f7;
}

.change-panel[b-kf72d42gsk] {
    width: min(430px, 100%);
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    background: white;
    border: 1px solid #e5e5ea;
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.14);
}

.change-header[b-kf72d42gsk] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.change-icon[b-kf72d42gsk] {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: #007aff;
    background: rgba(0,122,255,0.1);
}

.change-eyebrow[b-kf72d42gsk] {
    display: block;
    margin-bottom: 3px;
    color: #007aff;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
}

.change-header h1[b-kf72d42gsk] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1.35rem;
    font-weight: 760;
}

.change-error[b-kf72d42gsk] {
    color: #b42318;
    background: #fff0ef;
    border: 1px solid #ffccc9;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.change-field[b-kf72d42gsk] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.change-field span[b-kf72d42gsk] {
    color: #3c3c43;
    font-size: 0.84rem;
    font-weight: 700;
}

.change-field input[b-kf72d42gsk] {
    width: 100%;
    border: 1.5px solid #d1d1d6;
    border-radius: 10px;
    padding: 11px 50px 11px 12px;
    font: inherit;
}

.change-password-wrap[b-kf72d42gsk] {
    position: relative;
    display: flex;
    align-items: center;
}

.change-password-wrap .password-toggle[b-kf72d42gsk] {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    color: #636366;
    background: transparent;
    cursor: pointer;
}

.password-toggle:hover[b-kf72d42gsk] {
    color: #1c1c1e;
    background: #f2f2f7;
}

.password-toggle:focus-visible[b-kf72d42gsk] {
    outline: 3px solid rgba(0,122,255,0.22);
    outline-offset: 1px;
}

.password-toggle .password-toggle-hide[b-kf72d42gsk] {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-show[b-kf72d42gsk] {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-hide[b-kf72d42gsk] {
    display: block;
}

.change-field input:focus[b-kf72d42gsk] {
    border-color: #007aff;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.change-submit[b-kf72d42gsk] {
    min-height: 48px;
    border: none;
    border-radius: 12px;
    color: white;
    background: #007aff;
    font: inherit;
    font-size: 1rem;
    font-weight: 760;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(0,122,255,0.24);
}

.change-submit:hover[b-kf72d42gsk] {
    background: #006ee6;
}
/* /Components/Pages/Employee/EmployeeAppointments.razor.rz.scp.css */
.employee-appointments-page[b-rigy3u38ab] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.8);
    --employee-soft: rgba(248, 250, 252, 0.88);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(30px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

/* Wenn der Chat-Tab aktiv ist: Page wird zu flex column mit fixer Viewport-Höhe,
   damit die Chat-Karte exakt den Restplatz unter Topbar+Tabs einnimmt
   (statt mit calc() Werte zu raten und am Ende eine Seiten-Scrollbar zu bekommen). */
.employee-appointments-page--chat-active[b-rigy3u38ab] {
    height: 100dvh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.employee-appointments-page--chat-active .employee-appointments-shell[b-rigy3u38ab] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.employee-appointments-shell[b-rigy3u38ab] {
    width: min(460px, 100%);
    margin: 0 auto;
}

.employee-appointments-topbar[b-rigy3u38ab],
.employee-appointments-empty[b-rigy3u38ab],
.employee-appointment-detail[b-rigy3u38ab] {
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-appointments-topbar[b-rigy3u38ab] {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 8px;
}

.employee-appointments-back[b-rigy3u38ab] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 16px;
    padding: 0;
    color: var(--employee-primary);
    background: #ffffff;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-appointments-back:hover[b-rigy3u38ab],
.employee-appointments-back:focus-visible[b-rigy3u38ab] {
    outline: none;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-appointments-kicker[b-rigy3u38ab],
.employee-appointments-user[b-rigy3u38ab] {
    display: block;
    color: var(--employee-muted);
    font-size: 0.64rem;
    font-weight: 900;
}

.employee-appointments-kicker[b-rigy3u38ab] {
    text-transform: uppercase;
}

.employee-appointments-topbar h1[b-rigy3u38ab] {
    margin: 2px 0 0;
    color: var(--employee-ink);
    font-size: clamp(1.08rem, 5.4vw, 1.38rem);
    font-weight: 950;
    line-height: 1.06;
}

.employee-appointments-user[b-rigy3u38ab] {
    margin-top: 2px;
    font-size: 0.78rem;
    font-weight: 800;
}

.employee-appointments-empty[b-rigy3u38ab] {
    display: grid;
    gap: 4px;
    padding: 16px;
}

.employee-appointments-empty strong[b-rigy3u38ab] {
    color: var(--employee-ink);
    font-size: 0.94rem;
    font-weight: 950;
}

.employee-appointments-empty span[b-rigy3u38ab] {
    color: var(--employee-muted);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1.36;
}

.employee-appointment-detail[b-rigy3u38ab] {
    display: grid;
    gap: 12px;
    padding: 12px;
    animation: employeeAppointmentReveal-b-rigy3u38ab 360ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

@keyframes employeeAppointmentReveal-b-rigy3u38ab {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.employee-appointment-field span[b-rigy3u38ab],
.employee-appointment-time span[b-rigy3u38ab],
.employee-appointment-team span[b-rigy3u38ab] {
    color: var(--employee-muted);
    font-size: 0.64rem;
    font-weight: 950;
    text-transform: uppercase;
}

.employee-appointment-time[b-rigy3u38ab] {
    display: grid;
    gap: 4px;
    border-radius: 18px;
    padding: 12px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-appointment-time strong[b-rigy3u38ab] {
    color: var(--employee-primary);
    font-size: 1rem;
    font-weight: 950;
    line-height: 1.2;
}

.employee-appointment-map[b-rigy3u38ab] {
    min-height: 318px;
    border-radius: 22px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
    overflow: hidden;
}

.employee-appointment-map-head[b-rigy3u38ab] {
    display: grid;
    gap: 4px;
    margin: 10px;
    border-radius: 18px;
    padding: 12px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-appointment-map-head span[b-rigy3u38ab] {
    color: var(--employee-primary);
    font-size: 0.68rem;
    font-weight: 950;
}

.employee-appointment-map-head strong[b-rigy3u38ab] {
    color: var(--employee-ink);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.employee-appointment-map iframe[b-rigy3u38ab] {
    width: 100%;
    height: 270px;
    display: block;
    border: 0;
    filter: saturate(0.96) contrast(1.02);
}

.employee-appointment-customer[b-rigy3u38ab],
.employee-appointment-team[b-rigy3u38ab] {
    display: grid;
    gap: 8px;
}

.employee-appointment-contact-grid[b-rigy3u38ab] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-appointment-field[b-rigy3u38ab],
.employee-appointment-team[b-rigy3u38ab] {
    border-radius: 18px;
    padding: 12px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-appointment-field[b-rigy3u38ab] {
    display: grid;
    gap: 4px;
}

.employee-appointment-field strong[b-rigy3u38ab] {
    min-width: 0;
    color: var(--employee-ink);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.28;
    overflow-wrap: anywhere;
}

.employee-appointment-field a[b-rigy3u38ab] {
    color: var(--employee-primary);
    text-decoration: none;
}

.employee-appointment-team div[b-rigy3u38ab] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.employee-appointment-team strong[b-rigy3u38ab] {
    border-radius: 999px;
    padding: 7px 10px;
    color: var(--employee-ink);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
    font-size: 0.75rem;
    font-weight: 900;
}

/* --------------------------------------------------------------
   Termin / Nachrichten Tabs — frei stehend, kein Container, kein Linien-Rahmen
-------------------------------------------------------------- */
.employee-tab-bar[b-rigy3u38ab] {
    flex-shrink: 0;
    display: flex;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.employee-tab-list[b-rigy3u38ab] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.employee-tab[b-rigy3u38ab] {
    position: relative;
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 36px;
    padding: 0 14px;
    border: 0;
    border-radius: 9px 9px 0 0;
    background: transparent;
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 900;
    transition: color 0.15s, background 0.15s;
}

.employee-tab span[b-rigy3u38ab] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-tab em[b-rigy3u38ab] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.08);
    color: #64748b;
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.employee-tab:hover[b-rigy3u38ab],
.employee-tab:focus-visible[b-rigy3u38ab] {
    color: #0f172a;
    outline: none;
}

.employee-tab--active[b-rigy3u38ab] {
    color: #0f172a;
    background: var(--employee-tab-active-bg, #ffffff);
    border: 1px solid var(--employee-line);
    border-bottom: 0;
    margin-bottom: -1px;
    z-index: 2;
}

.employee-tab--active:hover[b-rigy3u38ab],
.employee-tab--active:focus-visible[b-rigy3u38ab] {
    color: #0f172a;
    background: var(--employee-tab-active-bg, #ffffff);
}

.employee-tab--active em[b-rigy3u38ab] {
    background: rgba(37, 99, 235, 0.16);
    color: var(--employee-primary);
}

/* --------------------------------------------------------------
   Card unter Tabs: oben flach, BG matched die Tab-BG, damit Border und
   Fläche des aktiven Tabs nahtlos in die Card übergehen.
-------------------------------------------------------------- */
.employee-appointment-detail--with-tabs[b-rigy3u38ab] {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background: var(--employee-tab-active-bg, #ffffff);
}

/* Chat-Variante: nimmt den verbleibenden Platz unter Topbar+Tabs */
.employee-appointment-detail--chat[b-rigy3u38ab] {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.employee-appointment-detail--chat[b-rigy3u38ab]  .chat-area {
    flex: 1;
    min-height: 0;
    border-radius: inherit;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

@media (max-width: 360px) {
    .employee-appointments-page[b-rigy3u38ab] {
        padding-right: 10px;
        padding-left: 10px;
    }

    .employee-appointment-contact-grid[b-rigy3u38ab] {
        grid-template-columns: 1fr;
    }

    .employee-tab[b-rigy3u38ab] {
        font-size: 0.72rem;
        padding: 0 10px;
    }
}
/* /Components/Pages/Employee/EmployeeDatePicker.razor.rz.scp.css */
.employee-date-picker[b-r3a3uqum44] {
    position: relative;
    min-width: 0;
}

.employee-picker-display[b-r3a3uqum44] {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: center;
    border: 0;
    border-radius: 18px;
    padding: 12px 13px;
    color: var(--employee-ink, #111827);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: inset 0 0 0 1px var(--employee-line, rgba(37, 99, 235, 0.14)), 0 14px 30px rgba(15, 23, 42, 0.08);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-picker-display[b-r3a3uqum44]::after {
    content: "";
    width: 9px;
    height: 9px;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    border-right: 2px solid var(--employee-primary, #2563eb);
    border-bottom: 2px solid var(--employee-primary, #2563eb);
    transform: rotate(45deg) translateY(-2px);
}

.employee-picker-display span[b-r3a3uqum44],
.employee-picker-display strong[b-r3a3uqum44],
.employee-picker-display small[b-r3a3uqum44] {
    grid-column: 1;
}

.employee-picker-display span[b-r3a3uqum44] {
    color: var(--employee-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-picker-display strong[b-r3a3uqum44] {
    color: var(--employee-ink, #111827);
    font-size: 1rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.employee-picker-action[b-r3a3uqum44] {
    width: fit-content;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    color: var(--employee-primary, #2563eb);
    background: rgba(37, 99, 235, 0.1);
    font-size: 0.66rem;
    font-weight: 900;
}

.employee-picker-display:hover[b-r3a3uqum44],
.employee-picker-display:focus-visible[b-r3a3uqum44] {
    outline: none;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.32), 0 18px 34px rgba(15, 23, 42, 0.11);
}

.employee-picker-display:disabled[b-r3a3uqum44] {
    cursor: not-allowed;
    opacity: 0.56;
    transform: none;
}

.employee-date-picker--compact[b-r3a3uqum44] {
    width: 42px;
    flex-shrink: 0;
}

.employee-date-picker--compact .employee-picker-display[b-r3a3uqum44] {
    width: 42px;
    min-height: 42px;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 0;
    border-radius: 16px;
    padding: 5px 4px 4px;
}

.employee-date-picker--compact .employee-picker-display[b-r3a3uqum44]::after {
    content: none;
}

.employee-date-picker--compact .employee-picker-display span[b-r3a3uqum44],
.employee-date-picker--compact .employee-picker-display strong[b-r3a3uqum44] {
    grid-column: auto;
}

.employee-picker-compact-icon[b-r3a3uqum44] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--employee-primary, #2563eb);
}

.employee-picker-compact-icon svg[b-r3a3uqum44] {
    width: 15px;
    height: 15px;
}

.employee-date-picker--compact .employee-picker-display strong[b-r3a3uqum44] {
    grid-column: auto;
    color: var(--employee-primary, #2563eb);
    font-size: 0.78rem;
    line-height: 1;
}

.employee-picker-backdrop[b-r3a3uqum44] {
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.employee-picker-panel[b-r3a3uqum44] {
    position: absolute;
    z-index: 31;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border-radius: 22px;
    padding: 10px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line, rgba(37, 99, 235, 0.14)), 0 24px 60px rgba(15, 23, 42, 0.2);
}

.employee-date-picker--compact .employee-picker-panel[b-r3a3uqum44] {
    width: min(316px, calc(100vw - 28px));
    right: 0;
    left: auto;
}

.employee-date-picker--open-above .employee-picker-panel[b-r3a3uqum44] {
    top: auto;
    bottom: calc(100% + 8px);
}

.employee-picker-panel-head[b-r3a3uqum44] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.employee-picker-panel-head strong[b-r3a3uqum44] {
    color: var(--employee-ink, #111827);
    font-size: 0.9rem;
    font-weight: 950;
    text-align: center;
}

.employee-picker-panel-head button[b-r3a3uqum44] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 13px;
    color: var(--employee-primary, #2563eb);
    background: rgba(37, 99, 235, 0.09);
    font: inherit;
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), background 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-picker-panel-head button:hover[b-r3a3uqum44],
.employee-picker-panel-head button:focus-visible[b-r3a3uqum44] {
    outline: none;
    transform: translateY(-1px);
    background: rgba(37, 99, 235, 0.14);
}

.employee-picker-panel-head button:active[b-r3a3uqum44] {
    transform: scale(0.96);
}

.employee-picker-panel-head svg[b-r3a3uqum44] {
    width: 19px;
    height: 19px;
}

.employee-date-weekdays[b-r3a3uqum44],
.employee-date-grid[b-r3a3uqum44] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.employee-date-weekdays[b-r3a3uqum44] {
    margin-bottom: 5px;
}

.employee-date-weekdays span[b-r3a3uqum44] {
    color: var(--employee-muted, #64748b);
    font-size: 0.6rem;
    font-weight: 900;
    text-align: center;
    text-transform: uppercase;
}

.employee-date-day[b-r3a3uqum44] {
    position: relative;
    aspect-ratio: 1;
    min-width: 0;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 2px;
    border: 0;
    border-radius: 12px;
    color: var(--employee-ink, #111827);
    background: transparent;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform 220ms cubic-bezier(0.32, 0.72, 0, 1), background 220ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-date-day span[b-r3a3uqum44],
.employee-date-day small[b-r3a3uqum44] {
    display: block;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-date-day small[b-r3a3uqum44] {
    color: currentColor;
    font-size: 0.52rem;
    font-weight: 950;
    line-height: 1;
    opacity: 0.86;
}

.employee-date-day:hover[b-r3a3uqum44],
.employee-date-day:focus-visible[b-r3a3uqum44] {
    outline: none;
    transform: translateY(-1px);
    background: rgba(37, 99, 235, 0.1);
}

.employee-date-day--muted[b-r3a3uqum44] {
    color: #a5b4c6;
}

.employee-date-day--weekend[b-r3a3uqum44] {
    color: #0891b2;
}

.employee-date-day--work[b-r3a3uqum44] {
    color: #145da0;
    background: #e8f1fa;
}

.employee-date-day--vacation[b-r3a3uqum44] {
    color: #166534;
    background: #dcfce7;
}

.employee-date-day--sick[b-r3a3uqum44] {
    color: #991b1b;
    background: #fee2e2;
}

.employee-date-day--overtime[b-r3a3uqum44] {
    color: #145da0;
    background: #e8f1fa;
}

.employee-date-day--pending[b-r3a3uqum44]::after {
    content: "";
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #f59e0b;
}

.employee-date-day--today[b-r3a3uqum44] {
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24);
}

.employee-date-day--selected[b-r3a3uqum44] {
    color: #ffffff;
    background: var(--employee-primary, #2563eb);
    box-shadow: 0 10px 18px rgba(37, 99, 235, 0.22);
}

.employee-date-day--selected.employee-date-day--work[b-r3a3uqum44],
.employee-date-day--selected.employee-date-day--vacation[b-r3a3uqum44],
.employee-date-day--selected.employee-date-day--sick[b-r3a3uqum44] {
    color: #ffffff;
    background: var(--employee-primary, #2563eb);
}

.employee-date-day--selected:hover[b-r3a3uqum44],
.employee-date-day--selected:focus-visible[b-r3a3uqum44] {
    background: var(--employee-primary, #2563eb);
}

@media (max-width: 520px) {
    .employee-date-picker--compact .employee-picker-backdrop[b-r3a3uqum44] {
        background: rgba(15, 23, 42, 0.18);
    }

    .employee-date-picker--compact .employee-picker-panel[b-r3a3uqum44] {
        position: fixed;
        top: auto;
        right: max(14px, env(safe-area-inset-right));
        bottom: max(14px, env(safe-area-inset-bottom));
        left: max(14px, env(safe-area-inset-left));
        width: auto;
        border-radius: 26px;
        padding: 12px;
        animation: employeeDatePickerSheet-b-r3a3uqum44 240ms cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .employee-date-picker--open-above:not(.employee-date-picker--compact) .employee-picker-panel[b-r3a3uqum44] {
        position: absolute;
        top: auto;
        right: 0;
        bottom: calc(100% + 8px);
        left: 0;
        width: auto;
        border-radius: 22px;
        padding: 10px;
        animation: none;
    }
}

@keyframes employeeDatePickerSheet-b-r3a3uqum44 {
    from {
        opacity: 0;
        transform: translateY(16px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* /Components/Pages/Employee/EmployeeHome.razor.rz.scp.css */
.employee-page[b-bi5jrwg645] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(224, 244, 235, 0.92), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-shell[b-bi5jrwg645] {
    width: min(400px, 100%);
    margin: 0 auto;
}

.employee-topbar[b-bi5jrwg645] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-user[b-bi5jrwg645] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 9px;
}

.employee-avatar[b-bi5jrwg645] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    color: white;
    background: #2563eb;
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.22);
    font-size: 0.92rem;
    font-weight: 800;
}

.employee-user-text[b-bi5jrwg645] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-kicker[b-bi5jrwg645],
.employee-page-kicker[b-bi5jrwg645] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-user-text strong[b-bi5jrwg645] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 850;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-logout-form[b-bi5jrwg645] {
    margin: 0;
}

.employee-logout[b-bi5jrwg645] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.72);
    font: inherit;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-logout:hover[b-bi5jrwg645],
.employee-logout:focus-visible[b-bi5jrwg645] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-placeholder[b-bi5jrwg645] {
    margin-top: 14px;
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 20px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.76);
    box-shadow: 0 16px 36px rgba(23, 32, 27, 0.08);
}

.employee-placeholder h2[b-bi5jrwg645] {
    margin: 0 0 12px;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 850;
}

.employee-empty-state[b-bi5jrwg645] {
    border: 1px dashed rgba(37, 99, 235, 0.24);
    border-radius: 16px;
    padding: 16px;
    background: rgba(246, 247, 242, 0.7);
}

.employee-empty-state span[b-bi5jrwg645] {
    display: block;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 800;
}

.employee-empty-state p[b-bi5jrwg645] {
    margin: 4px 0 0;
    color: #64748b;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.38;
}

@media (max-width: 640px) {
    .employee-page[b-bi5jrwg645] {
        padding: 10px;
    }

}

.employee-time-card[b-bi5jrwg645],
.employee-actions[b-bi5jrwg645] {
    margin-top: 10px;
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 16px 36px rgba(23, 32, 27, 0.08);
}

.employee-section-head[b-bi5jrwg645] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.employee-header-actions[b-bi5jrwg645] {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.employee-section-head h2[b-bi5jrwg645] {
    margin: 3px 0 0;
    color: #0f172a;
    font-size: 1.04rem;
    font-weight: 900;
}

.employee-time-stats[b-bi5jrwg645] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 12px;
}

.employee-time-stats div[b-bi5jrwg645] {
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 13px;
    padding: 10px;
    background: rgba(246, 247, 242, 0.72);
}

.employee-time-stats span[b-bi5jrwg645] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-time-stats strong[b-bi5jrwg645] {
    color: #0f172a;
    font-size: 1.16rem;
    font-weight: 950;
}

.employee-overview-icon[b-bi5jrwg645] {
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(20, 93, 160, 0.22);
    border-radius: 13px;
    padding: 0;
    color: #145da0;
    background: #e8f1fa;
    cursor: pointer;
    font: inherit;
}

.employee-overview-icon:hover[b-bi5jrwg645],
.employee-overview-icon:focus-visible[b-bi5jrwg645] {
    outline: none;
    border-color: rgba(20, 93, 160, 0.42);
    background: #dbeafe;
}

.employee-primary-action[b-bi5jrwg645],
.employee-feature-button[b-bi5jrwg645] {
    width: 100%;
    min-height: 46px;
    border-radius: 14px;
    font: inherit;
    cursor: pointer;
}

.employee-primary-action[b-bi5jrwg645] {
    border: none;
    color: white;
    background: #2563eb;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    font-size: 0.94rem;
    font-weight: 900;
    transform-origin: center;
    transition: filter 0.16s, transform 0.16s, box-shadow 0.16s, background 0.16s;
}

.employee-clock-control[b-bi5jrwg645] {
    border-radius: 14px;
}

.employee-clock-actions[b-bi5jrwg645] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-clock-actions--pause[b-bi5jrwg645] {
    grid-template-columns: 1fr;
}

.employee-primary-action--break[b-bi5jrwg645] {
    color: white;
    background: #0891b2;
    box-shadow: 0 14px 28px rgba(52, 199, 89, 0.24);
}

.employee-primary-action--resume[b-bi5jrwg645] {
    color: white;
    background: #0891b2;
    box-shadow: 0 14px 28px rgba(52, 199, 89, 0.24);
}

.employee-primary-action--stop[b-bi5jrwg645] {
    background: #e11d48;
    box-shadow: 0 14px 28px rgba(225, 29, 72, 0.2);
}

.employee-primary-action:hover[b-bi5jrwg645],
.employee-primary-action:focus-visible[b-bi5jrwg645] {
    filter: brightness(0.96);
    transform: translateY(-1px);
    outline: none;
}

.employee-primary-action:disabled[b-bi5jrwg645] {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.58;
}

.employee-clock-stage--clock-in-collapse .employee-primary-action--clock[b-bi5jrwg645] {
    animation: employeeClockCollapse-b-bi5jrwg645 0.17s ease-in forwards;
}

.employee-clock-stage--clock-in .employee-primary-action--break[b-bi5jrwg645] {
    animation: employeeButtonSlideLeftIn-b-bi5jrwg645 0.34s cubic-bezier(0.2, 1.15, 0.42, 1) both;
}

.employee-clock-stage--clock-in .employee-primary-action--stop[b-bi5jrwg645],
.employee-clock-stage--end-break .employee-primary-action--stop[b-bi5jrwg645] {
    animation: employeeButtonSlideRightIn-b-bi5jrwg645 0.34s cubic-bezier(0.2, 1.15, 0.42, 1) both;
}

.employee-clock-stage--start-break .employee-primary-action--resume[b-bi5jrwg645] {
    transform-origin: left center;
    animation: employeePauseExpandRight-b-bi5jrwg645 0.34s cubic-bezier(0.25, 1.18, 0.42, 1) both;
}

.employee-clock-stage--end-break .employee-primary-action--break[b-bi5jrwg645] {
    transform-origin: left center;
    animation: employeePauseContractLeft-b-bi5jrwg645 0.34s cubic-bezier(0.25, 1.18, 0.42, 1) both;
}

.employee-clock-stage--clock-out .employee-primary-action--clock[b-bi5jrwg645] {
    transform-origin: right center;
    animation: employeeClockExpandLeft-b-bi5jrwg645 0.34s cubic-bezier(0.25, 1.18, 0.42, 1) both;
}

@keyframes employeeClockCollapse-b-bi5jrwg645 {
    from {
        opacity: 1;
        transform: scaleX(1);
    }

    to {
        opacity: 0.72;
        transform: scaleX(0.08);
    }
}

@keyframes employeeButtonSlideLeftIn-b-bi5jrwg645 {
    from {
        opacity: 0;
        transform: translateX(-112%) scaleX(0.72);
    }

    to {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

@keyframes employeeButtonSlideRightIn-b-bi5jrwg645 {
    from {
        opacity: 0;
        transform: translateX(112%) scaleX(0.72);
    }

    to {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

@keyframes employeePauseExpandRight-b-bi5jrwg645 {
    from {
        opacity: 0.95;
        transform: scaleX(0.48);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes employeePauseContractLeft-b-bi5jrwg645 {
    from {
        opacity: 1;
        transform: scaleX(2.08);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes employeeClockExpandLeft-b-bi5jrwg645 {
    from {
        opacity: 0.95;
        transform: translateX(calc(50% + 4px)) scaleX(0.48);
    }

    to {
        opacity: 1;
        transform: translateX(0) scaleX(1);
    }
}

.employee-preview-name[b-bi5jrwg645] {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 900;
}

.employee-feature-button[b-bi5jrwg645] {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1.5px dashed rgba(37, 99, 235, 0.22);
    padding: 0 12px;
    color: #64748b;
    background: rgba(246, 247, 242, 0.72);
    text-align: left;
}

.employee-feature-button:disabled[b-bi5jrwg645] {
    cursor: not-allowed;
    opacity: 0.84;
}

.employee-feature-icon[b-bi5jrwg645] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 11px;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.74);
}

.employee-feature-button strong[b-bi5jrwg645],
.employee-feature-button small[b-bi5jrwg645] {
    display: block;
}

.employee-feature-button strong[b-bi5jrwg645] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-feature-button small[b-bi5jrwg645] {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 750;
}

.employee-times-icon-btn[b-bi5jrwg645] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.78);
    cursor: pointer;
}

.employee-times-icon-btn svg[b-bi5jrwg645] {
    width: 20px;
    height: 20px;
}

@media (max-width: 360px) {
    .employee-page[b-bi5jrwg645] {
        padding: 8px;
    }

    .employee-time-card[b-bi5jrwg645],
    .employee-actions[b-bi5jrwg645] {
        padding: 12px;
    }

    .employee-section-head[b-bi5jrwg645] {
        gap: 8px;
    }

    .employee-section-head h2[b-bi5jrwg645] {
        font-size: 0.98rem;
    }

    .employee-time-stats strong[b-bi5jrwg645] {
        font-size: 1.06rem;
    }
}

.employee-times-icon-btn:hover[b-bi5jrwg645],
.employee-times-icon-btn:focus-visible[b-bi5jrwg645] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

/* Mobile Redesign */
.employee-page[b-bi5jrwg645] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-cyan: #0891b2;
    --employee-danger: #e11d48;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-shell[b-bi5jrwg645] {
    width: min(460px, 100%);
}

.employee-topbar[b-bi5jrwg645],
.employee-time-card[b-bi5jrwg645],
.employee-actions[b-bi5jrwg645] {
    border: 0;
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-topbar[b-bi5jrwg645] {
    min-height: 58px;
    margin: 0 0 14px;
    padding: 8px;
}

.employee-avatar[b-bi5jrwg645] {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: linear-gradient(145deg, #1d4ed8, #0891b2);
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

.employee-kicker[b-bi5jrwg645],
.employee-page-kicker[b-bi5jrwg645] {
    color: var(--employee-muted);
    font-size: 0.64rem;
    font-weight: 900;
}

.employee-user-text strong[b-bi5jrwg645],
.employee-section-head h2[b-bi5jrwg645],
.employee-time-stats strong[b-bi5jrwg645],
.employee-feature-button strong[b-bi5jrwg645] {
    color: var(--employee-ink);
}

.employee-logout[b-bi5jrwg645] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-logout:hover[b-bi5jrwg645],
.employee-logout:focus-visible[b-bi5jrwg645] {
    border-color: transparent;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-time-card[b-bi5jrwg645],
.employee-actions[b-bi5jrwg645] {
    padding: 14px;
}

.employee-section-head[b-bi5jrwg645] {
    margin-bottom: 14px;
}

.employee-time-head[b-bi5jrwg645] {
    align-items: center;
    margin-bottom: 8px;
}

.employee-section-head h2[b-bi5jrwg645] {
    margin-top: 4px;
    font-size: clamp(1.28rem, 8vw, 1.82rem);
    line-height: 0.98;
}

.employee-live-pill[b-bi5jrwg645] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 12px;
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
    font-size: 0.72rem;
    font-weight: 950;
}

.employee-time-stats[b-bi5jrwg645] {
    gap: 8px;
    margin-bottom: 10px;
}

.employee-time-stats div[b-bi5jrwg645] {
    border: 0;
    border-radius: 18px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-time-stats span[b-bi5jrwg645],
.employee-feature-button small[b-bi5jrwg645] {
    color: var(--employee-muted);
}

.employee-quick-actions[b-bi5jrwg645] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 10px;
}

.employee-quick-action[b-bi5jrwg645] {
    min-width: 0;
    min-height: 78px;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 4px;
    border: 0;
    border-radius: 22px;
    padding: 10px;
    color: var(--employee-ink);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-quick-action span[b-bi5jrwg645] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #ffffff;
    background: var(--employee-primary);
    font-size: 0.82rem;
    font-weight: 950;
}

.employee-quick-action span svg[b-bi5jrwg645] {
    width: 21px;
    height: 21px;
}

.employee-quick-action--vacation span[b-bi5jrwg645] {
    background: var(--employee-cyan);
}

.employee-quick-action--sick span[b-bi5jrwg645] {
    background: var(--employee-danger);
}

.employee-quick-action strong[b-bi5jrwg645],
.employee-quick-action small[b-bi5jrwg645] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-quick-action strong[b-bi5jrwg645] {
    font-size: 0.82rem;
    font-weight: 950;
}

.employee-quick-action small[b-bi5jrwg645] {
    color: var(--employee-muted);
    font-size: 0.66rem;
    font-weight: 800;
}

.employee-quick-action:hover[b-bi5jrwg645],
.employee-quick-action:focus-visible[b-bi5jrwg645] {
    outline: none;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24), 0 16px 28px rgba(15, 23, 42, 0.1);
}

.employee-primary-action[b-bi5jrwg645] {
    min-height: 50px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-primary);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24);
    font-weight: 950;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), filter 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-primary-action--break[b-bi5jrwg645],
.employee-primary-action--resume[b-bi5jrwg645] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-cyan);
    box-shadow: 0 18px 34px rgba(8, 145, 178, 0.22);
}

.employee-primary-action--stop[b-bi5jrwg645] {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-danger);
    box-shadow: 0 18px 34px rgba(225, 29, 72, 0.22);
}

.employee-feature-button[b-bi5jrwg645] {
    min-height: 62px;
    border: 0;
    border-radius: 22px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

.employee-feature-icon[b-bi5jrwg645] {
    color: var(--employee-primary);
}

.employee-orders-card[b-bi5jrwg645] {
    display: grid;
    gap: 10px;
}

.employee-orders-head[b-bi5jrwg645] {
    align-items: center;
    margin-bottom: 0;
}

.employee-orders-empty[b-bi5jrwg645] {
    border-radius: 18px;
    padding: 14px;
    color: var(--employee-muted);
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
    font-size: 0.86rem;
    font-weight: 850;
}

.employee-order-list[b-bi5jrwg645] {
    display: grid;
    gap: 10px;
}

.employee-order-item[b-bi5jrwg645] {
    border-radius: 22px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line);
    overflow: hidden;
}

.employee-order-button[b-bi5jrwg645] {
    width: 100%;
    min-height: 66px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    border-radius: 22px;
    padding: 10px;
    color: var(--employee-ink);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), background 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-order-button:hover[b-bi5jrwg645],
.employee-order-button:focus-visible[b-bi5jrwg645] {
    outline: none;
    background: rgba(37, 99, 235, 0.04);
}

.employee-order-main[b-bi5jrwg645] {
    min-width: 0;
    flex: 1;
}

.employee-order-main strong[b-bi5jrwg645],
.employee-order-main small[b-bi5jrwg645] {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-order-main strong[b-bi5jrwg645] {
    color: var(--employee-ink);
    font-size: 0.9rem;
    font-weight: 950;
}

.employee-order-main small[b-bi5jrwg645] {
    margin-top: 3px;
    color: var(--employee-muted);
    font-size: 0.74rem;
    font-weight: 850;
}

.employee-order-chevron[b-bi5jrwg645] {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.08);
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

@media (max-width: 380px) {
    .employee-page[b-bi5jrwg645] {
        padding-right: 10px;
        padding-left: 10px;
    }

    .employee-quick-actions[b-bi5jrwg645] {
        gap: 6px;
    }

    .employee-quick-action[b-bi5jrwg645] {
        min-height: 78px;
        padding: 8px;
    }
}

/* /Components/Pages/Employee/EmployeePlanning.razor.rz.scp.css */
.employee-overview-page[b-dh6ltffa04] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-cyan: #0891b2;
    --employee-danger: #e11d48;
    --employee-vacation: #16a34a;
    --employee-sick: #dc2626;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-overview-shell[b-dh6ltffa04] {
    width: min(460px, 100%);
    display: grid;
    gap: 10px;
    margin: 0 auto;
}

.employee-overview-topbar[b-dh6ltffa04],
.employee-overview-summary[b-dh6ltffa04],
.employee-overview-picker-card[b-dh6ltffa04],
.employee-overview-actions[b-dh6ltffa04] {
    border: 0;
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-overview-topbar[b-dh6ltffa04] {
    min-height: 58px;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px;
}

.employee-overview-back[b-dh6ltffa04],
.employee-overview-entry-actions button[b-dh6ltffa04],
.employee-overview-modal-tool[b-dh6ltffa04],
.employee-overview-modal-close[b-dh6ltffa04] {
    border: 0;
    color: var(--employee-primary);
    background: #ffffff;
    cursor: pointer;
    font: inherit;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-overview-back[b-dh6ltffa04] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 16px;
}

.employee-overview-kicker[b-dh6ltffa04],
.employee-overview-user[b-dh6ltffa04],
.employee-overview-summary span[b-dh6ltffa04],
.employee-overview-day-stats span[b-dh6ltffa04],
.employee-overview-entry span[b-dh6ltffa04],
.employee-overview-entry small[b-dh6ltffa04],
.employee-overview-empty span[b-dh6ltffa04],
.employee-overview-field span[b-dh6ltffa04] {
    color: var(--employee-muted);
}

.employee-overview-kicker[b-dh6ltffa04] {
    display: block;
    font-size: 0.64rem;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-overview-topbar h1[b-dh6ltffa04],
.employee-overview-picker-head h2[b-dh6ltffa04],
.employee-overview-modal-head h2[b-dh6ltffa04] {
    margin: 3px 0 0;
    color: var(--employee-ink);
    font-weight: 950;
    line-height: 1.06;
}

.employee-overview-topbar h1[b-dh6ltffa04] {
    font-size: 1.24rem;
}

.employee-overview-user[b-dh6ltffa04] {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    font-weight: 750;
}

.employee-overview-summary[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.employee-overview-summary div[b-dh6ltffa04],
.employee-overview-day-stats div[b-dh6ltffa04] {
    min-width: 0;
    display: grid;
    gap: 2px;
    border-radius: 14px;
    padding: 7px 6px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-overview-summary span[b-dh6ltffa04],
.employee-overview-day-stats span[b-dh6ltffa04] {
    overflow: hidden;
    font-size: 0.6rem;
    font-weight: 900;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.employee-overview-summary strong[b-dh6ltffa04],
.employee-overview-day-stats strong[b-dh6ltffa04] {
    min-width: 0;
    overflow: hidden;
    color: var(--employee-ink);
    font-size: 0.88rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-overview-actions[b-dh6ltffa04] {
    padding: 14px;
}

.employee-overview-picker-card[b-dh6ltffa04] {
    padding: 12px;
}

.employee-overview-picker-head[b-dh6ltffa04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.employee-overview-picker-head h2[b-dh6ltffa04] {
    font-size: 1rem;
}

.employee-overview-day-stats[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.employee-overview-actions[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.employee-overview-action[b-dh6ltffa04] {
    min-width: 0;
    min-height: 72px;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: 6px;
    border: 0;
    border-radius: 20px;
    padding: 8px 5px;
    color: var(--employee-ink);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line);
    cursor: pointer;
    font: inherit;
    transition: transform 260ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 260ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-overview-action span[b-dh6ltffa04] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #ffffff;
    background: var(--employee-primary);
}

.employee-overview-action--vacation span[b-dh6ltffa04] {
    background: var(--employee-vacation);
}

.employee-overview-action--sick span[b-dh6ltffa04] {
    background: var(--employee-sick);
}

.employee-overview-action strong[b-dh6ltffa04] {
    max-width: 100%;
    overflow: hidden;
    font-size: 0.68rem;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-overview-action:hover[b-dh6ltffa04],
.employee-overview-action:focus-visible[b-dh6ltffa04] {
    outline: none;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24), 0 16px 28px rgba(15, 23, 42, 0.1);
}

.employee-overview-day-content[b-dh6ltffa04] {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.employee-overview-live[b-dh6ltffa04],
.employee-overview-day-pill[b-dh6ltffa04] {
    width: fit-content;
    border-radius: 999px;
    padding: 5px 9px;
    font-size: 0.68rem;
    font-weight: 950;
}

.employee-overview-live[b-dh6ltffa04] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-overview-day-pill--vacation[b-dh6ltffa04] {
    color: #166534;
    background: #dcfce7;
}

.employee-overview-day-pill--sick[b-dh6ltffa04] {
    color: #991b1b;
    background: #fee2e2;
}

.employee-overview-empty[b-dh6ltffa04],
.employee-overview-entry[b-dh6ltffa04] {
    border-radius: 18px;
    padding: 12px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-overview-empty strong[b-dh6ltffa04],
.employee-overview-empty span[b-dh6ltffa04],
.employee-overview-entry strong[b-dh6ltffa04],
.employee-overview-entry small[b-dh6ltffa04] {
    display: block;
}

.employee-overview-empty strong[b-dh6ltffa04],
.employee-overview-entry strong[b-dh6ltffa04] {
    color: var(--employee-ink);
    font-size: 0.88rem;
    font-weight: 950;
}

.employee-overview-empty span[b-dh6ltffa04],
.employee-overview-entry small[b-dh6ltffa04] {
    margin-top: 3px;
    font-size: 0.74rem;
    font-weight: 780;
    line-height: 1.25;
}

.employee-overview-entry[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    background: #ffffff;
}

.employee-overview-entry--modal[b-dh6ltffa04] {
    grid-template-columns: 1fr;
}

.employee-overview-entry > div:first-child[b-dh6ltffa04] {
    min-width: 0;
}

.employee-overview-entry span[b-dh6ltffa04] {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 3px 8px;
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
    font-size: 0.62rem;
    font-weight: 950;
}

.employee-overview-entry strong[b-dh6ltffa04],
.employee-overview-entry small[b-dh6ltffa04] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-overview-entry-actions[b-dh6ltffa04] {
    display: flex;
    gap: 6px;
}

.employee-overview-entry-actions button[b-dh6ltffa04] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
}

.employee-overview-modal-layer[b-dh6ltffa04] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-danger: #e11d48;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-soft: rgba(248, 250, 252, 0.86);
    position: fixed;
    inset: 0;
    z-index: 2400;
    display: grid;
    align-items: end;
    padding: 10px;
}

.employee-overview-modal-backdrop[b-dh6ltffa04] {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(2px);
}

.employee-overview-modal[b-dh6ltffa04] {
    position: relative;
    width: min(460px, 100%);
    min-height: 0;
    max-height: min(86dvh, 720px);
    display: grid;
    gap: 10px;
    margin: 0 auto;
    overflow: visible;
    border-radius: 24px;
    padding: 14px;
    background: #ffffff;
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.24);
    animation: employeeOverviewSheet-b-dh6ltffa04 220ms cubic-bezier(0.32, 0.72, 0, 1) both;
}

.employee-overview-modal-head[b-dh6ltffa04] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.employee-overview-modal-tools[b-dh6ltffa04] {
    display: flex;
    align-items: center;
    gap: 7px;
}

.employee-overview-modal-head h2[b-dh6ltffa04] {
    font-size: 1rem;
}

.employee-overview-modal-tool[b-dh6ltffa04],
.employee-overview-modal-close[b-dh6ltffa04] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    font-size: 1.25rem;
    line-height: 1;
}

.employee-overview-modal-tool svg[b-dh6ltffa04],
.employee-overview-modal-close svg[b-dh6ltffa04] {
    width: 18px;
    height: 18px;
}

.employee-overview-history-list[b-dh6ltffa04] {
    min-height: 0;
    max-height: min(52dvh, 430px);
    display: grid;
    gap: 8px;
    overflow-y: auto;
    padding-right: 2px;
}

.employee-overview-history-row[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 34px;
    align-items: center;
    gap: 9px;
    border-radius: 18px;
    padding: 12px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.employee-overview-history-row span[b-dh6ltffa04],
.employee-overview-history-row strong[b-dh6ltffa04],
.employee-overview-history-row small[b-dh6ltffa04] {
    display: block;
}

.employee-overview-history-row span[b-dh6ltffa04] {
    width: fit-content;
    border-radius: 999px;
    padding: 3px 8px;
    color: #2563eb;
    background: rgba(37, 99, 235, 0.1);
    font-size: 0.62rem;
    font-weight: 950;
}

.employee-overview-history-row strong[b-dh6ltffa04] {
    margin-top: 6px;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.employee-overview-history-row small[b-dh6ltffa04] {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.74rem;
    font-weight: 800;
}

.employee-overview-history-row button[b-dh6ltffa04] {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    color: #e11d48;
    background: #fff1f2;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.14);
    cursor: pointer;
    font: inherit;
}

.employee-overview-history-row button svg[b-dh6ltffa04] {
    width: 18px;
    height: 18px;
}

.employee-overview-range[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
}

.employee-overview-halfdays[b-dh6ltffa04] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-overview-field[b-dh6ltffa04] {
    display: grid;
    gap: 7px;
}

.employee-overview-halfdays label[b-dh6ltffa04] {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 14px;
    padding: 0 10px;
    color: var(--employee-ink);
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
    font-size: 0.82rem;
    font-weight: 850;
}

.employee-overview-halfdays input[b-dh6ltffa04] {
    width: 16px;
    height: 16px;
    accent-color: var(--employee-primary);
}

.employee-overview-field input[b-dh6ltffa04],
.employee-overview-field textarea[b-dh6ltffa04] {
    width: 100%;
    min-width: 0;
    border: 0;
    border-radius: 14px;
    padding: 10px 11px;
    color: var(--employee-ink);
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.12);
    font: inherit;
    font-weight: 800;
}

.employee-overview-form-submit[b-dh6ltffa04] {
    width: 100%;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    border-radius: 16px;
    padding: 13px 14px;
    color: #ffffff;
    background: #2563eb;
    cursor: pointer;
    font: inherit;
    font-weight: 950;
    line-height: 1.15;
    text-align: center;
    white-space: normal;
    box-shadow: none;
    opacity: 1;
    transition: background 160ms ease;
}

.employee-overview-form-submit:not(:disabled):hover[b-dh6ltffa04],
.employee-overview-form-submit:not(:disabled):focus-visible[b-dh6ltffa04] {
    outline: none;
    background: #1d4ed8;
}

.employee-overview-form-submit:not(:disabled):active[b-dh6ltffa04] {
    background: #1e40af;
}

.employee-overview-form-submit--danger[b-dh6ltffa04] {
    background: #e11d48;
}

.employee-overview-form-submit--danger:not(:disabled):hover[b-dh6ltffa04],
.employee-overview-form-submit--danger:not(:disabled):focus-visible[b-dh6ltffa04] {
    background: #be123c;
}

.employee-overview-form-submit:disabled[b-dh6ltffa04] {
    cursor: not-allowed;
    color: #64748b;
    background: #e2e8f0;
    box-shadow: inset 0 0 0 1px rgba(100, 116, 139, 0.18);
    opacity: 1;
}

.employee-overview-message[b-dh6ltffa04] {
    margin: 0;
    border-radius: 14px;
    padding: 10px 11px;
    font-size: 0.82rem;
    font-weight: 850;
}

.employee-overview-message--success[b-dh6ltffa04] {
    color: #166534;
    background: #dcfce7;
}

.employee-overview-message--error[b-dh6ltffa04] {
    color: #b91c1c;
    background: #fee2e2;
}

@keyframes employeeOverviewSheet-b-dh6ltffa04 {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 380px) {
    .employee-overview-page[b-dh6ltffa04] {
        padding-right: 10px;
        padding-left: 10px;
    }

    .employee-overview-summary[b-dh6ltffa04],
    .employee-overview-day-stats[b-dh6ltffa04],
    .employee-overview-actions[b-dh6ltffa04] {
        gap: 5px;
    }

    .employee-overview-action[b-dh6ltffa04] {
        min-height: 66px;
    }

    .employee-overview-action strong[b-dh6ltffa04] {
        font-size: 0.62rem;
    }
}
/* /Components/Pages/Employee/EmployeeSick.razor.rz.scp.css */
.employee-sick-page[b-tex2ufb8fv] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(249, 228, 226, 0.88), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-sick-shell[b-tex2ufb8fv] {
    width: min(400px, 100%);
    margin: 0 auto;
}

.employee-sick-topbar[b-tex2ufb8fv] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-sick-back[b-tex2ufb8fv] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(225, 29, 72, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #e11d48;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-sick-back:hover[b-tex2ufb8fv],
.employee-sick-back:focus-visible[b-tex2ufb8fv] {
    border-color: #e11d48;
    background: white;
    outline: none;
}

.employee-sick-kicker[b-tex2ufb8fv] {
    color: #7a5b57;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-sick-topbar h1[b-tex2ufb8fv] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.22rem;
    font-weight: 950;
}

.employee-sick-user[b-tex2ufb8fv] {
    display: block;
    margin-top: 2px;
    color: #7a5b57;
    font-size: 0.8rem;
    font-weight: 800;
}

.employee-sick-card[b-tex2ufb8fv],
.employee-sick-list[b-tex2ufb8fv] {
    border: 1.5px solid rgba(225, 29, 72, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 12px 28px rgba(23, 32, 27, 0.07);
}

.employee-sick-card[b-tex2ufb8fv] {
    padding: 12px;
}

.employee-sick-form[b-tex2ufb8fv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-sick-field[b-tex2ufb8fv] {
    min-width: 0;
}

.employee-sick-field span[b-tex2ufb8fv] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-sick-field input[b-tex2ufb8fv] {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    border: 1.5px solid rgba(225, 29, 72, 0.16);
    border-radius: 11px;
    padding: 0 6px;
    color: #0f172a;
    background: rgba(246, 247, 242, 0.7);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
}

.employee-sick-field input:focus[b-tex2ufb8fv] {
    border-color: #e11d48;
    background: white;
    outline: none;
}

.employee-sick-field input:disabled[b-tex2ufb8fv] {
    cursor: not-allowed;
    color: #7f8b85;
    background: rgba(235, 238, 232, 0.72);
    opacity: 0.72;
}

.employee-sick-day-mode[b-tex2ufb8fv] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid rgba(225, 29, 72, 0.12);
    border-radius: 12px;
    padding: 7px;
    background: rgba(246, 247, 242, 0.72);
}

.employee-sick-day-mode span[b-tex2ufb8fv] {
    color: #7a5b57;
    font-size: 0.72rem;
    font-weight: 850;
}

.employee-sick-mode-btn[b-tex2ufb8fv] {
    min-width: 42px;
    height: 30px;
    border: 1.5px solid rgba(225, 29, 72, 0.16);
    border-radius: 9px;
    padding: 0 7px;
    color: #7a5b57;
    background: white;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
}

.employee-sick-mode-btn--active[b-tex2ufb8fv] {
    border-color: #e11d48;
    color: white;
    background: #e11d48;
}

.employee-sick-mode-btn:disabled[b-tex2ufb8fv] {
    cursor: not-allowed;
    opacity: 0.45;
}

.employee-sick-hint[b-tex2ufb8fv] {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px solid rgba(225, 29, 72, 0.18);
    border-radius: 11px;
    padding: 9px 10px;
    color: #e11d48;
    background: #fff1f2;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.employee-sick-preview[b-tex2ufb8fv] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.employee-sick-preview span[b-tex2ufb8fv] {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(225, 29, 72, 0.14);
    border-radius: 9px;
    padding: 0 5px;
    color: #7a5b57;
    background: white;
    font-size: 0.68rem;
    font-weight: 800;
    min-width: 0;
}

.employee-sick-preview strong[b-tex2ufb8fv] {
    color: #0f172a;
    font-size: 0.68rem;
    font-weight: 950;
}

.employee-sick-submit[b-tex2ufb8fv] {
    grid-column: 1 / -1;
    min-height: 44px;
    border: none;
    border-radius: 13px;
    color: white;
    background: #e11d48;
    box-shadow: 0 14px 28px rgba(225, 29, 72, 0.2);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
}

.employee-sick-submit:hover[b-tex2ufb8fv],
.employee-sick-submit:focus-visible[b-tex2ufb8fv] {
    filter: brightness(0.96);
    outline: none;
}

.employee-sick-submit:disabled[b-tex2ufb8fv] {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.55;
}

.employee-sick-list[b-tex2ufb8fv] {
    margin-top: 10px;
    overflow: hidden;
}

.employee-sick-list h2[b-tex2ufb8fv] {
    margin: 0;
    padding: 12px 12px 4px;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.employee-sick-row[b-tex2ufb8fv] {
    min-height: 62px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(225, 29, 72, 0.1);
}

.employee-sick-date[b-tex2ufb8fv] {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #fff1f2;
}

.employee-sick-date strong[b-tex2ufb8fv] {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1;
}

.employee-sick-date span[b-tex2ufb8fv],
.employee-sick-main span[b-tex2ufb8fv] {
    color: #7a5b57;
    font-size: 0.68rem;
    font-weight: 800;
}

.employee-sick-date span[b-tex2ufb8fv] {
    margin-top: 3px;
    text-transform: uppercase;
}

.employee-sick-main strong[b-tex2ufb8fv] {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.35;
}

.employee-sick-main small[b-tex2ufb8fv] {
    display: inline-flex;
    width: fit-content;
    margin-top: 6px;
    border-radius: 999px;
    padding: 3px 8px;
    color: #e11d48;
    background: #fff1f2;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.employee-sick-status--pending[b-tex2ufb8fv] {
    color: #8a5b00;
    background: #fff4d6;
}

.employee-sick-status--approved[b-tex2ufb8fv] {
    color: #2563eb;
    background: #eaf1ff;
}

.employee-sick-status--rejected[b-tex2ufb8fv] {
    color: #e11d48;
    background: #fff1f2;
}

.employee-sick-status--delete-pending[b-tex2ufb8fv] {
    color: #556070;
    background: #edf0f5;
}

.employee-sick-delete[b-tex2ufb8fv] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(225, 29, 72, 0.16);
    border-radius: 11px;
    padding: 0;
    color: #e11d48;
    background: #fff1f2;
    cursor: pointer;
}

.employee-sick-delete:hover[b-tex2ufb8fv],
.employee-sick-delete:focus-visible[b-tex2ufb8fv] {
    border-color: #e11d48;
    background: white;
    outline: none;
}

.employee-sick-row-spacer[b-tex2ufb8fv] {
    width: 34px;
    height: 34px;
}

.employee-sick-empty[b-tex2ufb8fv] {
    padding: 12px;
    border-top: 1px solid rgba(225, 29, 72, 0.1);
}

.employee-sick-empty strong[b-tex2ufb8fv],
.employee-sick-empty span[b-tex2ufb8fv] {
    display: block;
}

.employee-sick-empty strong[b-tex2ufb8fv] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-sick-empty span[b-tex2ufb8fv] {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

@media (max-width: 360px) {
    .employee-sick-page[b-tex2ufb8fv] {
        padding: 8px;
    }

    .employee-sick-card[b-tex2ufb8fv] {
        padding: 10px;
    }

    .employee-sick-field input[b-tex2ufb8fv] {
        height: 36px;
        font-size: 0.72rem;
        padding: 0 4px;
    }

    .employee-sick-mode-btn[b-tex2ufb8fv] {
        min-width: 38px;
        padding: 0 5px;
    }

    .employee-sick-preview[b-tex2ufb8fv] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile Redesign */
.employee-sick-page[b-tex2ufb8fv] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-danger: #e11d48;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-sick-shell[b-tex2ufb8fv] {
    width: min(460px, 100%);
}

.employee-sick-topbar[b-tex2ufb8fv],
.employee-sick-card[b-tex2ufb8fv] {
    border: 0;
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-sick-topbar[b-tex2ufb8fv] {
    min-height: 58px;
    margin: 0 0 14px;
    padding: 8px;
}

.employee-sick-back[b-tex2ufb8fv] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-sick-back:hover[b-tex2ufb8fv],
.employee-sick-back:focus-visible[b-tex2ufb8fv] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-sick-kicker[b-tex2ufb8fv],
.employee-sick-user[b-tex2ufb8fv],
.employee-sick-day-mode span[b-tex2ufb8fv],
.employee-sick-main span[b-tex2ufb8fv],
.employee-sick-main small[b-tex2ufb8fv],
.employee-sick-empty span[b-tex2ufb8fv] {
    color: var(--employee-muted);
}

.employee-sick-topbar h1[b-tex2ufb8fv],
.employee-sick-main strong[b-tex2ufb8fv],
.employee-sick-date strong[b-tex2ufb8fv],
.employee-sick-empty strong[b-tex2ufb8fv] {
    color: var(--employee-ink);
}

.employee-sick-topbar h1[b-tex2ufb8fv] {
    font-size: clamp(1.06rem, 5.4vw, 1.34rem);
    line-height: 1.08;
}

.employee-sick-card[b-tex2ufb8fv] {
    padding: 14px;
}

.employee-sick-form[b-tex2ufb8fv] {
    grid-template-columns: 1fr;
    gap: 10px;
}

.employee-sick-form > .employee-date-picker[b-tex2ufb8fv] {
    grid-column: 1 / -1;
}

.employee-sick-day-mode[b-tex2ufb8fv] {
    min-height: 52px;
    border: 0;
    border-radius: 18px;
    padding: 8px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-sick-mode-btn[b-tex2ufb8fv] {
    min-width: 52px;
    height: 34px;
    border: 0;
    border-radius: 13px;
    color: var(--employee-muted);
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

.employee-sick-mode-btn--active[b-tex2ufb8fv] {
    color: #ffffff;
    background: var(--employee-primary);
    box-shadow: none;
}

.employee-sick-hint[b-tex2ufb8fv],
.employee-sick-preview span[b-tex2ufb8fv] {
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.employee-sick-hint[b-tex2ufb8fv] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

.employee-sick-preview[b-tex2ufb8fv] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-sick-submit[b-tex2ufb8fv] {
    min-height: 52px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-primary);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24);
    font-weight: 950;
}

.employee-sick-list[b-tex2ufb8fv] {
    margin-top: 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.employee-sick-list h2[b-tex2ufb8fv] {
    padding: 0 2px 8px;
    color: var(--employee-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.employee-sick-row[b-tex2ufb8fv],
.employee-sick-empty[b-tex2ufb8fv] {
    border: 0;
    border-radius: 22px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 16px 34px rgba(15, 23, 42, 0.09);
}

.employee-sick-row[b-tex2ufb8fv] {
    min-height: 74px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px;
}

.employee-sick-date[b-tex2ufb8fv] {
    min-height: 44px;
    border-radius: 17px;
    background: rgba(225, 29, 72, 0.09);
}

.employee-sick-date strong[b-tex2ufb8fv] {
    font-size: 0.82rem;
}

.employee-sick-date span[b-tex2ufb8fv] {
    color: var(--employee-danger);
    font-size: 0.68rem;
}

.employee-sick-type[b-tex2ufb8fv] {
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
}

.employee-sick-main strong[b-tex2ufb8fv] {
    display: block;
    margin-top: 3px;
    font-size: 0.98rem;
}

.employee-sick-main small[b-tex2ufb8fv] {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
}

.employee-sick-status[b-tex2ufb8fv] {
    border-radius: 999px;
    padding: 4px 8px;
}

.employee-sick-status--pending[b-tex2ufb8fv] {
    color: #a16207;
    background: rgba(245, 158, 11, 0.14);
}

.employee-sick-status--approved[b-tex2ufb8fv] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-sick-status--rejected[b-tex2ufb8fv] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

.employee-sick-status--delete-pending[b-tex2ufb8fv] {
    color: var(--employee-muted);
    background: rgba(100, 116, 139, 0.12);
}

.employee-sick-delete[b-tex2ufb8fv] {
    border: 0;
    border-radius: 13px;
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.14);
}

.employee-sick-delete:hover[b-tex2ufb8fv],
.employee-sick-delete:focus-visible[b-tex2ufb8fv] {
    border-color: transparent;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.28), 0 12px 24px rgba(15, 23, 42, 0.1);
}

/* /Components/Pages/Employee/EmployeeTimeCorrection.razor.rz.scp.css */
.employee-correction-page[b-dayiagnks7] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(224, 244, 235, 0.92), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-correction-shell[b-dayiagnks7] {
    width: min(430px, 100%);
    margin: 0 auto;
}

.employee-correction-topbar[b-dayiagnks7] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-correction-back[b-dayiagnks7] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-correction-back:hover[b-dayiagnks7],
.employee-correction-back:focus-visible[b-dayiagnks7] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-correction-kicker[b-dayiagnks7] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-correction-topbar h1[b-dayiagnks7] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 950;
}

.employee-correction-user[b-dayiagnks7] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

.employee-correction-card[b-dayiagnks7],
.employee-correction-empty[b-dayiagnks7] {
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 16px 36px rgba(23, 32, 27, 0.08);
}

.employee-correction-card[b-dayiagnks7] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.employee-correction-original[b-dayiagnks7] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
    padding: 12px;
    background:
        linear-gradient(135deg, rgba(230, 242, 234, 0.92), rgba(255, 255, 255, 0.86)),
        #ffffff;
}

.employee-correction-original-head[b-dayiagnks7] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.employee-correction-original-head > div:first-child[b-dayiagnks7] {
    min-width: 0;
}

.employee-correction-original span[b-dayiagnks7],
.employee-correction-field span[b-dayiagnks7],
.employee-correction-note span[b-dayiagnks7] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-correction-original-head strong[b-dayiagnks7] {
    display: block;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.employee-correction-original-pill[b-dayiagnks7] {
    min-width: 70px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0 10px;
    color: #2563eb;
    background: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(37, 99, 235, 0.14);
    font-size: 0.82rem;
    font-weight: 950;
}

.employee-correction-original-grid[b-dayiagnks7] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.employee-correction-original-grid div[b-dayiagnks7],
.employee-correction-original-breaks div[b-dayiagnks7] {
    min-width: 0;
    border-radius: 12px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.78);
}

.employee-correction-original-grid strong[b-dayiagnks7],
.employee-correction-original-breaks strong[b-dayiagnks7] {
    display: block;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
    white-space: nowrap;
}

.employee-correction-original-breaks[b-dayiagnks7] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.employee-correction-original-breaks div[b-dayiagnks7] {
    border-left: 3px solid #f59e0b;
}

.employee-correction-grid[b-dayiagnks7],
.employee-correction-break-row[b-dayiagnks7] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-correction-field[b-dayiagnks7] {
    min-width: 0;
}

.employee-correction-field input[b-dayiagnks7],
.employee-correction-note textarea[b-dayiagnks7] {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    border: 1.5px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    padding: 0 10px;
    color: #0f172a;
    background: white;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
}

.employee-correction-field input[b-dayiagnks7] {
    display: block;
    inline-size: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 42px;
    line-height: normal;
}

.employee-correction-field input[type="time"][b-dayiagnks7]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

.employee-correction-field input[type="time"][b-dayiagnks7]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
}

.employee-correction-field input[type="time"][b-dayiagnks7]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
}

.employee-correction-note textarea[b-dayiagnks7] {
    min-height: 98px;
    padding-top: 10px;
    resize: vertical;
}

.employee-correction-field input:focus[b-dayiagnks7],
.employee-correction-note textarea:focus[b-dayiagnks7] {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.employee-correction-section-head[b-dayiagnks7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.employee-correction-section-head h2[b-dayiagnks7] {
    margin: 0;
    color: #0f172a;
    font-size: 0.94rem;
    font-weight: 950;
}

.employee-correction-icon-btn[b-dayiagnks7],
.employee-correction-remove[b-dayiagnks7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    padding: 0;
    cursor: pointer;
}

.employee-correction-icon-btn[b-dayiagnks7] {
    width: 32px;
    height: 32px;
    border-radius: 11px;
    color: white;
    background: #2563eb;
}

.employee-correction-break-row[b-dayiagnks7] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 34px;
    align-items: end;
    border-radius: 14px;
    padding: 10px;
    background: rgba(246, 247, 242, 0.78);
}

.employee-correction-break-row + .employee-correction-break-row[b-dayiagnks7] {
    margin-top: 7px;
}

.employee-correction-break-empty[b-dayiagnks7] {
    border-radius: 14px;
    padding: 12px;
    color: #64748b;
    background: rgba(246, 247, 242, 0.78);
    font-size: 0.82rem;
    font-weight: 700;
}

.employee-correction-remove[b-dayiagnks7] {
    width: 34px;
    height: 42px;
    border-radius: 12px;
    color: #e11d48;
    background: #fff1f2;
}

.employee-correction-submit[b-dayiagnks7] {
    min-height: 46px;
    border: none;
    border-radius: 14px;
    color: white;
    background: #2563eb;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 900;
    cursor: pointer;
}

.employee-correction-submit:disabled[b-dayiagnks7],
.employee-correction-icon-btn:disabled[b-dayiagnks7],
.employee-correction-remove:disabled[b-dayiagnks7] {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.58;
}

.employee-correction-message[b-dayiagnks7] {
    margin: 0;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 800;
}

.employee-correction-message--success[b-dayiagnks7] {
    color: #2563eb;
    background: #eaf1ff;
}

.employee-correction-message--error[b-dayiagnks7] {
    color: #e11d48;
    background: #fff1f2;
}

.employee-correction-empty strong[b-dayiagnks7],
.employee-correction-empty span[b-dayiagnks7] {
    display: block;
}

.employee-correction-empty strong[b-dayiagnks7] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-correction-empty span[b-dayiagnks7] {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

@media (max-width: 380px) {
    .employee-correction-page[b-dayiagnks7] {
        padding: 8px;
    }

    .employee-correction-grid[b-dayiagnks7],
    .employee-correction-break-row[b-dayiagnks7],
    .employee-correction-original-grid[b-dayiagnks7] {
        grid-template-columns: 1fr;
    }

    .employee-correction-remove[b-dayiagnks7] {
        width: 100%;
    }
}

/* Mobile Redesign */
.employee-correction-page[b-dayiagnks7] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-cyan: #0891b2;
    --employee-danger: #e11d48;
    --employee-warning: #f59e0b;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-correction-shell[b-dayiagnks7] {
    width: min(460px, 100%);
}

.employee-correction-topbar[b-dayiagnks7],
.employee-correction-card[b-dayiagnks7],
.employee-correction-empty[b-dayiagnks7] {
    border: 0;
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-correction-topbar[b-dayiagnks7] {
    min-height: 58px;
    margin: 0 0 14px;
    padding: 8px;
}

.employee-correction-back[b-dayiagnks7] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-correction-back:hover[b-dayiagnks7],
.employee-correction-back:focus-visible[b-dayiagnks7] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-correction-kicker[b-dayiagnks7],
.employee-correction-user[b-dayiagnks7],
.employee-correction-original span[b-dayiagnks7],
.employee-correction-field span[b-dayiagnks7],
.employee-correction-note span[b-dayiagnks7],
.employee-correction-empty span[b-dayiagnks7] {
    color: var(--employee-muted);
}

.employee-correction-topbar h1[b-dayiagnks7],
.employee-correction-original-head strong[b-dayiagnks7],
.employee-correction-original-grid strong[b-dayiagnks7],
.employee-correction-original-breaks strong[b-dayiagnks7],
.employee-correction-section-head h2[b-dayiagnks7],
.employee-correction-empty strong[b-dayiagnks7] {
    color: var(--employee-ink);
}

.employee-correction-topbar h1[b-dayiagnks7] {
    font-size: clamp(1.06rem, 5.4vw, 1.34rem);
    line-height: 1.08;
}

.employee-correction-card[b-dayiagnks7] {
    padding: 14px;
}

.employee-correction-original[b-dayiagnks7],
.employee-correction-break-row[b-dayiagnks7],
.employee-correction-break-empty[b-dayiagnks7] {
    border: 0;
    border-radius: 22px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-correction-original-grid div[b-dayiagnks7],
.employee-correction-original-breaks div[b-dayiagnks7] {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

.employee-correction-original-pill[b-dayiagnks7] {
    color: var(--employee-primary);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.18);
}

.employee-correction-original-breaks div[b-dayiagnks7] {
    border-left: 3px solid var(--employee-warning);
}

.employee-correction-grid[b-dayiagnks7],
.employee-correction-break-row[b-dayiagnks7] {
    gap: 10px;
}

.employee-correction-icon-btn[b-dayiagnks7] {
    color: #ffffff;
    background: var(--employee-primary);
}

.employee-correction-remove[b-dayiagnks7] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

.employee-correction-note textarea[b-dayiagnks7] {
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

.employee-correction-note textarea:focus[b-dayiagnks7] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.34), 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.employee-correction-submit[b-dayiagnks7] {
    min-height: 52px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-primary);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24);
    font-weight: 950;
}

.employee-correction-message[b-dayiagnks7] {
    border-radius: 16px;
}

.employee-correction-message--success[b-dayiagnks7] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-correction-message--error[b-dayiagnks7] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

/* /Components/Pages/Employee/EmployeeTimeDay.razor.rz.scp.css */
.employee-day-page[b-f0qo7hrl19] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(224, 244, 235, 0.92), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-day-shell[b-f0qo7hrl19] {
    width: min(430px, 100%);
    margin: 0 auto;
}

.employee-day-topbar[b-f0qo7hrl19] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-day-back[b-f0qo7hrl19] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-day-back:hover[b-f0qo7hrl19],
.employee-day-back:focus-visible[b-f0qo7hrl19] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-day-kicker[b-f0qo7hrl19] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-day-topbar h1[b-f0qo7hrl19] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.12rem;
    font-weight: 950;
}

.employee-day-user[b-f0qo7hrl19] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

.employee-day-summary[b-f0qo7hrl19] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}

.employee-day-summary div[b-f0qo7hrl19],
.employee-day-entry[b-f0qo7hrl19],
.employee-day-empty[b-f0qo7hrl19] {
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(23, 32, 27, 0.07);
}

.employee-day-summary div[b-f0qo7hrl19] {
    min-width: 0;
    padding: 9px;
}

.employee-day-summary span[b-f0qo7hrl19],
.employee-day-entry-head span[b-f0qo7hrl19],
.employee-day-entry-stats span[b-f0qo7hrl19],
.employee-day-break span[b-f0qo7hrl19] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-day-summary strong[b-f0qo7hrl19],
.employee-day-entry-head strong[b-f0qo7hrl19],
.employee-day-entry-stats strong[b-f0qo7hrl19],
.employee-day-break strong[b-f0qo7hrl19] {
    display: block;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 950;
}

.employee-day-list[b-f0qo7hrl19] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.employee-day-entry[b-f0qo7hrl19] {
    padding: 12px;
}

.employee-day-entry-head[b-f0qo7hrl19] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.employee-day-entry-actions[b-f0qo7hrl19] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}

.employee-day-correction-btn[b-f0qo7hrl19] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: white;
    cursor: pointer;
}

.employee-day-correction-btn svg[b-f0qo7hrl19] {
    width: 20px;
    height: 20px;
}

.employee-day-correction-btn:hover[b-f0qo7hrl19],
.employee-day-correction-btn:focus-visible[b-f0qo7hrl19] {
    border-color: #2563eb;
    background: #eaf1ff;
    outline: none;
}

.employee-day-correction-btn:disabled[b-f0qo7hrl19] {
    opacity: 0.45;
    cursor: not-allowed;
}

.employee-day-delete-btn[b-f0qo7hrl19] {
    color: #e11d48;
    border-color: rgba(225, 29, 72, 0.18);
}

.employee-day-delete-btn:hover[b-f0qo7hrl19],
.employee-day-delete-btn:focus-visible[b-f0qo7hrl19] {
    border-color: #e11d48;
    background: #fff1f2;
}

.employee-day-open[b-f0qo7hrl19] {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    color: #17694d;
    background: #e3f6ed;
    font-size: 0.68rem;
    font-weight: 850;
}

.employee-day-entry-stats[b-f0qo7hrl19] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.employee-day-entry-stats div[b-f0qo7hrl19],
.employee-day-break[b-f0qo7hrl19] {
    border-radius: 12px;
    padding: 9px;
    background: rgba(246, 247, 242, 0.78);
}

.employee-day-breaks[b-f0qo7hrl19] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
}

.employee-day-empty[b-f0qo7hrl19] {
    padding: 14px;
}

.employee-day-history[b-f0qo7hrl19] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.employee-day-history h2[b-f0qo7hrl19] {
    margin: 0 0 2px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.employee-day-request[b-f0qo7hrl19] {
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-left: 4px solid #f59e0b;
    border-radius: 16px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(23, 32, 27, 0.07);
}

.employee-day-request--approved[b-f0qo7hrl19] {
    border-left-color: #0891b2;
}

.employee-day-request--rejected[b-f0qo7hrl19] {
    border-left-color: #ff3b30;
}

.employee-day-request-head[b-f0qo7hrl19] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.employee-day-request-head span[b-f0qo7hrl19],
.employee-day-request-grid span[b-f0qo7hrl19] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-day-request-head strong[b-f0qo7hrl19] {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    border-radius: 999px;
    padding: 0 8px;
    color: #0891b2;
    background: #fff7e8;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-day-request--approved .employee-day-request-head strong[b-f0qo7hrl19] {
    color: #1f7a36;
    background: #edfaf1;
}

.employee-day-request--rejected .employee-day-request-head strong[b-f0qo7hrl19] {
    color: #e11d48;
    background: #fff1f2;
}

.employee-day-request-head small[b-f0qo7hrl19],
.employee-day-request-decision[b-f0qo7hrl19] {
    color: #8a948f;
    font-size: 0.7rem;
    font-weight: 700;
}

.employee-day-request-grid[b-f0qo7hrl19] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.employee-day-request-grid--single[b-f0qo7hrl19] {
    grid-template-columns: 1fr;
}

.employee-day-request-grid div[b-f0qo7hrl19] {
    border-radius: 12px;
    padding: 9px;
    background: rgba(246, 247, 242, 0.78);
}

.employee-day-request-grid strong[b-f0qo7hrl19] {
    display: block;
    color: #0f172a;
    font-size: 0.88rem;
    font-weight: 950;
}

.employee-day-request-grid small[b-f0qo7hrl19] {
    display: block;
    margin-top: 3px;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
}

.employee-day-request-note[b-f0qo7hrl19] {
    margin: 10px 0 0;
    border-radius: 12px;
    padding: 9px 10px;
    color: #0f172a;
    background:
        linear-gradient(90deg, rgba(240, 247, 255, 0.96), rgba(255, 255, 255, 0.88)),
        #f0f7ff;
    box-shadow: inset 3px 0 0 #007aff;
}

.employee-day-request-note span[b-f0qo7hrl19] {
    display: block;
    margin-bottom: 4px;
    color: #2d628f;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.employee-day-request-note--rejection[b-f0qo7hrl19] {
    background:
        linear-gradient(90deg, rgba(255, 240, 239, 0.96), rgba(255, 255, 255, 0.88)),
        #fff1f2;
    box-shadow: inset 3px 0 0 #ff3b30;
}

.employee-day-request-note--rejection span[b-f0qo7hrl19] {
    color: #e11d48;
}

.employee-day-request-note p[b-f0qo7hrl19] {
    margin: 0;
    color: #0f172a;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.35;
}

.employee-day-request-decision[b-f0qo7hrl19] {
    display: block;
    margin-top: 8px;
    line-height: 1.35;
    text-align: center;
    overflow-wrap: anywhere;
}

.employee-day-empty strong[b-f0qo7hrl19],
.employee-day-empty span[b-f0qo7hrl19] {
    display: block;
}

.employee-day-empty strong[b-f0qo7hrl19] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-day-empty span[b-f0qo7hrl19] {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

@media (max-width: 380px) {
    .employee-day-page[b-f0qo7hrl19] {
        padding: 8px;
    }

    .employee-day-summary[b-f0qo7hrl19] {
        grid-template-columns: 1fr;
    }

    .employee-day-request-grid[b-f0qo7hrl19] {
        grid-template-columns: 1fr;
    }
}

/* Mobile Redesign */
.employee-day-page[b-f0qo7hrl19] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-cyan: #0891b2;
    --employee-danger: #e11d48;
    --employee-warning: #f59e0b;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-day-shell[b-f0qo7hrl19] {
    width: min(460px, 100%);
}

.employee-day-topbar[b-f0qo7hrl19] {
    min-height: 58px;
    margin: 0 0 14px;
    border-radius: 24px;
    padding: 8px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-day-back[b-f0qo7hrl19] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-day-back:hover[b-f0qo7hrl19],
.employee-day-back:focus-visible[b-f0qo7hrl19] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-day-kicker[b-f0qo7hrl19],
.employee-day-user[b-f0qo7hrl19],
.employee-day-summary span[b-f0qo7hrl19],
.employee-day-entry-head span[b-f0qo7hrl19],
.employee-day-entry-stats span[b-f0qo7hrl19],
.employee-day-break span[b-f0qo7hrl19],
.employee-day-history h2[b-f0qo7hrl19],
.employee-day-request-head span[b-f0qo7hrl19],
.employee-day-request-grid span[b-f0qo7hrl19],
.employee-day-request-grid small[b-f0qo7hrl19],
.employee-day-empty span[b-f0qo7hrl19] {
    color: var(--employee-muted);
}

.employee-day-topbar h1[b-f0qo7hrl19],
.employee-day-summary strong[b-f0qo7hrl19],
.employee-day-entry-head strong[b-f0qo7hrl19],
.employee-day-entry-stats strong[b-f0qo7hrl19],
.employee-day-break strong[b-f0qo7hrl19],
.employee-day-request-grid strong[b-f0qo7hrl19],
.employee-day-empty strong[b-f0qo7hrl19] {
    color: var(--employee-ink);
}

.employee-day-topbar h1[b-f0qo7hrl19] {
    font-size: clamp(1.06rem, 5.4vw, 1.34rem);
    line-height: 1.08;
}

.employee-day-summary[b-f0qo7hrl19] {
    gap: 8px;
    margin-bottom: 12px;
}

.employee-day-summary div[b-f0qo7hrl19],
.employee-day-entry[b-f0qo7hrl19],
.employee-day-empty[b-f0qo7hrl19],
.employee-day-request[b-f0qo7hrl19] {
    border: 0;
    border-radius: 22px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 16px 34px rgba(15, 23, 42, 0.09);
}

.employee-day-entry[b-f0qo7hrl19] {
    padding: 14px;
}

.employee-day-entry-stats div[b-f0qo7hrl19],
.employee-day-break[b-f0qo7hrl19],
.employee-day-request-grid div[b-f0qo7hrl19] {
    border-radius: 18px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-day-correction-btn[b-f0qo7hrl19] {
    border: 0;
    border-radius: 13px;
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.14);
}

.employee-day-correction-btn:hover[b-f0qo7hrl19],
.employee-day-correction-btn:focus-visible[b-f0qo7hrl19] {
    border-color: transparent;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 12px 24px rgba(15, 23, 42, 0.1);
}

.employee-day-delete-btn[b-f0qo7hrl19] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.14);
}

.employee-day-open[b-f0qo7hrl19] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-day-request[b-f0qo7hrl19] {
    border-left: 4px solid var(--employee-warning);
}

.employee-day-request--approved[b-f0qo7hrl19] {
    border-left-color: var(--employee-primary);
}

.employee-day-request--rejected[b-f0qo7hrl19] {
    border-left-color: var(--employee-danger);
}

.employee-day-request-head strong[b-f0qo7hrl19] {
    color: #a16207;
    background: rgba(245, 158, 11, 0.14);
}

.employee-day-request--approved .employee-day-request-head strong[b-f0qo7hrl19] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-day-request--rejected .employee-day-request-head strong[b-f0qo7hrl19] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

.employee-day-request-note[b-f0qo7hrl19] {
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 0 var(--employee-primary);
}

.employee-day-request-note span[b-f0qo7hrl19] {
    color: var(--employee-primary);
}

/* /Components/Pages/Employee/EmployeeTimeDelete.razor.rz.scp.css */
.employee-delete-page[b-8qs4clkhel] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(224, 244, 235, 0.92), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-delete-shell[b-8qs4clkhel] {
    width: min(430px, 100%);
    margin: 0 auto;
}

.employee-delete-topbar[b-8qs4clkhel] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-delete-back[b-8qs4clkhel] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-delete-back:hover[b-8qs4clkhel],
.employee-delete-back:focus-visible[b-8qs4clkhel] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-delete-kicker[b-8qs4clkhel] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-delete-topbar h1[b-8qs4clkhel] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 950;
}

.employee-delete-user[b-8qs4clkhel] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

.employee-delete-card[b-8qs4clkhel],
.employee-delete-empty[b-8qs4clkhel] {
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.84);
    box-shadow: 0 16px 36px rgba(23, 32, 27, 0.08);
}

.employee-delete-card[b-8qs4clkhel] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.employee-delete-original[b-8qs4clkhel] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    border: 1.5px solid rgba(225, 29, 72, 0.14);
    border-radius: 16px;
    padding: 12px;
    background:
        linear-gradient(135deg, rgba(255, 240, 239, 0.92), rgba(255, 255, 255, 0.86)),
        #ffffff;
}

.employee-delete-original-head[b-8qs4clkhel] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.employee-delete-original-head > div:first-child[b-8qs4clkhel] {
    min-width: 0;
}

.employee-delete-original span[b-8qs4clkhel],
.employee-delete-note span[b-8qs4clkhel] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-delete-original-head strong[b-8qs4clkhel] {
    display: block;
    color: #0f172a;
    font-size: 1.08rem;
    font-weight: 950;
}

.employee-delete-original-pill[b-8qs4clkhel] {
    min-width: 70px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 0 10px;
    color: #e11d48;
    background: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(225, 29, 72, 0.14);
    font-size: 0.82rem;
    font-weight: 950;
}

.employee-delete-original-grid[b-8qs4clkhel] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
}

.employee-delete-original-grid div[b-8qs4clkhel],
.employee-delete-original-breaks div[b-8qs4clkhel] {
    min-width: 0;
    border-radius: 12px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.78);
}

.employee-delete-original-grid strong[b-8qs4clkhel],
.employee-delete-original-breaks strong[b-8qs4clkhel] {
    display: block;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
    white-space: nowrap;
}

.employee-delete-original-breaks[b-8qs4clkhel] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.employee-delete-original-breaks div[b-8qs4clkhel] {
    border-left: 3px solid #f59e0b;
}

.employee-delete-note textarea[b-8qs4clkhel] {
    width: 100%;
    min-height: 98px;
    border: 1.5px solid rgba(37, 99, 235, 0.16);
    border-radius: 12px;
    padding: 10px;
    color: #0f172a;
    background: white;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 750;
    resize: vertical;
}

.employee-delete-note textarea:focus[b-8qs4clkhel] {
    border-color: #2563eb;
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.employee-delete-submit[b-8qs4clkhel] {
    min-height: 46px;
    border: none;
    border-radius: 14px;
    color: white;
    background: #e11d48;
    box-shadow: 0 14px 28px rgba(225, 29, 72, 0.22);
    font: inherit;
    font-size: 0.94rem;
    font-weight: 900;
    cursor: pointer;
}

.employee-delete-submit:disabled[b-8qs4clkhel] {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.58;
}

.employee-delete-message[b-8qs4clkhel] {
    margin: 0;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 0.82rem;
    font-weight: 800;
}

.employee-delete-message--error[b-8qs4clkhel] {
    color: #e11d48;
    background: #fff1f2;
}

.employee-delete-empty strong[b-8qs4clkhel],
.employee-delete-empty span[b-8qs4clkhel] {
    display: block;
}

.employee-delete-empty strong[b-8qs4clkhel] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-delete-empty span[b-8qs4clkhel] {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

@media (max-width: 380px) {
    .employee-delete-page[b-8qs4clkhel] {
        padding: 8px;
    }

    .employee-delete-original-grid[b-8qs4clkhel] {
        grid-template-columns: 1fr;
    }
}

/* Mobile Redesign */
.employee-delete-page[b-8qs4clkhel] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-danger: #e11d48;
    --employee-warning: #f59e0b;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-delete-shell[b-8qs4clkhel] {
    width: min(460px, 100%);
}

.employee-delete-topbar[b-8qs4clkhel],
.employee-delete-card[b-8qs4clkhel],
.employee-delete-empty[b-8qs4clkhel] {
    border: 0;
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-delete-topbar[b-8qs4clkhel] {
    min-height: 58px;
    margin: 0 0 14px;
    padding: 8px;
}

.employee-delete-back[b-8qs4clkhel] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-delete-back:hover[b-8qs4clkhel],
.employee-delete-back:focus-visible[b-8qs4clkhel] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-delete-kicker[b-8qs4clkhel],
.employee-delete-user[b-8qs4clkhel],
.employee-delete-original span[b-8qs4clkhel],
.employee-delete-note span[b-8qs4clkhel],
.employee-delete-empty span[b-8qs4clkhel] {
    color: var(--employee-muted);
}

.employee-delete-topbar h1[b-8qs4clkhel],
.employee-delete-original-head strong[b-8qs4clkhel],
.employee-delete-original-grid strong[b-8qs4clkhel],
.employee-delete-original-breaks strong[b-8qs4clkhel],
.employee-delete-empty strong[b-8qs4clkhel] {
    color: var(--employee-ink);
}

.employee-delete-topbar h1[b-8qs4clkhel] {
    font-size: clamp(1.06rem, 5.4vw, 1.34rem);
    line-height: 1.08;
}

.employee-delete-card[b-8qs4clkhel] {
    padding: 14px;
}

.employee-delete-original[b-8qs4clkhel] {
    border: 0;
    border-radius: 22px;
    background: rgba(225, 29, 72, 0.08);
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.employee-delete-original-grid div[b-8qs4clkhel],
.employee-delete-original-breaks div[b-8qs4clkhel] {
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.12);
}

.employee-delete-original-pill[b-8qs4clkhel] {
    color: var(--employee-danger);
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.18);
}

.employee-delete-original-breaks div[b-8qs4clkhel] {
    border-left: 3px solid var(--employee-warning);
}

.employee-delete-note textarea[b-8qs4clkhel] {
    border: 0;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

.employee-delete-note textarea:focus[b-8qs4clkhel] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.34), 0 0 0 4px rgba(37, 99, 235, 0.1);
}

.employee-delete-submit[b-8qs4clkhel] {
    min-height: 52px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-danger);
    box-shadow: 0 18px 34px rgba(225, 29, 72, 0.22);
    font-weight: 950;
}

.employee-delete-message--error[b-8qs4clkhel] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

/* /Components/Pages/Employee/EmployeeTimePicker.razor.rz.scp.css */
.employee-time-picker[b-ze4cyteye2] {
    position: relative;
    min-width: 0;
}

.employee-picker-display[b-ze4cyteye2] {
    width: 100%;
    min-height: 64px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 10px;
    align-items: center;
    border: 0;
    border-radius: 18px;
    padding: 12px 13px;
    color: var(--employee-ink, #111827);
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92));
    box-shadow: inset 0 0 0 1px var(--employee-line, rgba(37, 99, 235, 0.14)), 0 14px 30px rgba(15, 23, 42, 0.08);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-picker-display[b-ze4cyteye2]::after {
    content: "";
    width: 9px;
    height: 9px;
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
    border-right: 2px solid var(--employee-primary, #2563eb);
    border-bottom: 2px solid var(--employee-primary, #2563eb);
    transform: rotate(45deg) translateY(-2px);
}

.employee-picker-display span[b-ze4cyteye2],
.employee-picker-display strong[b-ze4cyteye2],
.employee-picker-display small[b-ze4cyteye2] {
    grid-column: 1;
}

.employee-picker-display span[b-ze4cyteye2] {
    color: var(--employee-muted, #64748b);
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-picker-display strong[b-ze4cyteye2] {
    color: var(--employee-ink, #111827);
    font-size: 1.08rem;
    font-weight: 950;
    font-variant-numeric: tabular-nums;
}

.employee-picker-display small[b-ze4cyteye2] {
    width: fit-content;
    min-height: 22px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    color: var(--employee-primary, #2563eb);
    background: rgba(37, 99, 235, 0.1);
    font-size: 0.66rem;
    font-weight: 900;
}

.employee-picker-display:hover[b-ze4cyteye2],
.employee-picker-display:focus-visible[b-ze4cyteye2] {
    outline: none;
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.32), 0 18px 34px rgba(15, 23, 42, 0.11);
}

.employee-picker-display:disabled[b-ze4cyteye2] {
    cursor: not-allowed;
    opacity: 0.56;
    transform: none;
}

.employee-picker-backdrop[b-ze4cyteye2] {
    position: fixed;
    inset: 0;
    z-index: 30;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

.employee-time-panel[b-ze4cyteye2] {
    position: absolute;
    z-index: 31;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    border-radius: 22px;
    padding: 10px;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line, rgba(37, 99, 235, 0.14)), 0 24px 60px rgba(15, 23, 42, 0.2);
}

.employee-time-stepper[b-ze4cyteye2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
}

.employee-time-stepper > div[b-ze4cyteye2] {
    display: grid;
    grid-template-rows: 36px 42px 36px;
    gap: 5px;
    border-radius: 18px;
    padding: 7px;
    background: #f8fafc;
    box-shadow: inset 0 0 0 1px var(--employee-line, rgba(37, 99, 235, 0.14));
}

.employee-time-stepper > span[b-ze4cyteye2],
.employee-time-stepper strong[b-ze4cyteye2] {
    color: var(--employee-ink, #111827);
    font-size: 1.42rem;
    font-weight: 950;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.employee-time-stepper button[b-ze4cyteye2] {
    border: 0;
    border-radius: 13px;
    color: var(--employee-primary, #2563eb);
    background: rgba(37, 99, 235, 0.1);
    font: inherit;
    font-weight: 950;
    cursor: pointer;
}

.employee-time-stepper button:hover[b-ze4cyteye2],
.employee-time-stepper button:focus-visible[b-ze4cyteye2] {
    outline: none;
    color: #ffffff;
    background: var(--employee-primary, #2563eb);
}

/* /Components/Pages/Employee/EmployeeTimes.razor.rz.scp.css */
.employee-times-page[b-2iisokba3z] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(224, 244, 235, 0.92), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-times-shell[b-2iisokba3z] {
    width: min(400px, 100%);
    margin: 0 auto;
}

.employee-times-topbar[b-2iisokba3z] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-times-back[b-2iisokba3z] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-times-back:hover[b-2iisokba3z],
.employee-times-back:focus-visible[b-2iisokba3z] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-times-kicker[b-2iisokba3z] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-times-topbar h1[b-2iisokba3z] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.22rem;
    font-weight: 950;
}

.employee-times-user[b-2iisokba3z] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

.employee-times-summary[b-2iisokba3z] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin-bottom: 10px;
}

.employee-times-summary div[b-2iisokba3z] {
    min-width: 0;
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 13px;
    padding: 9px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 10px 22px rgba(23, 32, 27, 0.06);
}

.employee-times-summary span[b-2iisokba3z] {
    display: block;
    margin-bottom: 4px;
    color: #64748b;
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-times-summary strong[b-2iisokba3z] {
    display: block;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-times-list[b-2iisokba3z] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.employee-times-month h2[b-2iisokba3z] {
    margin: 0 0 8px;
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.employee-times-month-list[b-2iisokba3z] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.employee-time-row[b-2iisokba3z],
.employee-times-empty[b-2iisokba3z] {
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(23, 32, 27, 0.07);
}

.employee-time-row[b-2iisokba3z] {
    min-height: 62px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    width: 100%;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}

.employee-time-row:hover[b-2iisokba3z],
.employee-time-row:focus-visible[b-2iisokba3z] {
    border-color: #2563eb;
    background: white;
    outline: none;
    transform: translateY(-1px);
}

.employee-time-row:disabled[b-2iisokba3z] {
    cursor: default;
    transform: none;
}

.employee-time-row:disabled:hover[b-2iisokba3z] {
    border-color: rgba(184, 98, 34, 0.18);
    background: rgba(255, 255, 255, 0.82);
}

.employee-time-row--vacation[b-2iisokba3z] {
    position: relative;
    border-color: rgba(184, 98, 34, 0.18);
    cursor: default;
}

.employee-time-row--vacation:hover[b-2iisokba3z],
.employee-time-row--vacation:focus-visible[b-2iisokba3z] {
    border-color: rgba(184, 98, 34, 0.18);
    background: rgba(255, 255, 255, 0.82);
    transform: none;
}

.employee-time-row--vacation .employee-time-date[b-2iisokba3z] {
    background: #e6faff;
}

.employee-time-row--vacation .employee-time-type[b-2iisokba3z] {
    color: #0891b2;
}

.employee-time-date[b-2iisokba3z] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 12px;
    background: #eaf1ff;
}

.employee-time-date strong[b-2iisokba3z] {
    color: #0f172a;
    font-size: 0.82rem;
    font-weight: 950;
}

.employee-time-date span[b-2iisokba3z] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
}

.employee-time-main[b-2iisokba3z] {
    min-width: 0;
}

.employee-time-main span[b-2iisokba3z],
.employee-time-main strong[b-2iisokba3z],
.employee-time-main small[b-2iisokba3z] {
    display: block;
}

.employee-time-main span[b-2iisokba3z] {
    color: #64748b;
    font-size: 0.78rem;
    font-weight: 750;
}

.employee-time-main strong[b-2iisokba3z] {
    margin-top: 3px;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 950;
}

.employee-time-main small[b-2iisokba3z] {
    margin-top: 2px;
    color: #64748b;
    font-size: 0.7rem;
    font-weight: 700;
}

.employee-time-open[b-2iisokba3z] {
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    color: #17694d;
    background: #e3f6ed;
    font-size: 0.68rem;
    font-weight: 850;
}

.employee-time-chevron[b-2iisokba3z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8a948f;
}

.employee-time-info-wrap[b-2iisokba3z] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.employee-time-info-btn[b-2iisokba3z] {
    width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #0891b2;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.employee-time-info-btn svg[b-2iisokba3z] {
    width: 22px;
    height: 22px;
}

.employee-time-info-btn:hover[b-2iisokba3z],
.employee-time-info-btn:focus-visible[b-2iisokba3z] {
    color: #7a4700;
    outline: none;
}

.employee-time-info-popover[b-2iisokba3z] {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 3;
    width: min(300px, calc(100vw - 48px));
    border: 1.5px solid #c5deff;
    border-radius: 14px;
    padding: 14px 36px 14px 14px;
    color: #1c1c1e;
    background: #f0f7ff;
    box-shadow: 0 14px 34px rgba(0, 122, 255, 0.16);
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.35;
}

.employee-time-info-close[b-2iisokba3z] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #8e8e93;
    background: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    cursor: pointer;
}

.employee-time-info-close:hover[b-2iisokba3z] {
    color: #1c1c1e;
    background: white;
}

.employee-times-empty[b-2iisokba3z] {
    padding: 14px;
}

.employee-times-empty strong[b-2iisokba3z],
.employee-times-empty span[b-2iisokba3z] {
    display: block;
}

.employee-times-empty strong[b-2iisokba3z] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-times-empty span[b-2iisokba3z] {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

@media (max-width: 380px) {
    .employee-times-page[b-2iisokba3z] {
        padding: 8px;
    }

    .employee-times-summary[b-2iisokba3z] {
        grid-template-columns: 1fr;
    }

    .employee-time-info-popover[b-2iisokba3z] {
        position: fixed;
        top: auto;
        right: 10px;
        bottom: 14px;
        left: 10px;
        width: auto;
    }
}

/* Mobile Redesign */
.employee-times-page[b-2iisokba3z] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-cyan: #0891b2;
    --employee-danger: #e11d48;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-times-shell[b-2iisokba3z] {
    width: min(460px, 100%);
}

.employee-times-topbar[b-2iisokba3z] {
    min-height: 58px;
    margin: 0 0 14px;
    border-radius: 24px;
    padding: 8px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-times-back[b-2iisokba3z] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-times-back:hover[b-2iisokba3z],
.employee-times-back:focus-visible[b-2iisokba3z] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-times-kicker[b-2iisokba3z],
.employee-times-user[b-2iisokba3z],
.employee-times-month h2[b-2iisokba3z],
.employee-times-summary span[b-2iisokba3z],
.employee-time-main span[b-2iisokba3z],
.employee-time-main small[b-2iisokba3z] {
    color: var(--employee-muted);
}

.employee-times-topbar h1[b-2iisokba3z],
.employee-times-summary strong[b-2iisokba3z],
.employee-time-main strong[b-2iisokba3z],
.employee-time-date strong[b-2iisokba3z],
.employee-times-empty strong[b-2iisokba3z] {
    color: var(--employee-ink);
}

.employee-times-topbar h1[b-2iisokba3z] {
    font-size: clamp(1.06rem, 5.4vw, 1.34rem);
    line-height: 1.08;
}

.employee-times-summary[b-2iisokba3z] {
    gap: 8px;
    margin-bottom: 12px;
}

.employee-times-summary div[b-2iisokba3z],
.employee-time-row[b-2iisokba3z],
.employee-times-empty[b-2iisokba3z] {
    border: 0;
    border-radius: 22px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 16px 34px rgba(15, 23, 42, 0.09);
}

.employee-times-summary div[b-2iisokba3z] {
    padding: 10px;
}

.employee-time-row[b-2iisokba3z] {
    min-height: 74px;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    padding: 12px;
    transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), box-shadow 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

.employee-time-row:hover[b-2iisokba3z],
.employee-time-row:focus-visible[b-2iisokba3z] {
    border-color: transparent;
    background: #ffffff;
    transform: translateY(-2px);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.24), 0 16px 28px rgba(15, 23, 42, 0.1);
}

.employee-time-date[b-2iisokba3z] {
    border-radius: 17px;
    background: #eaf1ff;
}

.employee-time-date span[b-2iisokba3z] {
    color: var(--employee-primary);
}

.employee-time-row--vacation[b-2iisokba3z] {
    border-color: transparent;
}

.employee-time-row--vacation .employee-time-date[b-2iisokba3z] {
    background: #e6faff;
}

.employee-time-row--vacation .employee-time-type[b-2iisokba3z] {
    color: var(--employee-cyan);
}

.employee-time-open[b-2iisokba3z] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-time-info-btn[b-2iisokba3z] {
    color: var(--employee-cyan);
}

.employee-time-info-popover[b-2iisokba3z] {
    border: 0;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(8, 145, 178, 0.2), 0 18px 42px rgba(15, 23, 42, 0.16);
}

/* /Components/Pages/Employee/EmployeeVacation.razor.rz.scp.css */
.employee-vacation-page[b-qkzchdyzm5] {
    min-height: 100vh;
    padding: 12px;
    color: #0f172a;
    background:
        linear-gradient(180deg, rgba(224, 244, 235, 0.92), rgba(246, 247, 242, 0.96) 42%),
        #f8fafc;
    font-family: -apple-system, system-ui, sans-serif;
}

.employee-vacation-shell[b-qkzchdyzm5] {
    width: min(400px, 100%);
    margin: 0 auto;
}

.employee-vacation-topbar[b-qkzchdyzm5] {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding-top: 2px;
}

.employee-vacation-back[b-qkzchdyzm5] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(37, 99, 235, 0.18);
    border-radius: 12px;
    padding: 0;
    color: #2563eb;
    background: rgba(255, 255, 255, 0.72);
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(23, 32, 27, 0.08);
}

.employee-vacation-back:hover[b-qkzchdyzm5],
.employee-vacation-back:focus-visible[b-qkzchdyzm5] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-vacation-kicker[b-qkzchdyzm5] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-vacation-topbar h1[b-qkzchdyzm5] {
    margin: 2px 0 0;
    color: #0f172a;
    font-size: 1.22rem;
    font-weight: 950;
}

.employee-vacation-user[b-qkzchdyzm5] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 800;
}

.employee-vacation-card[b-qkzchdyzm5],
.employee-vacation-list[b-qkzchdyzm5] {
    border: 1.5px solid rgba(37, 99, 235, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 12px 28px rgba(23, 32, 27, 0.07);
}

.employee-vacation-card[b-qkzchdyzm5] {
    padding: 12px;
}

.employee-vacation-summary[b-qkzchdyzm5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.employee-vacation-summary div[b-qkzchdyzm5] {
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    padding: 9px;
    background: rgba(246, 247, 242, 0.72);
}

.employee-vacation-summary span[b-qkzchdyzm5],
.employee-vacation-field span[b-qkzchdyzm5] {
    display: block;
    margin-bottom: 5px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 850;
    text-transform: uppercase;
}

.employee-vacation-summary strong[b-qkzchdyzm5] {
    color: #0f172a;
    font-size: 1rem;
    font-weight: 950;
}

.employee-vacation-form[b-qkzchdyzm5] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.employee-vacation-field[b-qkzchdyzm5] {
    min-width: 0;
}

.employee-vacation-field input[b-qkzchdyzm5] {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
    width: 100%;
    inline-size: 100%;
    display: block;
    -webkit-appearance: none;
    appearance: none;
    height: 38px;
    border: 1.5px solid rgba(37, 99, 235, 0.16);
    border-radius: 11px;
    padding: 0 6px;
    color: #0f172a;
    background: rgba(246, 247, 242, 0.7);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: normal;
}

.employee-vacation-field input[type="date"][b-qkzchdyzm5]::-webkit-date-and-time-value {
    min-width: 0;
    text-align: left;
}

.employee-vacation-field input[b-qkzchdyzm5]::-webkit-datetime-edit {
    min-width: 0;
    padding: 0;
}

.employee-vacation-field input[type="date"][b-qkzchdyzm5]::-webkit-calendar-picker-indicator {
    margin: 0;
    padding: 0;
}

.employee-vacation-field input:focus[b-qkzchdyzm5] {
    border-color: #2563eb;
    background: white;
    outline: none;
}

.employee-vacation-field input:disabled[b-qkzchdyzm5] {
    cursor: not-allowed;
    color: #7f8b85;
    background: rgba(235, 238, 232, 0.72);
    opacity: 0.72;
}

.employee-vacation-day-mode[b-qkzchdyzm5] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 5px;
    min-width: 0;
    border: 1px solid rgba(37, 99, 235, 0.12);
    border-radius: 12px;
    padding: 7px;
    background: rgba(246, 247, 242, 0.72);
}

.employee-vacation-day-mode span[b-qkzchdyzm5] {
    color: #64748b;
    font-size: 0.72rem;
    font-weight: 850;
}

.employee-vacation-mode-btn[b-qkzchdyzm5] {
    min-width: 42px;
    height: 30px;
    border: 1.5px solid rgba(37, 99, 235, 0.16);
    border-radius: 9px;
    padding: 0 7px;
    color: #64748b;
    background: white;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
}

.employee-vacation-mode-btn--active[b-qkzchdyzm5] {
    border-color: #2563eb;
    color: white;
    background: #2563eb;
}

.employee-vacation-mode-btn:disabled[b-qkzchdyzm5] {
    cursor: not-allowed;
    opacity: 0.45;
}

.employee-vacation-hint[b-qkzchdyzm5] {
    grid-column: 1 / -1;
    margin: 0;
    border: 1px solid rgba(225, 29, 72, 0.18);
    border-radius: 11px;
    padding: 9px 10px;
    color: #e11d48;
    background: #fff1f2;
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.35;
}

.employee-vacation-hint--success[b-qkzchdyzm5] {
    border-color: rgba(37, 99, 235, 0.18);
    color: #2563eb;
    background: #eaf1ff;
}

.employee-vacation-preview[b-qkzchdyzm5] {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
}

.employee-vacation-preview span[b-qkzchdyzm5] {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 9px;
    padding: 0 5px;
    color: #64748b;
    background: white;
    font-size: 0.68rem;
    font-weight: 800;
    min-width: 0;
}

.employee-vacation-preview strong[b-qkzchdyzm5] {
    color: #0f172a;
    font-size: 0.68rem;
    font-weight: 950;
}

.employee-vacation-submit[b-qkzchdyzm5] {
    grid-column: 1 / -1;
    min-height: 44px;
    border: none;
    border-radius: 13px;
    color: white;
    background: #2563eb;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 900;
    cursor: pointer;
}

.employee-vacation-submit:hover[b-qkzchdyzm5],
.employee-vacation-submit:focus-visible[b-qkzchdyzm5] {
    filter: brightness(0.96);
    outline: none;
}

.employee-vacation-submit:disabled[b-qkzchdyzm5] {
    cursor: not-allowed;
    filter: grayscale(0.25);
    opacity: 0.55;
}

.employee-vacation-list[b-qkzchdyzm5] {
    margin-top: 10px;
    overflow: hidden;
}

.employee-vacation-list h2[b-qkzchdyzm5] {
    margin: 0;
    padding: 12px 12px 4px;
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 950;
}

.employee-vacation-row[b-qkzchdyzm5] {
    min-height: 62px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-top: 1px solid rgba(37, 99, 235, 0.1);
}

.employee-vacation-date[b-qkzchdyzm5] {
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #eaf1ff;
}

.employee-vacation-row--pending .employee-vacation-date[b-qkzchdyzm5] {
    background: #fff4d6;
}

.employee-vacation-row--rejected .employee-vacation-date[b-qkzchdyzm5] {
    background: #fff1f2;
}

.employee-vacation-row--delete-pending .employee-vacation-date[b-qkzchdyzm5] {
    background: #edf0f5;
}

.employee-vacation-date strong[b-qkzchdyzm5] {
    color: #0f172a;
    font-size: 1.1rem;
    font-weight: 950;
    line-height: 1;
}

.employee-vacation-date span[b-qkzchdyzm5],
.employee-vacation-main span[b-qkzchdyzm5] {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 800;
}

.employee-vacation-date span[b-qkzchdyzm5] {
    margin-top: 3px;
    text-transform: uppercase;
}

.employee-vacation-main strong[b-qkzchdyzm5] {
    display: block;
    margin-top: 3px;
    color: #0f172a;
    font-size: 0.86rem;
    font-weight: 950;
    line-height: 1.35;
    text-align: left;
    overflow-wrap: anywhere;
}

.employee-vacation-status[b-qkzchdyzm5] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-top: 6px;
    border-radius: 999px;
    padding: 3px 8px;
    text-transform: uppercase;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

.employee-vacation-rejection[b-qkzchdyzm5] {
    margin-top: 8px;
    border-radius: 12px;
    padding: 8px 9px;
    background: #fff1f2;
    box-shadow: inset 3px 0 0 #ff3b30;
}

.employee-vacation-rejection span[b-qkzchdyzm5] {
    display: block;
    margin-bottom: 4px;
    color: #e11d48;
    font-size: 0.62rem;
    font-weight: 900;
    text-transform: uppercase;
}

.employee-vacation-rejection p[b-qkzchdyzm5] {
    margin: 0;
    color: #0f172a;
    font-size: 0.76rem;
    font-weight: 700;
    line-height: 1.35;
}

.employee-vacation-status--pending[b-qkzchdyzm5] {
    color: #8a5b00;
    background: #fff4d6;
}

.employee-vacation-status--approved[b-qkzchdyzm5] {
    color: #2563eb;
    background: #eaf1ff;
}

.employee-vacation-status--rejected[b-qkzchdyzm5] {
    color: #e11d48;
    background: #fff1f2;
}

.employee-vacation-status--delete-pending[b-qkzchdyzm5] {
    color: #556070;
    background: #edf0f5;
}

.employee-vacation-delete[b-qkzchdyzm5] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid rgba(225, 29, 72, 0.16);
    border-radius: 11px;
    padding: 0;
    color: #e11d48;
    background: #fff1f2;
    cursor: pointer;
}

.employee-vacation-delete:hover[b-qkzchdyzm5],
.employee-vacation-delete:focus-visible[b-qkzchdyzm5] {
    border-color: #e11d48;
    background: white;
    outline: none;
}

.employee-vacation-row-spacer[b-qkzchdyzm5] {
    width: 34px;
    height: 34px;
}

.employee-vacation-empty[b-qkzchdyzm5] {
    padding: 12px;
    border-top: 1px solid rgba(37, 99, 235, 0.1);
}

.employee-vacation-empty strong[b-qkzchdyzm5],
.employee-vacation-empty span[b-qkzchdyzm5] {
    display: block;
}

.employee-vacation-empty strong[b-qkzchdyzm5] {
    color: #0f172a;
    font-size: 0.9rem;
    font-weight: 900;
}

.employee-vacation-empty span[b-qkzchdyzm5] {
    margin-top: 4px;
    color: #64748b;
    font-size: 0.8rem;
    font-weight: 650;
}

@media (max-width: 360px) {
    .employee-vacation-page[b-qkzchdyzm5] {
        padding: 8px;
    }

    .employee-vacation-card[b-qkzchdyzm5] {
        padding: 10px;
    }

    .employee-vacation-field input[b-qkzchdyzm5] {
        height: 36px;
        font-size: 0.72rem;
        padding: 0 4px;
    }

    .employee-vacation-mode-btn[b-qkzchdyzm5] {
        min-width: 38px;
        padding: 0 5px;
    }

    .employee-vacation-preview[b-qkzchdyzm5] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile Redesign */
.employee-vacation-page[b-qkzchdyzm5] {
    --employee-ink: #0f172a;
    --employee-muted: #64748b;
    --employee-primary: #2563eb;
    --employee-cyan: #0891b2;
    --employee-danger: #e11d48;
    --employee-line: rgba(37, 99, 235, 0.14);
    --employee-panel: rgba(255, 255, 255, 0.78);
    --employee-soft: rgba(248, 250, 252, 0.86);
    min-height: 100dvh;
    padding: max(14px, env(safe-area-inset-top)) 14px max(28px, env(safe-area-inset-bottom));
    color: var(--employee-ink);
    background: transparent;
    font-family: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    overflow-x: hidden;
}

.employee-vacation-shell[b-qkzchdyzm5] {
    width: min(460px, 100%);
}

.employee-vacation-topbar[b-qkzchdyzm5],
.employee-vacation-card[b-qkzchdyzm5],
.employee-vacation-list[b-qkzchdyzm5] {
    border: 0;
    border-radius: 24px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 18px 44px rgba(15, 23, 42, 0.1);
}

.employee-vacation-topbar[b-qkzchdyzm5] {
    min-height: 58px;
    margin: 0 0 14px;
    padding: 8px;
}

.employee-vacation-back[b-qkzchdyzm5] {
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 16px;
    color: var(--employee-primary);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 12px 24px rgba(15, 23, 42, 0.08);
}

.employee-vacation-back:hover[b-qkzchdyzm5],
.employee-vacation-back:focus-visible[b-qkzchdyzm5] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.3), 0 16px 28px rgba(15, 23, 42, 0.12);
}

.employee-vacation-kicker[b-qkzchdyzm5],
.employee-vacation-user[b-qkzchdyzm5],
.employee-vacation-summary span[b-qkzchdyzm5],
.employee-vacation-day-mode span[b-qkzchdyzm5],
.employee-vacation-main span[b-qkzchdyzm5],
.employee-vacation-main small[b-qkzchdyzm5],
.employee-vacation-empty span[b-qkzchdyzm5] {
    color: var(--employee-muted);
}

.employee-vacation-topbar h1[b-qkzchdyzm5],
.employee-vacation-summary strong[b-qkzchdyzm5],
.employee-vacation-main strong[b-qkzchdyzm5],
.employee-vacation-date strong[b-qkzchdyzm5],
.employee-vacation-empty strong[b-qkzchdyzm5] {
    color: var(--employee-ink);
}

.employee-vacation-topbar h1[b-qkzchdyzm5] {
    font-size: clamp(1.06rem, 5.4vw, 1.34rem);
    line-height: 1.08;
}

.employee-vacation-card[b-qkzchdyzm5] {
    padding: 14px;
}

.employee-vacation-summary[b-qkzchdyzm5] {
    gap: 8px;
    margin-bottom: 12px;
}

.employee-vacation-summary div[b-qkzchdyzm5],
.employee-vacation-day-mode[b-qkzchdyzm5] {
    border: 0;
    border-radius: 18px;
    background: var(--employee-soft);
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.08);
}

.employee-vacation-form[b-qkzchdyzm5] {
    grid-template-columns: 1fr;
    gap: 10px;
}

.employee-vacation-form > .employee-date-picker[b-qkzchdyzm5] {
    grid-column: 1 / -1;
}

.employee-vacation-day-mode[b-qkzchdyzm5] {
    min-height: 52px;
    padding: 8px;
}

.employee-vacation-mode-btn[b-qkzchdyzm5] {
    min-width: 52px;
    height: 34px;
    border: 0;
    border-radius: 13px;
    color: var(--employee-muted);
    box-shadow: inset 0 0 0 1px var(--employee-line);
}

.employee-vacation-mode-btn--active[b-qkzchdyzm5] {
    color: #ffffff;
    background: var(--employee-primary);
    box-shadow: none;
}

.employee-vacation-hint[b-qkzchdyzm5],
.employee-vacation-preview span[b-qkzchdyzm5] {
    border: 0;
    border-radius: 16px;
    box-shadow: inset 0 0 0 1px rgba(37, 99, 235, 0.1);
}

.employee-vacation-hint[b-qkzchdyzm5] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

.employee-vacation-hint--success[b-qkzchdyzm5] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-vacation-preview[b-qkzchdyzm5] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.employee-vacation-submit[b-qkzchdyzm5] {
    min-height: 52px;
    border-radius: 18px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.12), transparent 38%), var(--employee-primary);
    box-shadow: 0 18px 34px rgba(37, 99, 235, 0.24);
    font-weight: 950;
}

.employee-vacation-list[b-qkzchdyzm5] {
    margin-top: 12px;
    overflow: visible;
    background: transparent;
    box-shadow: none;
}

.employee-vacation-list h2[b-qkzchdyzm5] {
    padding: 0 2px 8px;
    color: var(--employee-muted);
    font-size: 0.72rem;
    font-weight: 900;
    text-transform: uppercase;
}

.employee-vacation-row[b-qkzchdyzm5],
.employee-vacation-empty[b-qkzchdyzm5] {
    border: 0;
    border-radius: 22px;
    background: var(--employee-panel);
    box-shadow: inset 0 0 0 1px var(--employee-line), 0 16px 34px rgba(15, 23, 42, 0.09);
}

.employee-vacation-row[b-qkzchdyzm5] {
    min-height: 74px;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 34px;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 12px;
}

.employee-vacation-date[b-qkzchdyzm5] {
    min-height: 44px;
    border-radius: 17px;
    background: #e6faff;
}

.employee-vacation-date strong[b-qkzchdyzm5] {
    font-size: 0.82rem;
}

.employee-vacation-date span[b-qkzchdyzm5] {
    color: var(--employee-cyan);
    font-size: 0.68rem;
}

.employee-vacation-type[b-qkzchdyzm5] {
    display: block;
    font-size: 0.78rem;
    font-weight: 750;
}

.employee-vacation-main strong[b-qkzchdyzm5] {
    display: block;
    margin-top: 3px;
    font-size: 0.98rem;
}

.employee-vacation-main small[b-qkzchdyzm5] {
    display: block;
    margin-top: 2px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
}

.employee-vacation-status[b-qkzchdyzm5] {
    border-radius: 999px;
    padding: 4px 8px;
}

.employee-vacation-status--pending[b-qkzchdyzm5] {
    color: #a16207;
    background: rgba(245, 158, 11, 0.14);
}

.employee-vacation-status--approved[b-qkzchdyzm5] {
    color: var(--employee-primary);
    background: rgba(37, 99, 235, 0.1);
}

.employee-vacation-status--rejected[b-qkzchdyzm5] {
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
}

.employee-vacation-status--delete-pending[b-qkzchdyzm5] {
    color: var(--employee-muted);
    background: rgba(100, 116, 139, 0.12);
}

.employee-vacation-delete[b-qkzchdyzm5] {
    border: 0;
    border-radius: 13px;
    color: var(--employee-danger);
    background: rgba(225, 29, 72, 0.1);
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.14);
}

.employee-vacation-delete:hover[b-qkzchdyzm5],
.employee-vacation-delete:focus-visible[b-qkzchdyzm5] {
    border-color: transparent;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(225, 29, 72, 0.28), 0 12px 24px rgba(15, 23, 42, 0.1);
}

/* /Components/Pages/Login.razor.rz.scp.css */
.login-page[b-qlhcovlzg3] {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background:
        linear-gradient(135deg, rgba(0,122,255,0.08), rgba(13,148,136,0.07) 42%, rgba(255,255,255,0) 70%),
        #f5f5f7;
}

.login-shell[b-qlhcovlzg3] {
    width: min(880px, 100%);
    min-height: 500px;
    display: grid;
    grid-template-columns: minmax(260px, 0.9fr) minmax(340px, 1fr);
    overflow: hidden;
    background: white;
    border: 1px solid #e5e5ea;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.16);
}

.login-brand[b-qlhcovlzg3] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 40px 32px 32px;
    color: white;
    overflow: hidden;
}

.login-brand[b-qlhcovlzg3]::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.16), rgba(0,0,0,0.18) 58%, rgba(0,0,0,0.34)),
        linear-gradient(90deg, rgba(0,0,0,0.34), rgba(0,0,0,0.06));
}

.login-slideshow[b-qlhcovlzg3] {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.login-slide[b-qlhcovlzg3] {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    filter: brightness(1.18) saturate(1.08) contrast(0.96);
    opacity: 0;
    animation: login-slide-b-qlhcovlzg3 36s infinite;
    transform: scale(1.04);
}

.login-slide:nth-child(2)[b-qlhcovlzg3] {
    animation-delay: 6s;
}

.login-slide:nth-child(3)[b-qlhcovlzg3] {
    animation-delay: 12s;
}

.login-slide:nth-child(4)[b-qlhcovlzg3] {
    animation-delay: 18s;
}

.login-slide:nth-child(5)[b-qlhcovlzg3] {
    animation-delay: 24s;
}

.login-slide:nth-child(6)[b-qlhcovlzg3] {
    animation-delay: 30s;
}

@keyframes login-slide-b-qlhcovlzg3 {
    0% {
        opacity: 1;
        transform: scale(1.04);
    }

    10% {
        opacity: 1;
    }

    16.666% {
        opacity: 1;
        transform: scale(1.08);
    }

    26.666% {
        opacity: 0;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.1);
    }
}

.login-brand-logo[b-qlhcovlzg3] {
    position: relative;
    z-index: 2;
    width: 220px;
    max-width: 75%;
    height: auto;
    display: block;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.28));
}

.login-slide-progress[b-qlhcovlzg3] {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    width: 84px;
    height: 4px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255,255,255,0.28);
}

.login-slide-progress[b-qlhcovlzg3]::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: white;
    transform-origin: left center;
    animation: login-progress-b-qlhcovlzg3 6s linear infinite;
}

@keyframes login-progress-b-qlhcovlzg3 {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

.login-panel[b-qlhcovlzg3] {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    background: white;
    padding: 40px;
}

.login-header[b-qlhcovlzg3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 4px;
}

.login-header h2[b-qlhcovlzg3] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1.7rem;
    font-weight: 720;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.login-subtitle[b-qlhcovlzg3] {
    margin: 0;
    color: #6c6c70;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.login-error[b-qlhcovlzg3] {
    color: #b42318;
    background: #fff0ef;
    border: 1px solid #ffccc9;
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-weight: 600;
}

.login-field[b-qlhcovlzg3] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.login-field label[b-qlhcovlzg3] {
    color: #3c3c43;
    font-size: 0.84rem;
    font-weight: 700;
}

.login-input-wrap[b-qlhcovlzg3] {
    position: relative;
    display: flex;
    align-items: center;
}

.login-input-wrap svg[b-qlhcovlzg3] {
    position: absolute;
    left: 13px;
    color: #8e8e93;
    pointer-events: none;
}

.login-input-wrap .password-toggle[b-qlhcovlzg3] {
    position: absolute;
    right: 8px;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9px;
    color: #636366;
    background: transparent;
    cursor: pointer;
}

.login-input-wrap .password-toggle svg[b-qlhcovlzg3] {
    position: static;
    left: auto;
    pointer-events: none;
}

.password-toggle:hover[b-qlhcovlzg3] {
    color: #1c1c1e;
    background: #f2f2f7;
}

.password-toggle:focus-visible[b-qlhcovlzg3] {
    outline: 3px solid rgba(0,122,255,0.22);
    outline-offset: 1px;
}

.password-toggle .password-toggle-hide[b-qlhcovlzg3] {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-show[b-qlhcovlzg3] {
    display: none;
}

.password-toggle[aria-pressed="true"] .password-toggle-hide[b-qlhcovlzg3] {
    display: block;
}

.login-field input[b-qlhcovlzg3] {
    width: 100%;
    border: 1.5px solid #d1d1d6;
    border-radius: 11px;
    padding: 12px 12px 12px 42px;
    font: inherit;
    color: #1c1c1e;
    background: white;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
}

.login-input-wrap--password input[b-qlhcovlzg3] {
    padding-right: 50px;
}

.login-field input:focus[b-qlhcovlzg3] {
    outline: none;
    border-color: #007aff;
    background: #f5faff;
    box-shadow: 0 0 0 3px rgba(0,122,255,0.1);
}

.login-remember[b-qlhcovlzg3] {
    display: inline-flex;
    position: relative;
    width: fit-content;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 40px;
    margin-top: -4px;
    padding: 7px 13px 7px 9px;
    color: #2c2c2e;
    border: 1px solid #d8e3f2;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.94), rgba(246,250,255,0.86)),
        #f8fbff;
    box-shadow: 0 8px 18px rgba(0,47,110,0.08), inset 0 1px 0 rgba(255,255,255,0.92);
    font-size: 0.88rem;
    font-weight: 720;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.18s, box-shadow 0.18s, color 0.18s, transform 0.18s;
}

.login-remember input[b-qlhcovlzg3] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.login-remember-box[b-qlhcovlzg3] {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
    border: 1.5px solid #b9c9dc;
    border-radius: 8px;
    color: white;
    background: linear-gradient(180deg, #ffffff, #edf4fb);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95);
    transition: border-color 0.18s, background 0.18s, box-shadow 0.18s, transform 0.18s;
}

.login-remember-box svg[b-qlhcovlzg3] {
    opacity: 0;
    transform: translateY(6px) scale(0.74);
    transition: opacity 0.16s, transform 0.18s;
}

.login-remember:hover[b-qlhcovlzg3] {
    color: #1c1c1e;
    border-color: #b7d6ff;
    box-shadow: 0 10px 22px rgba(0,93,190,0.12), inset 0 1px 0 rgba(255,255,255,0.95);
    transform: translateY(-1px);
}

.login-remember:has(input:checked)[b-qlhcovlzg3] {
    color: #0a4f9d;
    border-color: #8ec5ff;
    background:
        linear-gradient(180deg, rgba(245,251,255,0.98), rgba(230,244,255,0.9)),
        #edf8ff;
}

.login-remember:has(input:checked) .login-remember-box[b-qlhcovlzg3] {
    border-color: #007aff;
    background: linear-gradient(135deg, #007aff, #0d9488);
    box-shadow: 0 7px 14px rgba(0,122,255,0.24), inset 0 1px 0 rgba(255,255,255,0.24);
}

.login-remember:has(input:checked) .login-remember-box svg[b-qlhcovlzg3] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.login-remember:has(input:focus-visible)[b-qlhcovlzg3] {
    outline: 3px solid rgba(0,122,255,0.22);
    outline-offset: 4px;
}

.login-remember:active[b-qlhcovlzg3] {
    transform: translateY(0);
}

.login-actions[b-qlhcovlzg3] {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 10px;
    padding-top: 12px;
}

.login-submit[b-qlhcovlzg3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    border-radius: 13px;
    padding: 0 18px;
    justify-self: stretch;
    color: white;
    background: #007aff;
    border: none;
    box-shadow: 0 10px 22px rgba(0,122,255,0.26);
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.login-submit:hover[b-qlhcovlzg3] {
    background: #006ee6;
    box-shadow: 0 12px 26px rgba(0,122,255,0.32);
    transform: translateY(-1px);
}

.login-submit:active[b-qlhcovlzg3] {
    transform: translateY(0);
    box-shadow: 0 7px 16px rgba(0,122,255,0.24);
}

.login-submit:focus-visible[b-qlhcovlzg3] {
    outline: 3px solid rgba(0,122,255,0.24);
    outline-offset: 3px;
}

@media (max-width: 700px) {
    .login-page[b-qlhcovlzg3] {
        align-items: center;
        padding: 16px;
    }

    .login-shell[b-qlhcovlzg3] {
        min-height: auto;
        grid-template-columns: 1fr;
        border-radius: 18px;
    }

    .login-brand[b-qlhcovlzg3] {
        min-height: 320px;
        padding: 32px 22px 36px;
    }

    .login-brand-logo[b-qlhcovlzg3] {
        width: 190px;
    }

    .login-slide-progress[b-qlhcovlzg3] {
        bottom: 14px;
        width: 72px;
    }

    .login-panel[b-qlhcovlzg3] {
        height: auto;
        padding: 26px 22px 30px;
        gap: 18px;
    }

    .login-header h2[b-qlhcovlzg3] {
        font-size: 1.45rem;
    }

    .login-subtitle[b-qlhcovlzg3] {
        font-size: 0.9rem;
    }

    .login-actions[b-qlhcovlzg3] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .login-submit[b-qlhcovlzg3] {
        width: 100%;
    }
}
/* /Components/Pages/Users.razor.rz.scp.css */
.users-page[b-n2ufvzfj8t] {
    min-height: calc(100vh - 48px);
    padding: 28px;
    color: #1c1c1e;
    background: #f5f5f7;
    font-family: -apple-system, system-ui, sans-serif;
}

.users-sr-only[b-n2ufvzfj8t] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.users-header[b-n2ufvzfj8t] {
    max-width: 1020px;
    margin: 0 auto 18px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
}

.users-header-actions[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-header-btn[b-n2ufvzfj8t] {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid #d9e8fb;
    border-radius: 12px;
    padding: 0 12px;
    color: #145da0;
    background: #ffffff;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.08);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.users-header-btn:hover[b-n2ufvzfj8t],
.users-header-btn:focus-visible[b-n2ufvzfj8t] {
    border-color: #007aff;
    background: #f0f7ff;
    outline: none;
    transform: translateY(-1px);
}

.users-kicker[b-n2ufvzfj8t] {
    color: #007aff;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.users-header h1[b-n2ufvzfj8t] {
    margin: 3px 0 0;
    color: #1c1c1e;
    font-size: 1.72rem;
    font-weight: 800;
}

.users-alert[b-n2ufvzfj8t] {
    max-width: 1020px;
    margin: 0 auto 14px;
    border-radius: 11px;
    padding: 11px 13px;
    font-size: 0.92rem;
    font-weight: 500;
}

.users-alert--success[b-n2ufvzfj8t] {
    color: #248a3d;
    background: #edfaf1;
    border: 1px solid #c7f0d1;
}

.users-alert--error[b-n2ufvzfj8t] {
    color: #ff3b30;
    background: #fff0ef;
    border: 1px solid #ffccc9;
}

.users-grid[b-n2ufvzfj8t] {
    max-width: 1020px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(280px, 330px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.users-create[b-n2ufvzfj8t],
.users-directory[b-n2ufvzfj8t] {
    background: white;
    border: 1.5px solid #e5e5ea;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.08);
}

.users-create[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 18px;
}

.users-card-header[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.users-card-icon[b-n2ufvzfj8t] {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #007aff;
    background: #e8f3ff;
}

.users-card-header h2[b-n2ufvzfj8t] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1rem;
    font-weight: 750;
}

.users-field[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.users-field span[b-n2ufvzfj8t] {
    color: #3c3c43;
    font-size: 0.84rem;
    font-weight: 650;
}

.users-field input[b-n2ufvzfj8t],
.users-field select[b-n2ufvzfj8t] {
    width: 100%;
    height: 42px;
    border: 1.5px solid #e5e5ea;
    border-radius: 11px;
    padding: 0 12px;
    color: #1c1c1e;
    background: #fafafa;
    font: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.users-field select[b-n2ufvzfj8t] {
    cursor: pointer;
}

.users-field input:focus[b-n2ufvzfj8t],
.users-field select:focus[b-n2ufvzfj8t] {
    border-color: #007aff;
    outline: none;
    background: #f0f7ff;
}

.users-field input:disabled[b-n2ufvzfj8t],
.users-field select:disabled[b-n2ufvzfj8t] {
    color: #8e8e93;
    background: #f5f5f7;
}

.users-hint[b-n2ufvzfj8t] {
    margin: 0;
    color: #636366;
    font-size: 0.88rem;
    line-height: 1.42;
}

.users-submit[b-n2ufvzfj8t] {
    min-height: 44px;
    border: none;
    border-radius: 11px;
    color: white;
    background: #007aff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.25);
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
}

.users-submit:hover[b-n2ufvzfj8t] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 122, 255, 0.35);
}

.users-directory[b-n2ufvzfj8t] {
    position: relative;
    overflow: visible;
}

.users-list-toolbar[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border-bottom: 1px solid #f0f0f0;
    border-radius: 14px 14px 0 0;
    background: #fafafa;
}

.users-search[b-n2ufvzfj8t] {
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    padding: 0 10px 0 12px;
    background: white;
    transition: border-color 0.15s, background 0.15s;
}

.users-search:focus-within[b-n2ufvzfj8t] {
    border-color: #007aff;
    background: #f0f7ff;
}

.users-search-icon[b-n2ufvzfj8t] {
    color: #8e8e93;
    flex-shrink: 0;
}

.users-search input[b-n2ufvzfj8t] {
    min-width: 0;
    flex: 1;
    border: none;
    outline: none;
    color: #1c1c1e;
    background: transparent;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 600;
}

.users-search input[b-n2ufvzfj8t]::placeholder {
    color: #aeaeb2;
}

.users-search-clear[b-n2ufvzfj8t] {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #8e8e93;
    background: #f2f2f7;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 850;
    cursor: pointer;
}

.users-search-clear:hover[b-n2ufvzfj8t],
.users-search-clear:focus-visible[b-n2ufvzfj8t] {
    color: #1c1c1e;
    background: #e5e5ea;
    outline: none;
}

.users-filter-wrap[b-n2ufvzfj8t] {
    position: relative;
}

.users-filter-backdrop[b-n2ufvzfj8t] {
    position: fixed;
    inset: 0;
    z-index: 40;
    border: none;
    padding: 0;
    background: transparent;
    cursor: default;
}

.users-filter-button[b-n2ufvzfj8t] {
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid #d9e8fb;
    border-radius: 12px;
    padding: 0 13px;
    color: #145da0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.98), rgba(240,247,255,0.92)),
        #f0f7ff;
    box-shadow: 0 6px 16px rgba(0, 75, 145, 0.08);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s, background 0.15s;
}

.users-filter-button:hover[b-n2ufvzfj8t],
.users-filter-button:focus-visible[b-n2ufvzfj8t],
.users-filter-button--open[b-n2ufvzfj8t] {
    border-color: #007aff;
    background: #f0f7ff;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.14);
    outline: none;
    transform: translateY(-1px);
}

.users-filter-menu[b-n2ufvzfj8t] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 230px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border: 1.5px solid #d9e8fb;
    border-radius: 14px;
    padding: 7px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.18);
}

.users-filter-option[b-n2ufvzfj8t] {
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: none;
    border-radius: 10px;
    padding: 0 10px;
    color: #3c3c43;
    background: transparent;
    font: inherit;
    font-size: 0.88rem;
    font-weight: 750;
    cursor: pointer;
    text-align: left;
}

.users-filter-option strong[b-n2ufvzfj8t] {
    min-width: 28px;
    border-radius: 999px;
    padding: 3px 8px;
    color: #636366;
    background: #f2f2f7;
    font-size: 0.75rem;
    text-align: center;
}

.users-filter-option:hover[b-n2ufvzfj8t],
.users-filter-option:focus-visible[b-n2ufvzfj8t] {
    color: #007aff;
    background: #f0f7ff;
    outline: none;
}

.users-filter-option--active[b-n2ufvzfj8t] {
    color: #0a4f9d;
    background: #e8f3ff;
}

.users-filter-option--active strong[b-n2ufvzfj8t] {
    color: white;
    background: #007aff;
}

.users-search-count[b-n2ufvzfj8t] {
    color: #8e8e93;
    font-size: 0.72rem;
    font-weight: 750;
    white-space: nowrap;
}

.users-list[b-n2ufvzfj8t] {
    overflow: hidden;
    border-radius: 0 0 14px 14px;
}

.users-empty[b-n2ufvzfj8t] {
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: #8e8e93;
    font-size: 0.92rem;
    font-weight: 650;
    text-align: center;
}

.user-row[b-n2ufvzfj8t] {
    min-height: 70px;
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
    transition: border-color 0.15s, background 0.15s;
}

.user-row:last-child[b-n2ufvzfj8t] {
    border-bottom: none;
}

.user-row:hover[b-n2ufvzfj8t] {
    background: #f0f7ff;
}

.user-avatar-wrap[b-n2ufvzfj8t],
.users-modal-avatar-wrap[b-n2ufvzfj8t] {
    position: relative;
    width: max-content;
}

.user-avatar[b-n2ufvzfj8t] {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    color: white;
    background: #007aff;
    font-size: 0.98rem;
    font-weight: 800;
}

.user-status-dot[b-n2ufvzfj8t] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(28, 28, 30, 0.08);
}

.user-status-dot--active[b-n2ufvzfj8t] {
    background: #34c759;
}

.user-status-dot--warn[b-n2ufvzfj8t] {
    background: #ff9500;
}

.user-status-dot--inactive[b-n2ufvzfj8t] {
    background: #ff3b30;
}

.user-main[b-n2ufvzfj8t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.user-name-line[b-n2ufvzfj8t] {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

.user-protected-icon[b-n2ufvzfj8t] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #d92d20;
}

.user-name[b-n2ufvzfj8t] {
    color: #1c1c1e;
    font-size: 0.96rem;
    font-weight: 750;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-meta[b-n2ufvzfj8t] {
    color: #8e8e93;
    font-size: 0.82rem;
    font-weight: 600;
}

.user-department-chip[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    border: 1px solid color-mix(in srgb, var(--badge-color) 26%, white);
    border-radius: 999px;
    padding: 0 9px;
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 9%, white);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.user-actions[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-action-btn[b-n2ufvzfj8t] {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e5e5ea;
    border-radius: 11px;
    padding: 0;
    color: #8e8e93;
    background: white;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
}

.user-action-btn svg[b-n2ufvzfj8t] {
    width: 21px;
    height: 21px;
}

.user-action-btn:hover[b-n2ufvzfj8t],
.user-action-btn:focus-visible[b-n2ufvzfj8t] {
    border-color: #007aff;
    color: #007aff;
    background: #f0f7ff;
    outline: none;
    transform: translateY(-1px);
}

.user-self[b-n2ufvzfj8t] {
    color: #636366;
    background: #f2f2f7;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 0.76rem;
    font-weight: 700;
    white-space: nowrap;
}

.user-badge[b-n2ufvzfj8t] {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 0.72rem;
    font-weight: 800;
}

.user-badge--self[b-n2ufvzfj8t] {
    color: #007aff;
    background: #e8f3ff;
}

.users-modal-top[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: minmax(250px, 0.9fr) minmax(360px, 1.1fr);
    gap: 18px;
    align-items: stretch;
    padding-right: 46px;
}

.users-modal-header[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.users-modal-icon[b-n2ufvzfj8t] {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 16px;
    color: white;
    background: #007aff;
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.22);
    font-size: 1.38rem;
    font-weight: 850;
}

.users-modal-status-dot[b-n2ufvzfj8t] {
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-width: 3px;
}

.users-modal-title[b-n2ufvzfj8t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.users-modal-title-main[b-n2ufvzfj8t] {
    min-width: 0;
}

.users-modal-kicker[b-n2ufvzfj8t] {
    display: block;
    margin-bottom: 3px;
    color: #007aff;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.users-modal-header h2[b-n2ufvzfj8t] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1.45rem;
    font-weight: 800;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.users-modal-name-line[b-n2ufvzfj8t] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    width: fit-content;
}

.users-modal-name-line span[b-n2ufvzfj8t] {
    min-width: 0;
}

.users-modal-context[b-n2ufvzfj8t] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.users-modal-chip[b-n2ufvzfj8t] {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    padding: 0 9px;
    color: #3c3c43;
    background: #f5f5f7;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}

.users-modal-chip--active[b-n2ufvzfj8t] {
    color: #1f7a36;
    background: #edfaf1;
    border-color: #c7f0d1;
}

.users-modal-chip--warn[b-n2ufvzfj8t] {
    color: #9a5a00;
    background: #fff7e8;
    border-color: #ffdba1;
}

.users-modal-chip--inactive[b-n2ufvzfj8t],
.users-modal-chip--locked[b-n2ufvzfj8t] {
    color: #b42318;
    background: #fff0ef;
    border-color: #ffccc9;
}

.users-modal-chip--department[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 9%, white);
    border-color: color-mix(in srgb, var(--badge-color) 24%, white);
}

.users-modal-protected-icon[b-n2ufvzfj8t] {
    width: 24px;
    height: 24px;
    filter: drop-shadow(0 4px 8px rgba(217, 45, 32, 0.16));
}

.users-modal-badges[b-n2ufvzfj8t] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.users-modal-meta[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1.5px solid #e5e5ea;
    border-radius: 14px;
    background: #f5f5f7;
}

.users-modal-meta div[b-n2ufvzfj8t] {
    min-width: 0;
    padding: 13px 14px;
    border-right: 1px solid #e5e5ea;
}

.users-modal-meta div:last-child[b-n2ufvzfj8t] {
    border-right: none;
}

.users-modal-meta span[b-n2ufvzfj8t] {
    display: block;
    margin-bottom: 4px;
    color: #8e8e93;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.users-modal-meta strong[b-n2ufvzfj8t] {
    display: block;
    color: #1c1c1e;
    font-size: 0.9rem;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-modal-header-side[b-n2ufvzfj8t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.users-modal-preview-btn[b-n2ufvzfj8t] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid #d9e8fb;
    border-radius: 12px;
    padding: 0;
    color: #145da0;
    background: #f0f7ff;
    text-decoration: none;
    box-shadow: 0 8px 20px rgba(0, 122, 255, 0.1);
}

.users-modal-preview-btn:hover[b-n2ufvzfj8t],
.users-modal-preview-btn:focus-visible[b-n2ufvzfj8t] {
    border-color: #007aff;
    color: #007aff;
    background: white;
    outline: none;
}

.users-modal-workspace[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    overflow: visible;
    background: transparent;
}

.users-modal-action--permissions[b-n2ufvzfj8t] {
    grid-column: span 2;
    height: 224px;
    overflow: hidden;
}

.users-modal-action--permissions .users-modal-action-main[b-n2ufvzfj8t],
.users-modal-action--permissions .users-modal-action-content[b-n2ufvzfj8t] {
    height: 100%;
    min-height: 0;
}

.users-modal-action--permissions .users-modal-action-title[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: auto minmax(140px, 260px) auto;
    align-items: start;
    justify-content: stretch;
    gap: 8px;
}

.users-modal-action--permissions .users-info-btn[b-n2ufvzfj8t] {
    justify-self: end;
    align-self: start;
}

.users-modal-action[b-n2ufvzfj8t] {
    position: relative;
    min-width: 0;
    min-height: 168px;
    padding: 12px;
    border: 1.5px solid #e5e5ea;
    border-radius: 12px;
    background: white;
    box-shadow: 0 10px 24px rgba(28, 28, 30, 0.04);
}

.users-modal-action:first-child[b-n2ufvzfj8t] {
    border-radius: 12px;
}

.users-modal-action:last-child[b-n2ufvzfj8t] {
    border-radius: 12px;
}

.users-modal-action:only-child[b-n2ufvzfj8t] {
    border-radius: 12px;
}

.users-modal-action--identity[b-n2ufvzfj8t] {
    background: white;
}

.users-modal-action-main[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 9px;
    align-items: start;
}

.users-modal-action-content[b-n2ufvzfj8t] {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.users-modal-action-title[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.users-modal-section-icon[b-n2ufvzfj8t] {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #007aff;
    background: #e8f3ff;
    flex-shrink: 0;
}

.users-modal-section-icon svg[b-n2ufvzfj8t] {
    width: 17px;
    height: 17px;
}

.users-modal-action h3[b-n2ufvzfj8t] {
    margin: 0;
    color: #1c1c1e;
    font-size: 0.9rem;
    font-weight: 750;
}

.users-info-btn[b-n2ufvzfj8t] {
    width: 23px;
    height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #007aff;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
}

.users-info-btn svg[b-n2ufvzfj8t] {
    width: 22px;
    height: 22px;
}

.users-info-btn:hover[b-n2ufvzfj8t],
.users-info-btn:focus-visible[b-n2ufvzfj8t] {
    color: #0a4f9d;
    background: transparent;
    outline: none;
}

.users-info-popover[b-n2ufvzfj8t] {
    position: absolute;
    top: 32px;
    right: 0;
    z-index: 2;
    width: min(300px, 100%);
    border: 1.5px solid #c5deff;
    border-radius: 14px;
    padding: 14px 36px 14px 14px;
    color: #1c1c1e;
    background: #f0f7ff;
    box-shadow: 0 14px 34px rgba(0, 122, 255, 0.16);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.35;
}

.users-info-popover--wide[b-n2ufvzfj8t] {
    width: min(520px, 100%);
}

.users-info-popover span[b-n2ufvzfj8t] {
    display: block;
}

.users-info-popover span + span[b-n2ufvzfj8t] {
    margin-top: 6px;
}

.users-info-popover strong[b-n2ufvzfj8t] {
    display: block;
    color: #0a4f9d;
    font-weight: 750;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.users-info-popover strong + ul[b-n2ufvzfj8t],
.users-info-popover strong + span[b-n2ufvzfj8t] {
    margin-top: 6px;
}

.users-info-popover ul + strong[b-n2ufvzfj8t] {
    margin-top: 10px;
}

.users-info-legend[b-n2ufvzfj8t] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.users-info-legend li[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: 14px 1fr;
    gap: 8px;
    align-items: start;
    font-weight: 600;
    line-height: 1.35;
}

.users-info-swatch[b-n2ufvzfj8t] {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    margin-top: 4px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.users-info-close[b-n2ufvzfj8t] {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #8e8e93;
    background: rgba(255, 255, 255, 0.72);
    font: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    cursor: pointer;
}

.users-info-close:hover[b-n2ufvzfj8t] {
    color: #1c1c1e;
    background: white;
}

.users-modal-control-row[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 7px;
    width: 100%;
    align-items: end;
}

.users-modal-control-stack[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.users-field--modal[b-n2ufvzfj8t] {
    width: 100%;
}

.users-modal-action .users-field[b-n2ufvzfj8t] {
    gap: 5px;
}

.users-modal-action .users-field span[b-n2ufvzfj8t] {
    font-size: 0.72rem;
    font-weight: 750;
}

.users-modal-action .users-field input[b-n2ufvzfj8t],
.users-modal-action .users-field select[b-n2ufvzfj8t] {
    height: 36px;
    border-radius: 9px;
    padding: 0 9px;
    font-size: 0.84rem;
    font-weight: 650;
}

.user-action-btn[b-n2ufvzfj8t] {
    text-decoration: none;
}

.users-departments-modal-header[b-n2ufvzfj8t] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    padding-right: 46px;
}

.users-departments-modal-header h2[b-n2ufvzfj8t] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1.35rem;
    font-weight: 850;
}

.users-departments-count[b-n2ufvzfj8t] {
    color: #8e8e93;
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
}

.users-departments-modal-grid[b-n2ufvzfj8t] {
    height: min(520px, calc(100vh - 250px));
    display: grid;
    grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
    gap: 14px;
    align-items: stretch;
}

.users-department-create-panel[b-n2ufvzfj8t],
.users-departments-list[b-n2ufvzfj8t] {
    min-height: 0;
    border: 1.5px solid #e5e5ea;
    border-radius: 14px;
    background: white;
}

.users-department-create-panel[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow: hidden;
    padding: 16px;
}

.users-department-create-panel .users-submit[b-n2ufvzfj8t] {
    margin-top: auto;
}

.users-department-create-panel h3[b-n2ufvzfj8t] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1rem;
    font-weight: 800;
}

.users-color-field input[type="color"][b-n2ufvzfj8t] {
    width: 48px;
    height: 34px;
    flex-shrink: 0;
    border-radius: 9px;
    padding: 2px;
    cursor: pointer;
}

.users-color-control[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
}

.users-color-control > span[b-n2ufvzfj8t] {
    color: #636366;
    font-size: 0.78rem;
    font-weight: 800;
}

.users-color-presets[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
}

.users-color-presets--compact[b-n2ufvzfj8t] {
    grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
    width: 100%;
}

.users-color-preset[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    width: 100%;
    aspect-ratio: 1;
    min-width: 0;
    border: 2px solid #ffffff;
    border-radius: 9px;
    padding: 0;
    background: var(--badge-color);
    box-shadow: 0 0 0 1.5px #d1d1d6;
    cursor: pointer;
    transition: box-shadow 0.15s, transform 0.12s;
}

.users-color-preset:hover[b-n2ufvzfj8t],
.users-color-preset:focus-visible[b-n2ufvzfj8t],
.users-color-preset--active[b-n2ufvzfj8t] {
    box-shadow: 0 0 0 2px var(--badge-text), 0 7px 16px color-mix(in srgb, var(--badge-color) 26%, transparent);
    outline: none;
    transform: translateY(-1px);
}

.users-departments-list[b-n2ufvzfj8t] {
    height: 100%;
    max-height: none;
    overflow: auto;
}

.users-department-row[b-n2ufvzfj8t] {
    min-height: 58px;
    display: grid;
    grid-template-columns: 28px 34px minmax(0, 1fr) auto;
    align-items: start;
    gap: 11px;
    padding: 12px 14px;
    border-bottom: 1px solid #f0f0f0;
}

.users-department-drag-handle[b-n2ufvzfj8t] {
    width: 28px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #8e8e93;
    cursor: grab;
    touch-action: none;
}

.users-department-drag-handle:hover[b-n2ufvzfj8t] {
    color: #145da0;
    background: #eef7ff;
}

.users-department-row--drag-source[b-n2ufvzfj8t] {
    opacity: 0.35;
}

.users-department-row--drag-target[b-n2ufvzfj8t] {
    box-shadow: inset 0 0 0 2px rgba(20, 93, 160, 0.22);
    background: #f7fbff;
}

.users-department-drag-ghost[b-n2ufvzfj8t] {
    position: fixed;
    z-index: 5000;
    pointer-events: none;
    border: 1px solid rgba(20, 93, 160, 0.22);
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 18px 34px rgba(15, 23, 42, 0.2);
    opacity: 0.92;
}

.users-department-row:last-child[b-n2ufvzfj8t] {
    border-bottom: none;
}

.users-department-row--delete[b-n2ufvzfj8t] {
    margin: 8px;
    border: 1.5px solid #ffccc9;
    border-radius: 12px;
    padding: 12px;
    background: #fff0ef;
}

.users-department-row-color[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    width: 28px;
    height: 28px;
    border-radius: 10px;
    background: var(--badge-color);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--badge-color) 28%, transparent);
}

.users-department-row-main[b-n2ufvzfj8t] {
    min-width: 0;
}

.users-department-row strong[b-n2ufvzfj8t],
.users-department-row-main > span[b-n2ufvzfj8t] {
    display: block;
}

.users-department-row strong[b-n2ufvzfj8t] {
    color: #1c1c1e;
    font-size: 0.94rem;
    font-weight: 850;
    overflow-wrap: anywhere;
}

.users-department-row-main > span[b-n2ufvzfj8t] {
    margin-top: 2px;
    color: #8e8e93;
    font-size: 0.76rem;
    font-weight: 750;
}

.users-department-row-actions[b-n2ufvzfj8t] {
    display: inline-flex;
    gap: 6px;
}

.users-icon-btn[b-n2ufvzfj8t] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    padding: 0;
    color: #636366;
    background: white;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
}

.users-icon-btn:hover[b-n2ufvzfj8t],
.users-icon-btn:focus-visible[b-n2ufvzfj8t] {
    border-color: #007aff;
    color: #007aff;
    background: #f0f7ff;
    outline: none;
    transform: translateY(-1px);
}

.users-icon-btn--danger:hover[b-n2ufvzfj8t],
.users-icon-btn--danger:focus-visible[b-n2ufvzfj8t] {
    border-color: #ffccc9;
    color: #b42318;
    background: #fff0ef;
}

.users-department-edit[b-n2ufvzfj8t] {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1.5px solid #d9e8fb;
    border-radius: 12px;
    padding: 12px;
    background: #f8fbff;
}

.users-department-edit-grid[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(130px, 160px);
    gap: 10px;
    align-items: end;
}

.users-department-edit-actions[b-n2ufvzfj8t],
.users-department-delete-actions[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.users-department-delete-warning[b-n2ufvzfj8t] {
    margin-top: 9px;
    border: 1px solid #ffd8d3;
    border-radius: 11px;
    padding: 10px;
    color: #7a271a;
    background: rgba(255, 255, 255, 0.62);
    font-size: 0.8rem;
    font-weight: 750;
}

.users-department-delete-warning > span[b-n2ufvzfj8t] {
    display: block;
    margin-bottom: 8px;
}

.users-danger-confirm[b-n2ufvzfj8t] {
    min-height: 34px;
    border: none;
    border-radius: 9px;
    padding: 0 11px;
    color: white;
    background: #d92d20;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 850;
    cursor: pointer;
}

.users-danger-confirm:disabled[b-n2ufvzfj8t] {
    color: #7a271a;
    background: #ffd8d3;
    cursor: not-allowed;
}

.users-day-hours-panel[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.users-day-hours-grid[b-n2ufvzfj8t] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.users-day-hours-field[b-n2ufvzfj8t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.users-day-hours-field span[b-n2ufvzfj8t] {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d9e8fb;
    border-radius: 999px;
    color: #145da0;
    background: #f0f7ff;
    font-size: 0.67rem;
    font-weight: 850;
}

.users-day-hours-field input[b-n2ufvzfj8t] {
    width: 100%;
    height: 34px;
    min-width: 0;
    border: 1.5px solid #e5e5ea;
    border-radius: 9px;
    padding: 0 2px;
    color: #1c1c1e;
    background: #fafafa;
    font: inherit;
    font-size: 0.72rem;
    font-weight: 750;
    text-align: center;
}

.users-day-hours-field input[b-n2ufvzfj8t]::-webkit-outer-spin-button,
.users-day-hours-field input[b-n2ufvzfj8t]::-webkit-inner-spin-button {
    margin: 0;
    appearance: none;
}

.users-day-hours-field input[type="number"][b-n2ufvzfj8t] {
    appearance: textfield;
}
.users-day-hours-field input:focus[b-n2ufvzfj8t] {
    border-color: #007aff;
    outline: none;
    background: #f0f7ff;
}

.users-day-hours-footer[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.users-day-hours-footer > span[b-n2ufvzfj8t] {
    min-height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 0 9px;
    color: #636366;
    background: #f2f2f7;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}
    .users-modal-save-btn[b-n2ufvzfj8t] {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 10px;
    padding: 0;
    color: white;
    background: #007aff;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.18);
    cursor: pointer;
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
}

.users-modal-save-btn svg[b-n2ufvzfj8t] {
    width: 17px;
    height: 17px;
}

.users-modal-save-btn:disabled[b-n2ufvzfj8t] {
    cursor: not-allowed;
    opacity: 0.45;
}

.users-modal-save-btn:not(:disabled):hover[b-n2ufvzfj8t],
.users-modal-save-btn:focus-visible[b-n2ufvzfj8t] {
    opacity: 0.92;
    transform: translateY(-1px);
    outline: none;
    box-shadow: 0 5px 14px rgba(0, 122, 255, 0.28);
}

.users-modal-btn[b-n2ufvzfj8t] {
    height: 36px;
    border: none;
    border-radius: 10px;
    padding: 0 12px;
    color: white;
    background: #007aff;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
    transition: opacity 0.18s, transform 0.12s, box-shadow 0.18s;
}

.users-access-switch[b-n2ufvzfj8t] {
    align-self: flex-start;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    padding: 0 11px 0 8px;
    color: #636366;
    background: #f2f2f7;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.users-permission-options[b-n2ufvzfj8t] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.users-permission-search[b-n2ufvzfj8t] {
    height: 30px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    border: 1.5px solid #e5e5ea;
    border-radius: 9px;
    padding: 0 7px;
    background: #fafafa;
}

.users-permission-search:focus-within[b-n2ufvzfj8t] {
    border-color: #007aff;
    background: #f0f7ff;
}

.users-permission-search svg[b-n2ufvzfj8t] {
    width: 14px;
    height: 14px;
    color: #8e8e93;
    flex-shrink: 0;
}

.users-permission-search input[b-n2ufvzfj8t] {
    min-width: 0;
    flex: 1;
    border: none;
    outline: none;
    color: #1c1c1e;
    background: transparent;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 700;
}

.users-permission-search input[b-n2ufvzfj8t]::placeholder {
    color: #aeaeb2;
}

.users-permission-split[b-n2ufvzfj8t] {
    min-height: 0;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(250px, 36%) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.users-permission-column[b-n2ufvzfj8t] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid #f0f0f0;
    border-radius: 11px;
    padding: 9px;
    background: #fcfcfd;
}

.users-permission-column--roles .users-permission-options[b-n2ufvzfj8t] {
    min-height: 0;
    flex: 1;
    overflow: auto;
    flex-direction: row;
    align-content: flex-start;
}

.users-permission-column--roles .users-permission-option[b-n2ufvzfj8t] {
    flex: 0 1 20%;
    justify-content: center;
}

.users-permission-column-head[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    color: #3c3c43;
    font-size: 0.74rem;
    font-weight: 850;
}

.users-permission-column-head strong[b-n2ufvzfj8t] {
    color: #8e8e93;
    font-size: 0.7rem;
    font-weight: 850;
    white-space: nowrap;
}

.users-permission-option[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    min-height: 26px;
    border: 1.5px solid color-mix(in srgb, var(--badge-color) 22%, #e5e5ea);
    border-radius: 8px;
    padding: 0 6px;
    color: var(--badge-text);
    background: white;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 750;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
}

.users-permission-option:not(:disabled):hover[b-n2ufvzfj8t],
.users-permission-option:focus-visible[b-n2ufvzfj8t] {
    border-color: var(--badge-color);
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 9%, white);
    outline: none;
}

.users-permission-option--active[b-n2ufvzfj8t] {
    border-color: var(--badge-color);
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 14%, white);
}

.users-permission-option:disabled[b-n2ufvzfj8t] {
    cursor: not-allowed;
    opacity: 0.45;
}

.users-permission-option--locked[b-n2ufvzfj8t] {
    cursor: default;
}

.users-department-assignment[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
    border-top: 1px solid #f0f0f0;
}

.users-department-assignment-head[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #3c3c43;
    font-size: 0.76rem;
    font-weight: 850;
}

.users-inline-link[b-n2ufvzfj8t] {
    border: none;
    padding: 0;
    color: #007aff;
    background: transparent;
    font: inherit;
    font-size: 0.74rem;
    font-weight: 850;
    cursor: pointer;
}

.users-inline-link:hover[b-n2ufvzfj8t],
.users-inline-link:focus-visible[b-n2ufvzfj8t] {
    color: #0a4f9d;
    outline: none;
}

.users-department-options[b-n2ufvzfj8t] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.users-department-options--panel[b-n2ufvzfj8t] {
    min-height: 0;
    flex: 1;
    max-height: none;
    overflow: auto;
    align-content: flex-start;
}

.users-selected-departments[b-n2ufvzfj8t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 38px;
}

.users-department-empty-inline[b-n2ufvzfj8t] {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    border: 1px dashed #d1d1d6;
    border-radius: 10px;
    padding: 0 10px;
    color: #8e8e93;
    background: #fafafa;
    font-size: 0.8rem;
    font-weight: 750;
}

.users-selected-department-chip[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1.5px solid color-mix(in srgb, var(--badge-color) 24%, #e5e5ea);
    border-radius: 10px;
    padding: 0 8px 0 10px;
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 9%, white);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 850;
    cursor: pointer;
}

.users-selected-department-chip:not(:disabled):hover[b-n2ufvzfj8t],
.users-selected-department-chip:focus-visible[b-n2ufvzfj8t] {
    border-color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 14%, white);
    outline: none;
}

.users-selected-department-remove[b-n2ufvzfj8t] {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #3c3c43;
    background: rgba(255, 255, 255, 0.74);
    font-size: 0.62rem;
    font-weight: 900;
}

.users-department-picker-wrap[b-n2ufvzfj8t] {
    position: relative;
    display: inline-flex;
}

.users-department-add-btn[b-n2ufvzfj8t] {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid #d9e8fb;
    border-radius: 10px;
    padding: 0;
    color: #145da0;
    background: #f0f7ff;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s, transform 0.12s;
}

.users-department-add-btn:not(:disabled):hover[b-n2ufvzfj8t],
.users-department-add-btn:focus-visible[b-n2ufvzfj8t] {
    border-color: #007aff;
    color: #007aff;
    background: white;
    outline: none;
    transform: translateY(-1px);
}

.users-department-add-btn:disabled[b-n2ufvzfj8t],
.users-selected-department-chip:disabled[b-n2ufvzfj8t] {
    cursor: not-allowed;
    opacity: 0.45;
}

.users-department-picker-backdrop[b-n2ufvzfj8t] {
    position: fixed;
    inset: 0;
    z-index: 120;
    border: none;
    padding: 0;
    background: transparent;
    cursor: default;
}

.users-department-picker-popover[b-n2ufvzfj8t] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 130;
    width: min(330px, calc(100vw - 36px));
    border: 1.5px solid #d9e8fb;
    border-radius: 14px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 42px rgba(28, 28, 30, 0.18);
}

.users-department-picker-search[b-n2ufvzfj8t] {
    height: 38px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #e5e5ea;
    border-radius: 10px;
    padding: 0 8px;
    background: #fafafa;
}

.users-department-picker-search svg[b-n2ufvzfj8t] {
    color: #8e8e93;
    flex-shrink: 0;
}

.users-department-picker-search input[b-n2ufvzfj8t] {
    min-width: 0;
    flex: 1;
    border: none;
    outline: none;
    color: #1c1c1e;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 700;
}

.users-picker-clear[b-n2ufvzfj8t] {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    padding: 0;
    color: #8e8e93;
    background: #f2f2f7;
    font: inherit;
    font-size: 0.62rem;
    font-weight: 900;
    cursor: pointer;
}

.users-department-picker-list[b-n2ufvzfj8t] {
    max-height: 260px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 7px;
}

.users-department-picker-item[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    min-height: 38px;
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    border: none;
    border-radius: 10px;
    padding: 0 9px;
    color: #3c3c43;
    background: transparent;
    font: inherit;
    font-size: 0.84rem;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
}

.users-department-picker-item:hover[b-n2ufvzfj8t],
.users-department-picker-item:focus-visible[b-n2ufvzfj8t],
.users-department-picker-item--active[b-n2ufvzfj8t] {
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 11%, white);
    outline: none;
}

.users-department-picker-item > span:nth-child(2)[b-n2ufvzfj8t] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.users-department-picker-empty[b-n2ufvzfj8t] {
    padding: 14px 8px;
    color: #8e8e93;
    font-size: 0.84rem;
    font-weight: 750;
    text-align: center;
}

.users-department-option[b-n2ufvzfj8t] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid color-mix(in srgb, var(--badge-color) 22%, #e5e5ea);
    border-radius: 8px;
    padding: 0 6px;
    color: #3c3c43;
    background: white;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}

.users-department-options--panel .users-department-option[b-n2ufvzfj8t] {
    max-width: 100%;
    flex: 0 1 calc(33.333% - 5px);
}

.users-department-option svg[b-n2ufvzfj8t] {
    width: 13px;
    height: 13px;
    margin-left: 0;
    flex-shrink: 0;
}

.users-department-option:not(:disabled):hover[b-n2ufvzfj8t],
.users-department-option:focus-visible[b-n2ufvzfj8t],
.users-department-option--active[b-n2ufvzfj8t] {
    border-color: var(--badge-color);
    background: color-mix(in srgb, var(--badge-color) 10%, white);
    outline: none;
}

.users-department-option--active[b-n2ufvzfj8t] {
    color: var(--badge-text);
}

.users-department-option:disabled[b-n2ufvzfj8t] {
    cursor: not-allowed;
    opacity: 0.45;
}

.users-department-swatch[b-n2ufvzfj8t] {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--badge-color);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--badge-color) 18%, white);
}

.users-department-empty[b-n2ufvzfj8t] {
    border: 1px dashed #d1d1d6;
    border-radius: 10px;
    padding: 10px;
    color: #8e8e93;
    background: #fafafa;
    font-size: 0.82rem;
    font-weight: 700;
}

.users-access-switch:not(:disabled):hover[b-n2ufvzfj8t] {
    border-color: #007aff;
    color: #007aff;
    background: #f0f7ff;
}

.users-access-switch:disabled[b-n2ufvzfj8t] {
    cursor: not-allowed;
    opacity: 0.45;
}

.users-access-switch-track[b-n2ufvzfj8t] {
    position: relative;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: #d1d1d6;
    flex-shrink: 0;
    transition: background 0.18s;
}

.users-access-switch-thumb[b-n2ufvzfj8t] {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: white;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.users-access-switch--on[b-n2ufvzfj8t] {
    color: #1c1c1e;
    background: white;
}

.users-access-switch--on .users-access-switch-track[b-n2ufvzfj8t] {
    background: #34c759;
}

.users-access-switch--on .users-access-switch-thumb[b-n2ufvzfj8t] {
    transform: translateX(14px);
}

.users-access-switch-text[b-n2ufvzfj8t] {
    min-width: 46px;
    text-align: left;
}

.users-access-stack[b-n2ufvzfj8t] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}

.users-password-reset-btn[b-n2ufvzfj8t] {
    max-width: 100%;
}

.users-modal-btn:disabled[b-n2ufvzfj8t] {
    cursor: not-allowed;
    opacity: 0.45;
}

.users-modal-btn:not(:disabled):hover[b-n2ufvzfj8t] {
    opacity: 0.9;
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(0, 122, 255, 0.3);
}

.users-modal-btn:disabled:hover[b-n2ufvzfj8t] {
    opacity: 0.45;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

.users-modal-btn--secondary[b-n2ufvzfj8t] {
    align-self: flex-start;
    color: #3c3c43;
    background: #f2f2f7;
    border: 1.5px solid #e5e5ea;
    box-shadow: none;
}

.users-modal-btn--secondary:not(:disabled):hover[b-n2ufvzfj8t] {
    color: #007aff;
    background: #f0f7ff;
    border-color: #007aff;
    box-shadow: none;
}

.users-modal-btn--secondary:disabled:hover[b-n2ufvzfj8t] {
    color: #3c3c43;
    background: #f2f2f7;
    border-color: #e5e5ea;
}

.users-modal-btn--ghost[b-n2ufvzfj8t] {
    color: #636366;
    background: white;
    border: 1.5px solid #e5e5ea;
    box-shadow: none;
}

.users-modal-btn--ghost:hover[b-n2ufvzfj8t] {
    color: #1c1c1e;
    background: #f5f5f7;
    border-color: #8e8e93;
    box-shadow: none;
}

@media (max-width: 860px) {
    .users-modal-top[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
        padding-right: 28px;
    }

    .users-modal-workspace[b-n2ufvzfj8t] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .users-modal-action--permissions[b-n2ufvzfj8t] {
        grid-column: 1 / -1;
    }

    .users-permission-split[b-n2ufvzfj8t] {
        grid-template-columns: minmax(150px, 30%) minmax(0, 1fr);
    }

    .users-modal-action--permissions[b-n2ufvzfj8t] {
        height: 246px;
    }

    .users-modal-preview-btn[b-n2ufvzfj8t] {
        margin-left: auto;
    }
}

@media (max-width: 760px) {
    .users-page[b-n2ufvzfj8t] {
        padding: 18px;
    }

    .users-header[b-n2ufvzfj8t] {
        align-items: flex-start;
        flex-direction: column;
    }

    .users-header-actions[b-n2ufvzfj8t] {
        align-self: flex-end;
    }

    .users-grid[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
    }

    .users-list-toolbar[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .users-filter-button[b-n2ufvzfj8t] {
        width: 100%;
    }

    .users-filter-menu[b-n2ufvzfj8t] {
        left: 0;
        right: auto;
        width: 100%;
    }

    .users-search-count[b-n2ufvzfj8t] {
        justify-self: end;
    }

    .user-row[b-n2ufvzfj8t] {
        grid-template-columns: 46px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 12px;
    }

    .user-self[b-n2ufvzfj8t] {
        display: none;
    }

    .users-modal-meta[b-n2ufvzfj8t],
    .users-modal-workspace[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
    }

    .users-modal-meta div[b-n2ufvzfj8t] {
        border-right: none;
        border-bottom: 1px solid #e5e5ea;
    }

    .users-modal-meta div:last-child[b-n2ufvzfj8t] {
        border-bottom: none;
    }

    .users-modal-action-main[b-n2ufvzfj8t] {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .users-modal-section-icon[b-n2ufvzfj8t] {
        width: 30px;
        height: 30px;
    }

    .users-info-popover[b-n2ufvzfj8t] {
        position: static;
        width: 100%;
        margin-top: -4px;
    }

    .users-modal-btn[b-n2ufvzfj8t] {
        width: 100%;
    }

    .users-day-hours-grid[b-n2ufvzfj8t] {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 3px;
    }


    .users-day-hours-field input[b-n2ufvzfj8t] {
        height: 32px;
        font-size: 0.68rem;
    }
    .users-modal-save-btn[b-n2ufvzfj8t] {
        width: 36px;
    }

    .users-access-switch[b-n2ufvzfj8t] {
        width: 100%;
        justify-content: space-between;
    }

    .users-permission-options[b-n2ufvzfj8t] {
        flex-direction: column;
    }

    .users-permission-option[b-n2ufvzfj8t] {
        width: 100%;
    }

    .users-permission-split[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
    }

    .users-modal-action--permissions[b-n2ufvzfj8t] {
        height: 360px;
    }

    .users-modal-action--permissions .users-modal-action-title[b-n2ufvzfj8t] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .users-modal-action--permissions .users-modal-action-title h3[b-n2ufvzfj8t] {
        min-width: 0;
    }

    .users-modal-action--permissions .users-modal-action-title .users-permission-search[b-n2ufvzfj8t] {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .users-departments-modal-header[b-n2ufvzfj8t] {
        align-items: flex-start;
        flex-direction: column;
        padding-right: 42px;
    }

    .users-departments-modal-grid[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
    }

    .users-department-edit-grid[b-n2ufvzfj8t] {
        grid-template-columns: 1fr;
    }

    .users-department-row[b-n2ufvzfj8t] {
        grid-template-columns: 28px 30px minmax(0, 1fr);
    }

    .users-department-row-actions[b-n2ufvzfj8t] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .users-department-picker-popover[b-n2ufvzfj8t] {
        left: auto;
        right: 0;
    }

    .users-department-option[b-n2ufvzfj8t] {
        width: 100%;
        justify-content: flex-start;
    }
}
/* /Components/Shared/Chat/BaustellenChat.razor.rz.scp.css */
/* --------------------------------------------------------------
   BaustellenChat — extracted from ProjectSetup
   Uses --crm-* variables with safe fallbacks so the component works
   inside the CRM scope as well as standalone (e.g. EmployeeAppointments).
-------------------------------------------------------------- */
.chat-area[b-uexcg33lz6] {
    position: relative;
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    background: #f7f8fa;
}

.chat-drop-hint[b-uexcg33lz6] {
    position: absolute;
    inset: 8px;
    z-index: 10;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px dashed var(--crm-accent, #2563eb);
    border-radius: 14px;
    background: rgba(247, 248, 250, 0.92);
    color: var(--crm-accent, #2563eb);
    font-weight: 800;
    pointer-events: none;
}

.chat-area--drop-active .chat-drop-hint[b-uexcg33lz6] {
    display: flex;
}

.chat-empty[b-uexcg33lz6] {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 48px 24px;
    color: var(--crm-muted, #636366);
    text-align: center;
}

.chat-empty-icon[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 6px;
    border-radius: 50%;
    background: #fff;
    color: var(--crm-accent, #2563eb);
    box-shadow: 0 2px 10px rgba(28, 28, 30, 0.06);
}

.chat-empty strong[b-uexcg33lz6] {
    color: var(--crm-text, #1c1c1e);
    font-size: 15px;
    font-weight: 800;
}

.chat-empty span[b-uexcg33lz6] {
    color: var(--crm-faint, #8e8e93);
    font-size: 13px;
    font-weight: 600;
}

.chat-messages[b-uexcg33lz6] {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px 8px;
    overflow-y: auto;
    scroll-behavior: smooth;
    /* Inhalte oben sanft ausblenden, damit nichts den aktiven Tab/Border berührt
       wenn man hochscrollt. */
    mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}

.chat-date-divider[b-uexcg33lz6] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 14px 0 10px;
}

.chat-date-divider span[b-uexcg33lz6] {
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.06);
    color: var(--crm-muted, #636366);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.chat-message[b-uexcg33lz6] {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-top: 2px;
}

.chat-message--with-header[b-uexcg33lz6] {
    margin-top: 12px;
}

.chat-message--own[b-uexcg33lz6] {
    justify-content: flex-end;
}

.chat-message--other[b-uexcg33lz6] {
    justify-content: flex-start;
}

.chat-avatar-slot[b-uexcg33lz6] {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-shrink: 0;
    width: 28px;
    min-height: 28px;
}

.chat-avatar[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #d6dbe3;
    color: #3a3a3c;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    box-shadow: 0 1px 3px rgba(28, 28, 30, 0.08);
}

.chat-bubble-wrap[b-uexcg33lz6] {
    position: relative;
    display: flex;
    max-width: min(560px, 78%);
    flex-direction: column;
    min-width: 0;
}

.chat-bubble-wrap:has(.chat-bubble--editing)[b-uexcg33lz6] {
    max-width: min(560px, 92%);
    width: min(560px, 92%);
}

.chat-message--own .chat-bubble-wrap[b-uexcg33lz6] {
    align-items: flex-end;
}

.chat-message--other .chat-bubble-wrap[b-uexcg33lz6] {
    align-items: flex-start;
}

.chat-sender[b-uexcg33lz6] {
    padding: 0 12px 3px;
    color: var(--crm-muted, #636366);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.chat-bubble[b-uexcg33lz6] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    max-width: 100%;
    padding: 8px 12px 7px;
    border-radius: 16px;
    line-height: 1.42;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    box-shadow: 0 1px 1.5px rgba(28, 28, 30, 0.08);
}

.chat-message--own .chat-bubble[b-uexcg33lz6] {
    background: var(--crm-accent, #2563eb);
    color: #fff;
    border-bottom-right-radius: 6px;
}

.chat-message--other .chat-bubble[b-uexcg33lz6] {
    background: #fff;
    color: var(--crm-text, #1c1c1e);
    border: 1px solid #e9eaef;
    border-bottom-left-radius: 6px;
}

.chat-message--with-header.chat-message--own .chat-bubble[b-uexcg33lz6] {
    border-top-right-radius: 16px;
}

.chat-text[b-uexcg33lz6] {
    display: block;
    font-size: 13.5px;
    font-weight: 500;
    white-space: pre-wrap;
}

.chat-time[b-uexcg33lz6] {
    display: block;
    margin-top: 2px;
    align-self: flex-end;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
}

.chat-message--own .chat-time[b-uexcg33lz6] {
    color: rgba(255, 255, 255, 0.85);
}

.chat-message--other .chat-time[b-uexcg33lz6] {
    color: var(--crm-faint, #8e8e93);
}

/* "bearbeitet"-Markierung neben der Uhrzeit */
.chat-edited[b-uexcg33lz6] {
    font-style: italic;
    font-weight: 600;
}

.chat-time-sep[b-uexcg33lz6] {
    margin: 0 4px;
    opacity: 0.6;
}

/* Gelöschte Nachricht (Platzhalter) — kompakte, dezente Zeile */
.chat-bubble--deleted[b-uexcg33lz6] {
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 4px 11px !important;
    background: transparent !important;
    border: 1px dashed #d6d9e0 !important;
    box-shadow: none !important;
}

.chat-text--deleted[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-style: italic;
    font-weight: 600;
    color: var(--crm-faint, #8e8e93);
}

.chat-deleted-icon[b-uexcg33lz6] {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    opacity: 0.6;
}

.chat-bubble--deleted .chat-time[b-uexcg33lz6] {
    margin-top: 0;
    align-self: center;
    opacity: 0.8;
    color: var(--crm-faint, #8e8e93) !important;
}

/* Overlay zum Schließen des Kontextmenüs bei Klick daneben */
.chat-menu-overlay[b-uexcg33lz6] {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: transparent;
}

/* ⋯-Trigger an eigenen Nachrichten */
.chat-msg-actions[b-uexcg33lz6] {
    position: absolute;
    top: 50%;
    right: 100%;
    transform: translateY(-50%);
    margin-right: 4px;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: none;
}

.chat-message:hover .chat-msg-actions[b-uexcg33lz6],
.chat-msg-actions.is-open[b-uexcg33lz6],
.chat-msg-actions:focus-within[b-uexcg33lz6] {
    opacity: 1;
    pointer-events: auto;
}

@media (hover: none) {
    .chat-msg-actions[b-uexcg33lz6] {
        opacity: 1;
        pointer-events: auto;
    }
}

.chat-msg-trigger[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 28, 30, 0.06);
    color: var(--crm-muted, #636366);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.chat-msg-trigger:hover[b-uexcg33lz6],
.chat-msg-trigger:focus-visible[b-uexcg33lz6] {
    background: rgba(28, 28, 30, 0.12);
    color: var(--crm-text, #1c1c1e);
    outline: none;
}

/* Kontextmenü (Bearbeiten / Löschen) */
.chat-msg-menu[b-uexcg33lz6] {
    position: absolute;
    right: 0;
    bottom: calc(100% + 6px);
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px;
    min-width: 172px;
    border-radius: 14px;
    background: #fff;
    border: 1px solid #e9eaef;
    box-shadow: 0 12px 34px rgba(28, 28, 30, 0.18), 0 2px 6px rgba(28, 28, 30, 0.08);
    transform-origin: bottom right;
}

/* nach unten öffnen, wenn oben kein Platz ist (z. B. oberste Nachricht) */
.chat-msg-menu--down[b-uexcg33lz6] {
    top: calc(100% + 6px);
    bottom: auto;
    transform-origin: top right;
}

/* während der Richtungsmessung unsichtbar (kein Flackern) */
.chat-msg-menu--measuring[b-uexcg33lz6] {
    visibility: hidden;
}

.chat-msg-menu:not(.chat-msg-menu--measuring)[b-uexcg33lz6] {
    animation: chat-menu-pop-b-uexcg33lz6 0.13s ease-out;
}

@keyframes chat-menu-pop-b-uexcg33lz6 {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.chat-msg-menu-item[b-uexcg33lz6] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 8px 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--crm-text, #1c1c1e);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.chat-msg-menu-item svg[b-uexcg33lz6] {
    flex-shrink: 0;
}

.chat-msg-menu-item:hover[b-uexcg33lz6],
.chat-msg-menu-item:focus-visible[b-uexcg33lz6] {
    background: rgba(28, 28, 30, 0.06);
    outline: none;
}

.chat-msg-menu-item--danger[b-uexcg33lz6] {
    color: #c4261d;
}

.chat-msg-menu-item--danger:hover[b-uexcg33lz6],
.chat-msg-menu-item--danger:focus-visible[b-uexcg33lz6] {
    background: rgba(196, 38, 29, 0.1);
}

.chat-msg-menu-q[b-uexcg33lz6] {
    padding: 6px 10px 3px;
    font-size: 12px;
    font-weight: 800;
    color: var(--crm-text, #1c1c1e);
}

.chat-msg-menu-confirm[b-uexcg33lz6] {
    display: flex;
    gap: 4px;
}

.chat-msg-menu-confirm .chat-msg-menu-item[b-uexcg33lz6] {
    flex: 1;
    justify-content: center;
}

/* Inline-Editor */
.chat-bubble--editing[b-uexcg33lz6] {
    width: 100%;
    min-width: min(240px, 78vw);
    background: #fff !important;
    color: var(--crm-text, #1c1c1e) !important;
    border: 1px solid #e1e4ea !important;
    box-shadow: 0 2px 10px rgba(28, 28, 30, 0.08) !important;
    padding: 8px !important;
}

.chat-edit[b-uexcg33lz6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.chat-edit-input[b-uexcg33lz6] {
    width: 100%;
    min-height: 60px;
    max-height: 240px;
    padding: 8px 10px;
    border: 1px solid #d9dce3;
    border-radius: 10px;
    background: #fff;
    color: var(--crm-text, #1c1c1e);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.45;
    resize: vertical;
}

.chat-edit-input:focus-visible[b-uexcg33lz6] {
    outline: none;
    border-color: var(--crm-accent, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.chat-edit-attachments[b-uexcg33lz6] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chat-edit-chip[b-uexcg33lz6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 28px 5px 5px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    max-width: 220px;
}

.chat-edit-chip--removing[b-uexcg33lz6] {
    opacity: 0.55;
    border-style: dashed;
}

.chat-edit-chip--removing .chat-edit-chip-name[b-uexcg33lz6] {
    text-decoration: line-through;
}

.chat-edit-chip--error[b-uexcg33lz6] {
    border-color: rgba(196, 38, 29, 0.4);
    background: #fff5f4;
}

.chat-edit-chip-preview[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 7px;
    background: #eef2f6;
    color: #475569;
    overflow: hidden;
}

.chat-edit-chip-preview img[b-uexcg33lz6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-edit-chip-name[b-uexcg33lz6] {
    font-size: 12px;
    font-weight: 700;
    color: var(--crm-text, #1c1c1e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 140px;
}

.chat-edit-chip-btn[b-uexcg33lz6] {
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 28, 30, 0.06);
    color: var(--crm-muted, #636366);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.chat-edit-chip-btn:hover[b-uexcg33lz6],
.chat-edit-chip-btn:focus-visible[b-uexcg33lz6] {
    background: rgba(28, 28, 30, 0.12);
    color: var(--crm-text, #1c1c1e);
    outline: none;
}

.chat-edit-chip--removing .chat-edit-chip-btn[b-uexcg33lz6] {
    background: rgba(37, 99, 235, 0.12);
    color: var(--crm-accent, #2563eb);
}

.chat-edit-file-input[b-uexcg33lz6] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    pointer-events: none;
}

.chat-edit-bar[b-uexcg33lz6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chat-edit-attach[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid #d9dce3;
    border-radius: 50%;
    background: #fff;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.chat-edit-attach:hover[b-uexcg33lz6],
.chat-edit-attach:focus-visible[b-uexcg33lz6] {
    color: var(--crm-text, #1c1c1e);
    border-color: #c7ccd6;
    background: rgba(0, 0, 0, 0.03);
    outline: none;
}

.chat-edit-actions[b-uexcg33lz6] {
    display: flex;
    gap: 8px;
    margin-left: auto;
}

.chat-edit-cancel[b-uexcg33lz6],
.chat-edit-save[b-uexcg33lz6] {
    padding: 7px 14px;
    border: 1px solid transparent;
    border-radius: 9px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}

.chat-edit-cancel[b-uexcg33lz6] {
    background: transparent;
    border-color: #d9dce3;
    color: var(--crm-muted, #636366);
}

.chat-edit-cancel:hover[b-uexcg33lz6],
.chat-edit-cancel:focus-visible[b-uexcg33lz6] {
    background: rgba(28, 28, 30, 0.05);
    color: var(--crm-text, #1c1c1e);
    outline: none;
}

.chat-edit-save[b-uexcg33lz6] {
    background: var(--crm-accent, #2563eb);
    color: #fff;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.28);
}

.chat-edit-save:hover:not(:disabled)[b-uexcg33lz6],
.chat-edit-save:focus-visible:not(:disabled)[b-uexcg33lz6] {
    background: #1d4ed8;
    outline: none;
}

.chat-edit-save:disabled[b-uexcg33lz6] {
    background: #cdd3dd;
    box-shadow: none;
    cursor: not-allowed;
}

/* Freestanding composer (AI-chat style) */
.chat-composer-wrap[b-uexcg33lz6] {
    position: relative;
    flex-shrink: 0;
    padding: 12px 18px 18px;
    background: transparent;
}

.chat-file-input-wrap[b-uexcg33lz6] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    margin: -1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    pointer-events: none;
}

.chat-file-input-wrap > *[b-uexcg33lz6] {
    width: 1px;
    height: 1px;
}

.chat-attach-btn[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    margin-left: -10px;
    margin-bottom: 1px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.chat-attach-btn:hover[b-uexcg33lz6],
.chat-attach-btn:focus-visible[b-uexcg33lz6] {
    color: var(--crm-text, #1c1c1e);
    background: rgba(0, 0, 0, 0.05);
    outline: none;
}

/* Status pill: "X Dateien werden verarbeitet" */
.chat-upload-status[b-uexcg33lz6] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 auto 8px;
    padding: 6px 14px 6px 10px;
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.92);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(28, 28, 30, 0.2);
    width: max-content;
    max-width: 90%;
    animation: chat-char-popup-fade-in-b-uexcg33lz6 0.15s ease-out;
}

.chat-upload-spinner[b-uexcg33lz6] {
    display: inline-block;
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: #ffffff;
    animation: chat-spin-b-uexcg33lz6 0.7s linear infinite;
}

.chat-upload-spinner--small[b-uexcg33lz6] {
    width: 18px;
    height: 18px;
    border-color: rgba(37, 99, 235, 0.25);
    border-top-color: var(--crm-accent, #2563eb);
}

@keyframes chat-spin-b-uexcg33lz6 {
    to { transform: rotate(360deg); }
}

/* Staged attachment chips above the composer */
.chat-staged[b-uexcg33lz6] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.chat-staged-chip[b-uexcg33lz6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 30px 6px 6px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(28, 28, 30, 0.05);
    max-width: 260px;
}

.chat-staged-chip--processing[b-uexcg33lz6] {
    background: #f5f6f8;
}

.chat-staged-chip--error[b-uexcg33lz6] {
    border-color: rgba(196, 38, 29, 0.4);
    background: #fff5f4;
}

.chat-staged-preview[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #eef2f6;
    color: #475569;
    overflow: hidden;
}

.chat-staged-preview img[b-uexcg33lz6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.chat-staged-meta[b-uexcg33lz6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.chat-staged-meta strong[b-uexcg33lz6] {
    font-size: 12px;
    font-weight: 800;
    color: var(--crm-text, #1c1c1e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.chat-staged-meta small[b-uexcg33lz6] {
    font-size: 11px;
    font-weight: 600;
    color: var(--crm-muted, #636366);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 170px;
}

.chat-staged-chip--error .chat-staged-meta small[b-uexcg33lz6] {
    color: #c4261d;
}

.chat-staged-remove[b-uexcg33lz6] {
    position: absolute;
    top: 6px;
    right: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 28, 30, 0.06);
    color: var(--crm-muted, #636366);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.chat-staged-remove:hover[b-uexcg33lz6],
.chat-staged-remove:focus-visible[b-uexcg33lz6] {
    background: rgba(196, 38, 29, 0.12);
    color: #c4261d;
    outline: none;
}

/* Attachments inside sent messages */
.chat-attach-grid[b-uexcg33lz6] {
    display: grid;
    gap: 4px;
    margin-bottom: 6px;
    width: 100%;
    max-width: 100%;
}

.chat-attach-grid--count-1[b-uexcg33lz6] {
    grid-template-columns: 1fr;
}

.chat-attach-grid--count-2[b-uexcg33lz6] {
    grid-template-columns: repeat(2, 1fr);
}

.chat-attach-grid--count-3[b-uexcg33lz6],
.chat-attach-grid--count-4[b-uexcg33lz6] {
    grid-template-columns: repeat(2, 1fr);
}

.chat-attach-image[b-uexcg33lz6] {
    display: block;
    overflow: hidden;
    border: 0;
    border-radius: 8px;
    padding: 0;
    aspect-ratio: 1;
    background: rgba(0, 0, 0, 0.04);
    cursor: zoom-in;
    transition: transform 0.15s;
}

.chat-attach-image:focus-visible[b-uexcg33lz6] {
    outline: 2px solid var(--crm-accent, #2563eb);
    outline-offset: 2px;
}

.chat-attach-grid--count-1 .chat-attach-image[b-uexcg33lz6] {
    aspect-ratio: auto;
    max-height: 320px;
}

.chat-attach-image img[b-uexcg33lz6] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.chat-attach-image:hover[b-uexcg33lz6] {
    transform: scale(1.01);
}

.chat-attach-pdf[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 8px 12px 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.18);
    color: inherit;
    text-decoration: none;
    transition: background 0.15s;
}

.chat-message--other .chat-attach-pdf[b-uexcg33lz6] {
    background: #f5f6f8;
    border: 1px solid #e9eaef;
}

.chat-attach-pdf:hover[b-uexcg33lz6],
.chat-attach-pdf:focus-visible[b-uexcg33lz6] {
    background: rgba(255, 255, 255, 0.28);
    outline: none;
}

.chat-message--other .chat-attach-pdf:hover[b-uexcg33lz6],
.chat-message--other .chat-attach-pdf:focus-visible[b-uexcg33lz6] {
    background: #eceef2;
}

.chat-attach-pdf-icon[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
}

.chat-message--other .chat-attach-pdf-icon[b-uexcg33lz6] {
    background: var(--crm-accent, #2563eb);
    color: #fff;
}

.chat-attach-pdf-text[b-uexcg33lz6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.chat-attach-pdf-text strong[b-uexcg33lz6] {
    font-size: 13px;
    font-weight: 800;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-attach-pdf-text small[b-uexcg33lz6] {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.chat-composer[b-uexcg33lz6] {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 6px 6px 6px 18px;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 26px;
    box-shadow: 0 6px 20px rgba(28, 28, 30, 0.08), 0 1px 2px rgba(28, 28, 30, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}

.chat-composer:focus-within[b-uexcg33lz6] {
    border-color: #cbd5e1;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12), 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.chat-input[b-uexcg33lz6] {
    flex: 1;
    min-width: 0;
    min-height: 38px;
    max-height: 160px;
    padding: 9px 4px;
    border: 0;
    background: transparent;
    color: var(--crm-text, #1c1c1e);
    font: inherit;
    font-size: 14px;
    line-height: 1.45;
    resize: none;
}

.chat-input[b-uexcg33lz6]::placeholder {
    color: #9ca3af;
}

.chat-input:focus-visible[b-uexcg33lz6] {
    outline: none;
}

.chat-send[b-uexcg33lz6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--crm-accent, #2563eb);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32);
}

.chat-send svg[b-uexcg33lz6] {
    transform: translate(-1px, 1px);
}

.chat-send:hover:not(:disabled)[b-uexcg33lz6],
.chat-send:focus-visible:not(:disabled)[b-uexcg33lz6] {
    background: #1d4ed8;
    outline: none;
}

.chat-send:active:not(:disabled)[b-uexcg33lz6] {
    transform: scale(0.94);
}

.chat-send:disabled[b-uexcg33lz6] {
    background: #d1d5db;
    box-shadow: none;
    cursor: not-allowed;
}

/* Char-limit popups above composer */
.chat-char-popup[b-uexcg33lz6] {
    position: absolute;
    bottom: calc(100% + 6px);
    right: 14px;
    z-index: 4;
    padding: 5px 11px;
    border-radius: 999px;
    background: rgba(28, 28, 30, 0.9);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(28, 28, 30, 0.18);
    animation: chat-char-popup-fade-in-b-uexcg33lz6 0.15s ease-out;
}

.chat-char-popup[b-uexcg33lz6]::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 16px;
    width: 0;
    height: 0;
    border: 4px solid transparent;
    border-top-color: rgba(28, 28, 30, 0.9);
}

.chat-char-popup--limit[b-uexcg33lz6] {
    background: #c4261d;
}

.chat-char-popup--limit[b-uexcg33lz6]::after {
    border-top-color: #c4261d;
}

@keyframes chat-char-popup-fade-in-b-uexcg33lz6 {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Lightbox / Image modal */
.chat-lightbox[b-uexcg33lz6] {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 32px 24px 24px;
    background: rgba(15, 18, 23, 0.92);
    cursor: zoom-out;
    animation: chat-lightbox-fade-b-uexcg33lz6 0.15s ease-out;
    outline: none;
}

@keyframes chat-lightbox-fade-b-uexcg33lz6 {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-lightbox-img[b-uexcg33lz6] {
    max-width: min(96vw, 1800px);
    max-height: 82vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: #1c1c1e;
    cursor: default;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.55);
}

.chat-lightbox-close[b-uexcg33lz6],
.chat-lightbox-download[b-uexcg33lz6] {
    position: absolute;
    top: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    text-decoration: none;
}

.chat-lightbox-close[b-uexcg33lz6] {
    right: 18px;
}

.chat-lightbox-download[b-uexcg33lz6] {
    right: 70px;
}

.chat-lightbox-close:hover[b-uexcg33lz6],
.chat-lightbox-close:focus-visible[b-uexcg33lz6],
.chat-lightbox-download:hover[b-uexcg33lz6],
.chat-lightbox-download:focus-visible[b-uexcg33lz6] {
    background: rgba(255, 255, 255, 0.22);
    outline: none;
}

.chat-lightbox-close:active[b-uexcg33lz6],
.chat-lightbox-download:active[b-uexcg33lz6] {
    transform: scale(0.94);
}

.chat-lightbox-caption[b-uexcg33lz6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    max-width: 90vw;
    padding: 8px 16px;
    border-radius: 12px;
    background: rgba(28, 28, 30, 0.6);
    color: rgba(255, 255, 255, 0.95);
    cursor: default;
    text-align: center;
}

.chat-lightbox-caption strong[b-uexcg33lz6] {
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 80vw;
}

.chat-lightbox-caption span[b-uexcg33lz6] {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.7);
    font-variant-numeric: tabular-nums;
}

/* Compact mode (mobile-tight, e.g. inside an appointment-detail card) */
.chat-area--compact .chat-messages[b-uexcg33lz6] {
    padding: 10px 12px 6px;
}

.chat-area--compact .chat-composer-wrap[b-uexcg33lz6] {
    padding: 8px 10px 12px;
}

.chat-area--compact .chat-composer[b-uexcg33lz6] {
    padding-left: 12px;
}

.chat-area--compact .chat-bubble-wrap[b-uexcg33lz6] {
    max-width: 85%;
}

.chat-area--compact .chat-empty[b-uexcg33lz6] {
    padding: 28px 16px;
}

@media (max-width: 760px) {
    .chat-messages[b-uexcg33lz6] {
        padding: 12px 12px 8px;
    }

    .chat-bubble-wrap[b-uexcg33lz6] {
        max-width: 82%;
    }

    .chat-composer-wrap[b-uexcg33lz6] {
        padding: 10px 12px 14px;
    }

    .chat-composer[b-uexcg33lz6] {
        padding-left: 14px;
    }

    .chat-lightbox[b-uexcg33lz6] {
        padding: 18px 12px 12px;
        gap: 10px;
    }

    .chat-lightbox-img[b-uexcg33lz6] {
        max-height: 76vh;
    }

    .chat-lightbox-close[b-uexcg33lz6] {
        top: 12px;
        right: 12px;
        width: 38px;
        height: 38px;
    }

    .chat-lightbox-download[b-uexcg33lz6] {
        top: 12px;
        right: 58px;
        width: 38px;
        height: 38px;
    }
}
/* /Components/Shared/EmployeePreview/EmployeePreviewModal.razor.rz.scp.css */
.employee-preview-sr-only[b-jkq4w76i3h] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.employee-preview-header[b-jkq4w76i3h] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.employee-preview-person[b-jkq4w76i3h] {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
}

.employee-preview-avatar-wrap[b-jkq4w76i3h] {
    position: relative;
    flex-shrink: 0;
}

.employee-preview-avatar[b-jkq4w76i3h] {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: white;
    background: #007aff;
    box-shadow: 0 8px 22px rgba(0, 122, 255, 0.2);
    font-size: 1.04rem;
    font-weight: 850;
}

.user-status-dot[b-jkq4w76i3h] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 13px;
    height: 13px;
    border: 2px solid #ffffff;
    border-radius: 999px;
    box-shadow: 0 0 0 1px rgba(28, 28, 30, 0.08);
}

.user-status-dot--active[b-jkq4w76i3h] {
    background: #34c759;
}

.user-status-dot--warn[b-jkq4w76i3h] {
    background: #ff9500;
}

.user-status-dot--inactive[b-jkq4w76i3h] {
    background: #ff3b30;
}

.employee-preview-status-dot[b-jkq4w76i3h] {
    right: -3px;
    bottom: -3px;
    width: 15px;
    height: 15px;
    border-width: 3px;
}

.employee-preview-title[b-jkq4w76i3h] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.employee-preview-kicker[b-jkq4w76i3h] {
    color: #007aff;
    font-size: 0.7rem;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.employee-preview-title h2[b-jkq4w76i3h] {
    margin: 0;
    color: #1c1c1e;
    font-size: 1.08rem;
    font-weight: 850;
    line-height: 1.12;
    overflow-wrap: anywhere;
}

.employee-preview-chips[b-jkq4w76i3h] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.employee-preview-chip[b-jkq4w76i3h] {
    min-height: 25px;
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e5ea;
    border-radius: 999px;
    padding: 0 9px;
    color: #3c3c43;
    background: #f5f5f7;
    font-size: 0.74rem;
    font-weight: 800;
    white-space: nowrap;
}

.employee-preview-chip--active[b-jkq4w76i3h] {
    color: #1f7a36;
    background: #edfaf1;
    border-color: #c7f0d1;
}

.employee-preview-chip--warn[b-jkq4w76i3h] {
    color: #9a5a00;
    background: #fff7e8;
    border-color: #ffdba1;
}

.employee-preview-chip--inactive[b-jkq4w76i3h] {
    color: #b42318;
    background: #fff0ef;
    border-color: #ffccc9;
}

.employee-preview-chip--department[b-jkq4w76i3h] {
    --badge-color: #007aff;
    --badge-text: #007aff;
    color: var(--badge-text);
    background: color-mix(in srgb, var(--badge-color) 9%, white);
    border-color: color-mix(in srgb, var(--badge-color) 24%, white);
}

.employee-preview-close[b-jkq4w76i3h] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.34);
    border-radius: 50%;
    padding: 0;
    color: white;
    background: #1c1c1e;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(28, 28, 30, 0.18);
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
}

.employee-preview-close:hover[b-jkq4w76i3h],
.employee-preview-close:focus-visible[b-jkq4w76i3h] {
    border-color: rgba(255, 59, 48, 0.6);
    background: #ff3b30;
    outline: none;
    transform: scale(1.06);
}

.employee-preview-phone-shell[b-jkq4w76i3h] {
    height: clamp(320px, calc(100vh - 180px), 720px);
    overflow: hidden;
    border: 1.5px solid #d1d1d6;
    border-radius: 20px;
    background: #f6f7f2;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 12px 30px rgba(28, 28, 30, 0.12);
}

.employee-preview-frame[b-jkq4w76i3h] {
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
    background: #f6f7f2;
}
/* /Components/Shared/Modal/AppModal/AppModal.razor.rz.scp.css */
.app-modal__backdrop[b-tdbzuekgnu] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.48);
    backdrop-filter: blur(4px);
    z-index: 2100;
    animation: appModalBackdropIn-b-tdbzuekgnu 0.18s ease;
}

@keyframes appModalBackdropIn-b-tdbzuekgnu {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.app-modal[b-tdbzuekgnu] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(720px, calc(100vw - 32px));
    max-height: calc(100vh - 56px);
    overflow: auto;
    background: #ffffff;
    border-radius: 22px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    z-index: 2101;
    animation: appModalSlideIn-b-tdbzuekgnu 0.2s cubic-bezier(0.34, 1.3, 0.64, 1);
}

@keyframes appModalSlideIn-b-tdbzuekgnu {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 24px)) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.app-modal--small[b-tdbzuekgnu] {
    width: min(520px, calc(100vw - 32px));
}

.app-modal--wide[b-tdbzuekgnu] {
    width: min(960px, calc(100vw - 32px));
}

.app-modal--calendar-appointment[b-tdbzuekgnu] {
    width: min(920px, calc(100vw - 32px));
    height: min(720px, calc(100vh - 56px));
    display: flex;
    flex-direction: column;
    overflow: visible;
    border-radius: 18px;
}

.app-modal--calendar-appointment.app-modal--calendar-with-panel[b-tdbzuekgnu] {
    left: calc(50% + 168px);
    width: min(820px, calc(100vw - 376px));
}

.app-modal--calendar-appointment .app-modal__header[b-tdbzuekgnu],
.app-modal--calendar-appointment .app-modal__actions[b-tdbzuekgnu] {
    flex-shrink: 0;
}

.app-modal--calendar-appointment .app-modal__body[b-tdbzuekgnu] {
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.app-modal--phone[b-tdbzuekgnu] {
    width: min(430px, calc(100vw - 24px));
    max-height: calc(100vh - 28px);
    overflow: hidden;
    border-radius: 24px;
}

.app-modal--phone .app-modal__header[b-tdbzuekgnu] {
    padding: 16px 16px 0;
}

.app-modal--phone .app-modal__body[b-tdbzuekgnu] {
    padding: 12px 16px 16px;
}

.app-modal__header[b-tdbzuekgnu] {
    padding: 24px 28px 0;
}

.app-modal__body[b-tdbzuekgnu] {
    padding: 20px 28px 28px;
}

.app-modal--flush .app-modal__body[b-tdbzuekgnu] {
    padding: 0;
}

.app-modal__actions[b-tdbzuekgnu] {
    padding: 0 28px 28px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    align-items: center;
}

.app-modal__close[b-tdbzuekgnu] {
    position: fixed;
    top: 18px;
    right: 18px;
    z-index: 2102;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background 0.18s, border-color 0.18s, transform 0.15s;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
}

.app-modal__close:hover[b-tdbzuekgnu],
.app-modal__close:focus-visible[b-tdbzuekgnu] {
    background: rgba(255, 59, 48, 0.82);
    border-color: rgba(255, 59, 48, 0.6);
    transform: scale(1.08);
    outline: none;
}

.app-modal__close:active[b-tdbzuekgnu] {
    transform: scale(0.94);
}

@media (max-width: 760px) {
    .app-modal[b-tdbzuekgnu] {
        width: min(100vw - 20px, 960px);
        max-height: calc(100vh - 24px);
        border-radius: 18px;
    }

    .app-modal__header[b-tdbzuekgnu] {
        padding: 20px 18px 0;
    }

    .app-modal__body[b-tdbzuekgnu] {
        padding: 18px;
    }

    .app-modal__actions[b-tdbzuekgnu] {
        padding: 0 18px 18px;
    }
}

@media (max-width: 1080px) and (min-width: 681px) {
    .app-modal--calendar-appointment.app-modal--calendar-with-panel[b-tdbzuekgnu] {
        left: calc(50% + 158px);
        width: min(620px, calc(100vw - 336px));
    }
}

@media (max-width: 680px) {
    .app-modal--calendar-appointment.app-modal--calendar-with-panel[b-tdbzuekgnu] {
        position: absolute;
        top: 12px;
        left: 10px;
        width: calc(100vw - 20px);
        height: min(620px, calc(100vh - 76px));
        max-height: none;
        transform: none;
    }
}
/* /Components/Shared/Numpad/AppNumPad/AppNumPad.razor.rz.scp.css */
.app-numpad[b-goowli383v] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 16px;
}

.app-numpad__key[b-goowli383v] {
    height: 58px;
    font-size: 22px;
    font-weight: 500;
    background: #f2f2f7;
    color: #1c1c1e;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.07s, transform 0.07s;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.app-numpad__key:active[b-goowli383v] {
    background: #c7c7cc;
    transform: scale(0.93);
}

.app-numpad__key--secondary[b-goowli383v] {
    background: #e5e5ea;
}

.app-numpad__key--comma[b-goowli383v] {
    font-size: 24px;
    font-weight: 700;
}

.app-numpad__key--enter[b-goowli383v] {
    grid-column: span 3;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.app-numpad__enter-label[b-goowli383v] {
    text-transform: uppercase;
}
/* /Components/Shared/Toasts/AppToast/AppToast.razor.rz.scp.css */
.app-toast[b-36m4dfg5x6] {
    width: 100%;
    display: grid;
    grid-template-columns: 3px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 8px;
    color: #111827;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.14);
    animation: app-toast-enter-b-36m4dfg5x6 160ms ease-out;
}

.app-toast__accent[b-36m4dfg5x6] {
    background: #64748b;
}

.app-toast--success .app-toast__accent[b-36m4dfg5x6] {
    background: #2563eb;
}

.app-toast--warn .app-toast__accent[b-36m4dfg5x6] {
    background: #d97706;
}

.app-toast--error .app-toast__accent[b-36m4dfg5x6] {
    background: #dc2626;
}

.app-toast__content[b-36m4dfg5x6] {
    min-width: 0;
    padding: 7px 7px 6px 9px;
}

.app-toast__header[b-36m4dfg5x6] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20px;
    gap: 7px;
    align-items: center;
}

.app-toast__header strong[b-36m4dfg5x6] {
    overflow: hidden;
    color: #111827;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-toast__close[b-36m4dfg5x6] {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    padding: 0;
    color: #64748b;
    background: transparent;
    cursor: pointer;
}

.app-toast__close:hover[b-36m4dfg5x6],
.app-toast__close:focus-visible[b-36m4dfg5x6] {
    color: #111827;
    background: #f1f5f9;
    outline: none;
}

.app-toast p[b-36m4dfg5x6] {
    margin: 1px 0 5px;
    color: #475569;
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.22;
}

.app-toast__copyable[b-36m4dfg5x6] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin: 6px 0 4px;
    padding: 6px 6px 6px 9px;
    border: 1px solid rgba(17, 24, 39, 0.1);
    border-radius: 6px;
    background: #f8fafc;
}

.app-toast__copyable-value[b-36m4dfg5x6] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    color: #0f172a;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.1;
    user-select: all;
    white-space: nowrap;
}

.app-toast__copy[b-36m4dfg5x6] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 5px;
    padding: 0;
    color: #475569;
    background: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.app-toast__copy:hover[b-36m4dfg5x6],
.app-toast__copy:focus-visible[b-36m4dfg5x6] {
    color: #111827;
    background: #f1f5f9;
    outline: none;
}

.app-toast__copy--copied[b-36m4dfg5x6],
.app-toast__copy--copied:hover[b-36m4dfg5x6] {
    color: #15803d;
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.app-toast__share[b-36m4dfg5x6] {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(17, 24, 39, 0.12);
    border-radius: 5px;
    padding: 0;
    color: #475569;
    background: #ffffff;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}

.app-toast__share:hover[b-36m4dfg5x6],
.app-toast__share:focus-visible[b-36m4dfg5x6] {
    color: #1d4ed8;
    border-color: #bfdbfe;
    background: #eff6ff;
    outline: none;
}

.app-toast__footer[b-36m4dfg5x6] {
    display: grid;
    grid-template-columns: auto minmax(54px, 1fr);
    gap: 6px;
    align-items: center;
    color: #94a3b8;
    font-size: 0.58rem;
    font-weight: 750;
}

.app-toast__progress[b-36m4dfg5x6] {
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: #e2e8f0;
}

.app-toast__progress-fill[b-36m4dfg5x6] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: #64748b;
    transform-origin: left center;
    animation-name: app-toast-progress-b-36m4dfg5x6;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.app-toast--success .app-toast__progress-fill[b-36m4dfg5x6] {
    background: #2563eb;
}

.app-toast--warn .app-toast__progress-fill[b-36m4dfg5x6] {
    background: #d97706;
}

.app-toast--error .app-toast__progress-fill[b-36m4dfg5x6] {
    background: #dc2626;
}

@keyframes app-toast-enter-b-36m4dfg5x6 {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes app-toast-progress-b-36m4dfg5x6 {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}
/* /Components/Shared/Toasts/AppToast/AppToastHost.razor.rz.scp.css */
.app-toast-host[b-cofoicory6] {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 5000;
    width: min(260px, calc(100vw - 20px));
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}

.app-toast-host[b-cofoicory6]  .app-toast {
    pointer-events: auto;
}

@media (max-width: 520px) {
    .app-toast-host[b-cofoicory6] {
        top: 10px;
        left: 10px;
    }
}