/* /Components/Account/Pages/AccessDenied.razor.rz.scp.css */
.access-denied-card[b-xez2cqle6k] {
    display: flex;
    width: min(520px, 100%);
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 32px;
    border: 1px solid rgba(135, 159, 190, 0.30);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 26px 70px rgba(31, 58, 92, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    text-align: center;
    backdrop-filter: blur(20px);
}

.access-denied-icon[b-xez2cqle6k] {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid #dc7e89;
    border-radius: 16px;
    color: #ffffff;
    background: linear-gradient(145deg, #e46d78 0%, #bd3c49 72%, #8c2631 100%);
    box-shadow: 0 12px 26px rgba(158, 45, 57, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    font-size: 28px;
    font-weight: 900;
}

.access-denied-copy[b-xez2cqle6k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.access-denied-eyebrow[b-xez2cqle6k] {
    color: #b83d4a;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.access-denied-copy h1[b-xez2cqle6k] {
    margin: 0;
    color: #14233c;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: -0.7px;
}

.access-denied-copy p[b-xez2cqle6k],
.access-denied-help[b-xez2cqle6k] {
    margin: 0;
    color: #64748b;
    font-size: 12.5px;
    line-height: 1.55;
}

.access-denied-help[b-xez2cqle6k] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid rgba(23, 105, 220, 0.18);
    border-radius: 10px;
    background: rgba(232, 242, 255, 0.64);
}

.access-denied-actions[b-xez2cqle6k] {
    display: grid;
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.access-denied-actions form[b-xez2cqle6k] {
    display: contents;
}

.access-denied-primary[b-xez2cqle6k],
.access-denied-secondary[b-xez2cqle6k] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
}

.access-denied-primary[b-xez2cqle6k] {
    border: 1px solid #1769dc;
    color: #ffffff;
    background: linear-gradient(135deg, #225fc5 0%, #1769dc 65%, #4b9fb2 100%);
    box-shadow: 0 9px 20px rgba(23, 105, 220, 0.20);
}

.access-denied-secondary[b-xez2cqle6k] {
    border: 1px solid #c8d5e6;
    color: #24344d;
    background: rgba(255, 255, 255, 0.72);
}

@media (prefers-color-scheme: dark) {
    .access-denied-card[b-xez2cqle6k] {
        border-color: rgba(129, 159, 195, 0.24);
        background: rgba(21, 33, 49, 0.94);
        box-shadow: 0 28px 74px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .access-denied-copy h1[b-xez2cqle6k] {
        color: #f4f7fb;
    }

    .access-denied-copy p[b-xez2cqle6k],
    .access-denied-help[b-xez2cqle6k] {
        color: #9aabc0;
    }

    .access-denied-help[b-xez2cqle6k] {
        border-color: rgba(91, 155, 235, 0.20);
        background: rgba(35, 77, 127, 0.20);
    }

    .access-denied-secondary[b-xez2cqle6k] {
        border-color: #34485f;
        color: #eef4fb;
        background: #132235;
    }
}

@media (max-width: 560px) {
    .access-denied-card[b-xez2cqle6k] {
        padding: 24px 20px;
    }

    .access-denied-actions[b-xez2cqle6k] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Account/Pages/ChangePasswordRequired.razor.rz.scp.css */
.password-change-card[b-f0p62rhnl3] {
    width: min(500px, 100%);
    padding: 30px;
    border: 1px solid rgba(139, 164, 194, 0.32);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 24px 60px rgba(25, 45, 70, 0.18);
    backdrop-filter: blur(18px);
}

.password-change-brand[b-f0p62rhnl3] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(132, 153, 181, 0.24);
}

.password-change-brand img[b-f0p62rhnl3] {
    width: 126px;
    height: auto;
}

.password-change-brand > div[b-f0p62rhnl3],
.password-change-heading[b-f0p62rhnl3],
.password-change-field[b-f0p62rhnl3] {
    display: flex;
    flex-direction: column;
}

.password-change-brand strong[b-f0p62rhnl3] {
    color: #17223a;
    font-size: 18px;
}

.password-change-brand span[b-f0p62rhnl3],
.password-change-heading p[b-f0p62rhnl3],
.password-change-rules[b-f0p62rhnl3] {
    color: #65758d;
}

.password-change-brand span[b-f0p62rhnl3] {
    font-size: 11px;
}

.password-change-heading[b-f0p62rhnl3] {
    gap: 6px;
    padding: 24px 0 18px;
}

.password-change-eyebrow[b-f0p62rhnl3] {
    color: #1769dc;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.password-change-heading h1[b-f0p62rhnl3] {
    margin: 0;
    color: #162139;
    font-size: 27px;
    line-height: 1.15;
}

.password-change-heading p[b-f0p62rhnl3] {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
}

.password-change-form[b-f0p62rhnl3] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.password-change-field[b-f0p62rhnl3] {
    gap: 6px;
    color: #17223a;
    font-size: 11px;
    font-weight: 800;
}

.password-change-field[b-f0p62rhnl3]  .password-change-input {
    width: 100%;
    min-height: 44px;
    padding: 0 12px;
    border: 1px solid #cbd6e5;
    border-radius: 9px;
    outline: none;
    color: #17223a;
    background: #ffffff;
    font: inherit;
    font-size: 13px;
}

.password-change-field[b-f0p62rhnl3]  .password-change-input:focus {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.12);
}

.password-change-validation[b-f0p62rhnl3] {
    color: #b23c49;
    font-size: 10px;
}

.password-change-rules[b-f0p62rhnl3] {
    padding: 10px 12px;
    border-radius: 9px;
    background: #eef5ff;
    font-size: 10.5px;
    line-height: 1.5;
}

.password-change-submit[b-f0p62rhnl3] {
    min-height: 44px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #1f5ec6, #1769dc 68%, #4ea7b5);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22);
    font-family: inherit;
    font-size: 12px;
    font-weight: 850;
    cursor: pointer;
}

.password-change-message[b-f0p62rhnl3] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border: 1px solid #e4a1a9;
    border-radius: 10px;
    color: #8b2f39;
    background: #fff0f2;
    font-size: 11px;
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    .password-change-card[b-f0p62rhnl3] {
        border-color: rgba(116, 147, 184, 0.30);
        background: rgba(17, 30, 47, 0.96);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.36);
    }

    .password-change-brand strong[b-f0p62rhnl3],
    .password-change-heading h1[b-f0p62rhnl3],
    .password-change-field[b-f0p62rhnl3] {
        color: #f2f6fb;
    }

    .password-change-brand span[b-f0p62rhnl3],
    .password-change-heading p[b-f0p62rhnl3],
    .password-change-rules[b-f0p62rhnl3] {
        color: #9db0c7;
    }

    .password-change-field[b-f0p62rhnl3]  .password-change-input {
        border-color: #32475f;
        color: #f2f6fb;
        background: #142337;
    }

    .password-change-rules[b-f0p62rhnl3] {
        background: rgba(35, 77, 127, 0.20);
    }

    .password-change-message[b-f0p62rhnl3] {
        border-color: rgba(225, 111, 124, 0.46);
        color: #ffc4ca;
        background: rgba(131, 38, 50, 0.24);
    }
}
/* /Components/Account/Pages/ForgotPassword.razor.rz.scp.css */
.account-card#forgot-password-card[b-gupy3untei] {
    box-sizing: border-box;
    display: flex;
    width: min(720px, 100%);
    max-width: 720px;
    gap: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(44, 122, 188, .22);
    border-radius: 18px;
    color: #09233f;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 28px 80px rgba(13, 72, 118, .2);
    backdrop-filter: blur(18px);
}

#forgot-password-card .account-card-body[b-gupy3untei] {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 24px;
    padding: 34px 46px 26px;
}

#forgot-password-card .account-brand[b-gupy3untei] {
    display: flex;
    align-items: center;
    gap: 16px;
}

#forgot-password-card .account-brand img[b-gupy3untei] {
    width: 118px;
    height: 74px;
    flex: 0 0 auto;
    object-fit: contain;
}

#forgot-password-card .account-brand-divider[b-gupy3untei] {
    width: 1px;
    height: 50px;
    flex: 0 0 auto;
    background: rgba(73, 100, 127, .28);
}

#forgot-password-card .account-brand div[b-gupy3untei],
#forgot-password-card .account-heading[b-gupy3untei],
#forgot-password-card .account-form[b-gupy3untei],
#forgot-password-card .account-field[b-gupy3untei],
#forgot-password-card .account-message[b-gupy3untei] {
    display: flex;
    flex-direction: column;
}

#forgot-password-card .account-brand strong[b-gupy3untei] {
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.01em;
}

#forgot-password-card .account-brand span:not(.account-brand-divider)[b-gupy3untei],
#forgot-password-card .account-heading p[b-gupy3untei] {
    color: #49647f;
}

#forgot-password-card .account-brand span:not(.account-brand-divider)[b-gupy3untei] {
    margin-top: 2px;
    font-size: 13px;
}

#forgot-password-card .account-heading[b-gupy3untei] {
    gap: 8px;
}

#forgot-password-card .account-kicker[b-gupy3untei] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #1769dc;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

#forgot-password-card .account-kicker svg[b-gupy3untei],
#forgot-password-card .account-secondary-link svg[b-gupy3untei] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
}

#forgot-password-card .account-heading h1[b-gupy3untei] {
    margin: 4px 0 0;
    font-size: clamp(30px, 4vw, 36px);
    font-weight: 950;
    letter-spacing: -.035em;
    line-height: 1.08;
}

#forgot-password-card .account-heading-accent[b-gupy3untei] {
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: #c71f37;
}

#forgot-password-card .account-heading p[b-gupy3untei] {
    max-width: 590px;
    margin: 2px 0 0;
    font-size: 14px;
    line-height: 1.55;
}

#forgot-password-card .account-form[b-gupy3untei] {
    gap: 17px;
}

#forgot-password-card .account-field[b-gupy3untei] {
    gap: 8px;
    font-size: 13px;
    font-weight: 850;
}

#forgot-password-card .account-input-shell[b-gupy3untei] {
    position: relative;
    display: block;
}

#forgot-password-card .account-input-shell > svg[b-gupy3untei] {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 16px;
    width: 20px;
    height: 20px;
    fill: none;
    stroke: #7890a8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
    transform: translateY(-50%);
    pointer-events: none;
}

#forgot-password-card[b-gupy3untei]  .account-input {
    box-sizing: border-box;
    width: 100%;
    min-height: 54px;
    padding: 0 16px 0 48px;
    border: 1px solid rgba(23, 105, 220, .38);
    border-radius: 10px;
    outline: none;
    color: #09233f;
    background: rgba(248, 251, 255, .94);
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

#forgot-password-card[b-gupy3untei]  .account-input::placeholder {
    color: #7f8d9d;
    opacity: 1;
}

#forgot-password-card[b-gupy3untei]  .account-input:hover {
    border-color: rgba(23, 105, 220, .58);
}

#forgot-password-card[b-gupy3untei]  .account-input:focus {
    border-color: #1769dc;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 105, 220, .13);
}

#forgot-password-card .account-input-shell:focus-within > svg[b-gupy3untei] {
    stroke: #1769dc;
}

#forgot-password-card[b-gupy3untei]  .account-validation {
    color: #bd3548;
    font-size: 11px;
}

#forgot-password-card .account-submit[b-gupy3untei] {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(110deg, #0d54ce, #1f7df2);
    box-shadow: 0 16px 30px rgba(23, 105, 220, .27);
    font: inherit;
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, filter 160ms ease;
}

#forgot-password-card .account-submit svg[b-gupy3untei] {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

#forgot-password-card .account-submit:hover[b-gupy3untei] {
    filter: brightness(1.04);
    box-shadow: 0 18px 34px rgba(23, 105, 220, .34);
    transform: translateY(-1px);
}

#forgot-password-card .account-submit:focus-visible[b-gupy3untei],
#forgot-password-card .account-secondary-link:focus-visible[b-gupy3untei] {
    outline: 3px solid rgba(23, 105, 220, .3);
    outline-offset: 3px;
}

#forgot-password-card .account-message[b-gupy3untei] {
    gap: 6px;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

#forgot-password-card .account-message.success[b-gupy3untei] {
    border: 1px solid rgba(34, 151, 101, .38);
    color: #176143;
    background: #e4f7ee;
}

#forgot-password-card .account-message.warning[b-gupy3untei] {
    border: 1px solid rgba(214, 154, 36, .42);
    color: #73510d;
    background: #fff5dc;
}

#forgot-password-card .account-message a[b-gupy3untei] {
    overflow-wrap: anywhere;
    color: #1769dc;
}

#forgot-password-card .account-link-divider[b-gupy3untei] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 14px;
    color: #71869c;
}

#forgot-password-card .account-link-divider span[b-gupy3untei] {
    height: 1px;
    background: rgba(73, 100, 127, .16);
}

#forgot-password-card .account-link-divider small[b-gupy3untei] {
    font-size: 12px;
}

#forgot-password-card .account-secondary-link[b-gupy3untei] {
    display: inline-flex;
    min-height: 32px;
    align-self: center;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #1769dc;
    font-size: 13px;
    font-weight: 850;
    text-decoration: none;
}

#forgot-password-card .account-secondary-link:hover[b-gupy3untei] {
    text-decoration: underline;
}

#forgot-password-card .account-security-note[b-gupy3untei] {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    min-height: 66px;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 46px;
    border-top: 1px solid rgba(44, 122, 188, .16);
    color: #607a94;
    background: rgba(238, 247, 255, .72);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}

#forgot-password-card .account-security-icon[b-gupy3untei] {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #1769dc;
    background: rgba(23, 105, 220, .1);
}

#forgot-password-card .account-security-icon svg[b-gupy3untei] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

@media (max-width: 768px), (pointer: coarse) {
    .account-card#forgot-password-card[b-gupy3untei] {
        width: min(calc(100% - 24px), 720px);
        max-width: 720px;
        margin: clamp(16px, 6vh, 52px) auto 24px;
        overflow: hidden;
        border-radius: 16px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    #forgot-password-card .account-card-body[b-gupy3untei] {
        min-width: 0;
        gap: 20px;
        padding: 24px 20px 22px;
    }

    #forgot-password-card .account-brand[b-gupy3untei],
    #forgot-password-card .account-brand > div[b-gupy3untei],
    #forgot-password-card .account-heading[b-gupy3untei],
    #forgot-password-card .account-form[b-gupy3untei],
    #forgot-password-card .account-field[b-gupy3untei],
    #forgot-password-card .account-input-shell[b-gupy3untei],
    #forgot-password-card .account-message[b-gupy3untei] {
        min-width: 0;
        max-width: 100%;
    }

    #forgot-password-card .account-brand[b-gupy3untei] {
        gap: 12px;
    }

    #forgot-password-card .account-brand img[b-gupy3untei] {
        width: 96px;
        height: 62px;
    }

    #forgot-password-card .account-brand-divider[b-gupy3untei] {
        height: 42px;
    }

    #forgot-password-card .account-brand strong[b-gupy3untei] {
        font-size: 15px;
    }

    #forgot-password-card .account-brand span:not(.account-brand-divider)[b-gupy3untei] {
        font-size: 12px;
    }

    #forgot-password-card .account-heading h1[b-gupy3untei] {
        font-size: clamp(27px, 8vw, 34px);
        overflow-wrap: anywhere;
    }

    #forgot-password-card .account-heading p[b-gupy3untei],
    #forgot-password-card .account-message[b-gupy3untei],
    #forgot-password-card .account-message a[b-gupy3untei],
    #forgot-password-card .account-security-note[b-gupy3untei] {
        overflow-wrap: anywhere;
        word-break: normal;
    }

    #forgot-password-card[b-gupy3untei]  .account-input,
    #forgot-password-card .account-submit[b-gupy3untei] {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    #forgot-password-card .account-secondary-link[b-gupy3untei] {
        min-height: 44px;
        -webkit-tap-highlight-color: transparent;
    }

    #forgot-password-card .account-security-note[b-gupy3untei] {
        padding: 14px 20px;
        font-size: 12px;
    }
}

@media (max-width: 420px) {
    #forgot-password-card .account-brand img[b-gupy3untei] {
        width: 82px;
        height: 54px;
    }

    #forgot-password-card .account-brand[b-gupy3untei] {
        gap: 10px;
    }

    #forgot-password-card .account-brand strong[b-gupy3untei] {
        font-size: 14px;
    }

    #forgot-password-card .account-security-note[b-gupy3untei] {
        align-items: flex-start;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    #forgot-password-card[b-gupy3untei]  .account-input,
    #forgot-password-card .account-submit[b-gupy3untei] {
        transition: none;
    }

    #forgot-password-card .account-submit:hover[b-gupy3untei] {
        transform: none;
    }
}
/* /Components/Account/Pages/Login.razor.rz.scp.css */
.login-experience[b-ou9wkxxy3x] {
    --ink-950: #06223f;
    --ink-800: #0b3b68;
    --blue-700: #075fba;
    --blue-600: #0878d7;
    --blue-500: #1f9fed;
    --cyan-400: #58d1e4;
    --mint-400: #35c99a;
    position: fixed;
    z-index: 20;
    inset: 0;
    min-height: 100dvh;
    overflow: auto;
    color: var(--ink-950);
    background:
        radial-gradient(ellipse at 14% 12%, rgba(255, 255, 255, .98) 0 18%, transparent 48%),
        radial-gradient(ellipse at 88% 18%, rgba(92, 188, 234, .28) 0 13%, transparent 42%),
        radial-gradient(ellipse at 82% 88%, rgba(33, 154, 216, .22) 0 16%, transparent 46%),
        linear-gradient(132deg, #fbfeff 0%, #eef9ff 39%, #dff3fb 68%, #cce9f7 100%);
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.login-experience[b-ou9wkxxy3x],
.login-experience *[b-ou9wkxxy3x] {
    box-sizing: border-box;
}

.login-experience[b-ou9wkxxy3x]  input,
.login-experience[b-ou9wkxxy3x]  textarea {
    -webkit-user-select: text;
    user-select: text;
}

.login-experience[b-ou9wkxxy3x]::before,
.login-experience[b-ou9wkxxy3x]::after {
    position: fixed;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
}

.login-experience[b-ou9wkxxy3x]::before {
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .5), transparent 22%, transparent 72%, rgba(255, 255, 255, .22)),
        url("/images/login/bio-microorganism-field.webp");
    background-position: center;
    background-size: cover;
    opacity: .12;
    filter: blur(11px) saturate(.88);
    transform: scale(1.08);
    animation: backgroundBreath-b-ou9wkxxy3x 30s ease-in-out infinite alternate;
}

.login-experience[b-ou9wkxxy3x]::after {
    background:
        linear-gradient(rgba(8, 105, 168, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 105, 168, .024) 1px, transparent 1px),
        radial-gradient(ellipse at 57% 46%, transparent 0 38%, rgba(5, 55, 96, .045) 82%, rgba(3, 39, 73, .075) 100%);
    background-size: 52px 52px, 52px 52px, auto;
    mask-image: radial-gradient(ellipse at 55% 45%, #000 0 44%, transparent 86%);
    animation: gridDrift-b-ou9wkxxy3x 44s linear infinite;
}

.login-atmosphere[b-ou9wkxxy3x] {
    position: fixed;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.specimen-plane[b-ou9wkxxy3x],
.depth-wash[b-ou9wkxxy3x],
.bacteria-strand[b-ou9wkxxy3x] {
    position: absolute;
    display: block;
}

.specimen-plane[b-ou9wkxxy3x] {
    background:
        linear-gradient(rgba(231, 250, 255, .18), rgba(231, 250, 255, .18)),
        url("/images/login/bio-microorganism-field.webp");
    background-position: center;
    background-size: cover;
    border-radius: 38% 62% 52% 48% / 45% 35% 65% 55%;
    box-shadow: 0 36px 120px rgba(7, 87, 132, .16);
    filter: blur(10px) saturate(.96);
    opacity: .2;
    transform-origin: center;
    mask-image: radial-gradient(ellipse at center, #000 0 35%, rgba(0, 0, 0, .75) 45%, transparent 72%);
}

.specimen-plane-one[b-ou9wkxxy3x] {
    top: -15vw;
    left: -12vw;
    width: clamp(520px, 42vw, 760px);
    aspect-ratio: 1.14;
    animation: specimenFloatOne-b-ou9wkxxy3x 30s ease-in-out infinite alternate;
}

.specimen-plane-two[b-ou9wkxxy3x] {
    top: -9vw;
    right: -13vw;
    width: clamp(470px, 38vw, 720px);
    aspect-ratio: .95;
    opacity: .18;
    transform: rotate(12deg);
    animation: specimenFloatTwo-b-ou9wkxxy3x 34s ease-in-out infinite alternate;
}


.depth-wash[b-ou9wkxxy3x] {
    width: min(58vw, 900px);
    height: min(46vw, 680px);
    border-radius: 42% 58% 50% 50% / 48% 44% 56% 52%;
    background:
        linear-gradient(135deg, rgba(37, 162, 231, .18), rgba(89, 214, 225, .11) 55%, transparent);
    filter: blur(26px);
    opacity: .78;
}

.depth-wash-one[b-ou9wkxxy3x] {
    top: 14%;
    left: 23%;
    animation: depthWashOne-b-ou9wkxxy3x 22s ease-in-out infinite alternate;
}

.depth-wash-two[b-ou9wkxxy3x] {
    right: 8%;
    bottom: 1%;
    width: min(44vw, 680px);
    height: min(30vw, 480px);
    background:
        linear-gradient(155deg, rgba(55, 203, 205, .16), rgba(255, 255, 255, .1) 62%, transparent);
    animation: depthWashTwo-b-ou9wkxxy3x 26s ease-in-out infinite alternate;
}

.bacteria-strand[b-ou9wkxxy3x] {
    width: 210px;
    height: 42px;
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .18), rgba(77, 197, 225, .36), rgba(4, 78, 129, .16)),
        repeating-linear-gradient(90deg, transparent 0 20px, rgba(255, 255, 255, .22) 21px 24px);
    border: 1px solid rgba(255, 255, 255, .22);
    box-shadow: inset 0 2px 12px rgba(255, 255, 255, .26), 0 24px 70px rgba(18, 103, 146, .13);
    filter: blur(2px);
    opacity: .16;
}

.bacteria-strand[b-ou9wkxxy3x]::before,
.bacteria-strand[b-ou9wkxxy3x]::after {
    position: absolute;
    inset: 7px 16px;
    border-radius: inherit;
    background: linear-gradient(90deg, rgba(255, 255, 255, .14), transparent 58%);
    content: "";
}

.strand-one[b-ou9wkxxy3x] {
    top: 18%;
    left: 50%;
    transform: rotate(-31deg);
    animation: strandDriftOne-b-ou9wkxxy3x 27s ease-in-out infinite alternate;
}



.login-stage[b-ou9wkxxy3x] {
    position: relative;
    z-index: 2;
    display: grid;
    width: min(1680px, calc(100% - clamp(44px, 6vw, 104px)));
    min-height: calc(100dvh - 34px);
    grid-template-columns: minmax(570px, 1fr) minmax(500px, 560px);
    align-items: center;
    gap: clamp(34px, 4.5vw, 72px);
    margin: 0 auto;
    padding: clamp(32px, 5vh, 66px) 0 78px;
}

.login-hero[b-ou9wkxxy3x] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    animation: heroEnter-b-ou9wkxxy3x 780ms cubic-bezier(.22, 1, .36, 1) both;
}

.hero-brand-lockup[b-ou9wkxxy3x] {
    display: grid;
    width: min(760px, 100%);
    justify-items: start;
}

.brand-mark-shell[b-ou9wkxxy3x] {
    position: relative;
    width: clamp(560px, 38vw, 730px);
    aspect-ratio: 629 / 600;
    isolation: isolate;
}

.brand-mark-ambient[b-ou9wkxxy3x] {
    position: absolute;
    inset: 5% 3% 1%;
    z-index: -1;
    border-radius: 44% 56% 54% 46% / 47% 40% 60% 53%;
    background:
        radial-gradient(ellipse at 50% 45%, rgba(107, 224, 242, .42), rgba(13, 117, 183, .16) 48%, transparent 74%);
    filter: blur(11px);
    opacity: .9;
    animation: markAmbientPulse-b-ou9wkxxy3x 8s ease-in-out infinite alternate;
}

.brand-mark-svg[b-ou9wkxxy3x] {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.brand-mark-core[b-ou9wkxxy3x] {
    transform-origin: center;
    animation: markHover-b-ou9wkxxy3x 13s ease-in-out infinite alternate;
}

.brand-bio-layer[b-ou9wkxxy3x] {
    will-change: transform;
}

.brand-bio-layer-main[b-ou9wkxxy3x] {
    filter: saturate(1.08) contrast(1.06);
}

.brand-bio-depth[b-ou9wkxxy3x] {
    mix-blend-mode: multiply;
}

.brand-mark-rim[b-ou9wkxxy3x] {
    fill: none;
    stroke: url(#pdiMarkEdge);
    stroke-linejoin: round;
    stroke-width: 2.2;
    opacity: .5;
    filter: drop-shadow(0 22px 30px rgba(7, 64, 104, .12));
    pointer-events: none;
    vector-effect: non-scaling-stroke;
}

.hero-copy[b-ou9wkxxy3x] {
    position: relative;
    width: min(620px, 42vw);
    margin-top: clamp(-34px, -1.5vw, -16px);
    padding-left: clamp(24px, 3.5vw, 62px);
    color: #0b3763;
    font-size: clamp(21px, 1.45vw, 28px);
    line-height: 1.3;
    text-align: left;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .82);
}

.hero-copy[b-ou9wkxxy3x]::before {
    position: absolute;
    top: 2px;
    bottom: 4px;
    left: clamp(8px, 1.8vw, 32px);
    width: 3px;
    border-radius: 999px;
    background: linear-gradient(#28a7ea, #57d5df);
    box-shadow: 0 8px 20px rgba(12, 120, 205, .22);
    content: "";
}

.hero-copy-kicker[b-ou9wkxxy3x],
.hero-copy strong[b-ou9wkxxy3x],
.hero-copy span[b-ou9wkxxy3x] {
    display: block;
}

.hero-copy-kicker[b-ou9wkxxy3x] {
    margin-bottom: 7px;
    color: rgba(9, 91, 148, .72);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.hero-copy strong[b-ou9wkxxy3x] {
    font-weight: 780;
}

.hero-copy span:not(.hero-copy-kicker)[b-ou9wkxxy3x] {
    color: #1a5f91;
    font-weight: 600;
}

.auth-card[b-ou9wkxxy3x] {
    position: relative;
    width: 100%;
    min-height: min(760px, calc(100dvh - 118px));
    padding: clamp(46px, 3.3vw, 60px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 32px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .78), rgba(238, 249, 255, .58)),
        linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .12));
    box-shadow:
        0 46px 120px rgba(5, 64, 108, .23),
        0 14px 36px rgba(20, 126, 196, .12),
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 0 0 1px rgba(87, 168, 220, .08);
    backdrop-filter: blur(12px) saturate(1.14);
    animation: cardEnter-b-ou9wkxxy3x 680ms 90ms cubic-bezier(.22, 1, .36, 1) both;
}

.auth-card[b-ou9wkxxy3x]::before,
.auth-card[b-ou9wkxxy3x]::after,
.auth-card-light[b-ou9wkxxy3x] {
    position: absolute;
    content: "";
    pointer-events: none;
}

.auth-card[b-ou9wkxxy3x]::before {
    inset: 0;
    border-radius: inherit;
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .42), transparent 31% 70%, rgba(66, 193, 229, .1));
}

.auth-card[b-ou9wkxxy3x]::after {
    right: -24%;
    bottom: -28%;
    width: 72%;
    aspect-ratio: 1;
    border-radius: 48% 52% 56% 44%;
    background: linear-gradient(135deg, rgba(41, 174, 232, .14), rgba(82, 216, 214, .09), transparent);
    filter: blur(18px);
}

.auth-card-light[b-ou9wkxxy3x] {
    top: -42%;
    left: -58%;
    width: 92%;
    height: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .5), transparent);
    filter: blur(10px);
    transform: rotate(18deg);
    animation: cardLightSweep-b-ou9wkxxy3x 9s ease-in-out infinite;
}

.auth-card > *[b-ou9wkxxy3x] {
    position: relative;
    z-index: 1;
}

.auth-heading[b-ou9wkxxy3x] {
    text-align: center;
}

.auth-kicker[b-ou9wkxxy3x] {
    display: block;
    margin-bottom: 12px;
    color: #2c7db8;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.auth-heading h1[b-ou9wkxxy3x] {
    margin: 0;
    color: #082f5d;
    font-size: clamp(39px, 3vw, 52px);
    font-weight: 780;
    letter-spacing: 0;
    line-height: 1.07;
}

.auth-heading p[b-ou9wkxxy3x] {
    margin: 15px 0 0;
    color: #075fae;
    font-size: clamp(18px, 1.28vw, 22px);
    font-weight: 650;
}

.heading-accent[b-ou9wkxxy3x] {
    display: block;
    width: 70px;
    height: 4px;
    margin: 28px auto 38px;
    border-radius: 999px;
    background: linear-gradient(90deg, #0b79dc, #5fd1ea);
    box-shadow: 0 8px 18px rgba(10, 119, 216, .28);
}

.auth-form[b-ou9wkxxy3x] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.auth-field[b-ou9wkxxy3x] {
    display: grid;
    gap: 8px;
}

.auth-label[b-ou9wkxxy3x] {
    color: #214b70;
    font-size: 14px;
    font-weight: 760;
}

.auth-input-shell[b-ou9wkxxy3x] {
    position: relative;
    display: flex;
    min-height: 68px;
    align-items: center;
    border: 1px solid rgba(54, 128, 188, .25);
    border-radius: 18px;
    background: rgba(255, 255, 255, .72);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .94),
        0 12px 28px rgba(26, 108, 158, .055);
    transition: border-color 170ms ease, box-shadow 170ms ease, background 170ms ease, transform 170ms ease;
}

.auth-input-shell:focus-within[b-ou9wkxxy3x] {
    border-color: rgba(8, 120, 215, .66);
    background: rgba(255, 255, 255, .94);
    box-shadow:
        0 0 0 5px rgba(8, 120, 215, .1),
        0 18px 38px rgba(34, 119, 173, .12);
    transform: translateY(-1px);
}

.field-icon[b-ou9wkxxy3x] {
    display: grid;
    width: 64px;
    height: 100%;
    flex: 0 0 auto;
    place-items: center;
    color: #6295bf;
}

.field-icon svg[b-ou9wkxxy3x] {
    width: 25px;
    height: 25px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.auth-input-shell[b-ou9wkxxy3x]  .auth-input {
    width: 100%;
    min-width: 0;
    height: 66px;
    padding: 0 22px 0 0;
    border: 0;
    outline: 0;
    color: #123f6b;
    background: transparent;
    font: inherit;
    font-size: 17px;
    font-weight: 620;
}

.auth-input-shell[b-ou9wkxxy3x]  .auth-input::placeholder {
    color: #84a2bc;
    opacity: 1;
}

.auth-options[b-ou9wkxxy3x] {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.remember-row[b-ou9wkxxy3x] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #28567f;
    font-size: 15px;
    font-weight: 660;
    cursor: pointer;
}

.remember-row[b-ou9wkxxy3x]  input {
    width: 21px;
    height: 21px;
    border-radius: 6px;
    accent-color: var(--blue-600);
}

.forgot-password-link[b-ou9wkxxy3x] {
    padding: 4px 0;
    border: 0;
    color: #0a70ce;
    background: transparent;
    font: inherit;
    font-size: 15px;
    font-weight: 720;
    text-decoration: none;
}

.forgot-password-link:hover[b-ou9wkxxy3x] {
    text-decoration: underline;
}

.auth-submit[b-ou9wkxxy3x] {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 68px;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 6px;
    overflow: hidden;
    border: 1px solid rgba(2, 91, 184, .76);
    border-radius: 18px;
    color: #fff;
    background:
        linear-gradient(135deg, #34b7f2 0%, #0878d7 50%, #064ea8 100%);
    background-size: 190% 190%;
    box-shadow:
        0 21px 40px rgba(8, 105, 204, .3),
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -18px 30px rgba(2, 58, 128, .14);
    font: inherit;
    font-size: 18px;
    font-weight: 820;
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 160ms ease, background-position 340ms ease, filter 160ms ease;
}

.auth-submit[b-ou9wkxxy3x]::before {
    position: absolute;
    top: -35%;
    bottom: -35%;
    left: -38%;
    width: 28%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
    content: "";
    filter: blur(6px);
    transform: rotate(14deg);
    animation: submitSheen-b-ou9wkxxy3x 5.6s ease-in-out infinite;
}

.auth-submit:hover:not(:disabled)[b-ou9wkxxy3x] {
    transform: translateY(-2px);
    background-position: 100% 50%;
    box-shadow:
        0 27px 48px rgba(8, 105, 204, .37),
        inset 0 1px 0 rgba(255, 255, 255, .46),
        inset 0 -18px 30px rgba(2, 58, 128, .12);
    filter: saturate(1.08);
}

.auth-submit:active:not(:disabled)[b-ou9wkxxy3x] {
    transform: translateY(0) scale(.996);
}

.auth-submit:disabled[b-ou9wkxxy3x] {
    cursor: not-allowed;
    filter: grayscale(.16);
    opacity: .54;
}

.button-copy[b-ou9wkxxy3x],
.button-icon[b-ou9wkxxy3x] {
    position: relative;
    z-index: 1;
}

.button-icon[b-ou9wkxxy3x] {
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}

.button-icon svg[b-ou9wkxxy3x] {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.auth-separator[b-ou9wkxxy3x] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 16px;
    color: #7c9bb5;
}

.auth-separator span[b-ou9wkxxy3x] {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(78, 136, 184, .28), transparent);
}

.auth-separator small[b-ou9wkxxy3x] {
    font-size: 14px;
    font-weight: 640;
}

.microsoft-signin[b-ou9wkxxy3x] {
    position: relative;
    display: flex;
    width: 100%;
    min-height: 63px;
    align-items: center;
    justify-content: center;
    gap: 13px;
    border: 1px solid rgba(127, 143, 158, .3);
    border-radius: 17px;
    color: #667786;
    background: linear-gradient(180deg, rgba(247, 250, 252, .76), rgba(230, 236, 242, .72));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88), 0 12px 24px rgba(71, 92, 108, .05);
    font: inherit;
    font-size: 16px;
    font-weight: 720;
}

.microsoft-signin:disabled[b-ou9wkxxy3x] {
    cursor: not-allowed;
    opacity: .84;
}

.microsoft-mark[b-ou9wkxxy3x] {
    display: grid;
    width: 23px;
    height: 23px;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2px;
}

.microsoft-mark i:nth-child(1)[b-ou9wkxxy3x] { background: #8d99a6; }
.microsoft-mark i:nth-child(2)[b-ou9wkxxy3x] { background: #a2adba; }
.microsoft-mark i:nth-child(3)[b-ou9wkxxy3x] { background: #758393; }
.microsoft-mark i:nth-child(4)[b-ou9wkxxy3x] { background: #b5bec8; }

.server-health[b-ou9wkxxy3x] {
    display: grid;
    min-height: 66px;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    padding: 14px 17px;
    border: 1px solid rgba(61, 165, 151, .24);
    border-radius: 18px;
    color: #214b70;
    background:
        linear-gradient(135deg, rgba(226, 255, 249, .74), rgba(242, 255, 252, .44));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 14px 32px rgba(44, 147, 137, .08);
    font-size: 13px;
}

.health-dot[b-ou9wkxxy3x] {
    position: relative;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: #22c58a;
    box-shadow: 0 0 0 6px rgba(34, 197, 138, .1), 0 0 18px rgba(34, 197, 138, .32);
}

.health-dot span[b-ou9wkxxy3x] {
    position: absolute;
    inset: -7px;
    border-radius: inherit;
    border: 1px solid rgba(34, 197, 138, .42);
    animation: healthPulse-b-ou9wkxxy3x 2.6s ease-out infinite;
}

.health-copy[b-ou9wkxxy3x] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

.health-copy strong[b-ou9wkxxy3x] {
    font-weight: 820;
}

.health-copy span[b-ou9wkxxy3x] {
    color: #049b68;
    font-weight: 820;
}

.server-health small[b-ou9wkxxy3x] {
    min-width: 0;
    justify-self: end;
    overflow: hidden;
    color: #557f9f;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-health.health-offline[b-ou9wkxxy3x] {
    border-color: rgba(205, 83, 91, .25);
    background: linear-gradient(135deg, rgba(255, 236, 238, .78), rgba(255, 247, 248, .48));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 14px 32px rgba(180, 66, 76, .08);
}

.server-health.health-offline .health-dot[b-ou9wkxxy3x] {
    background: #d54e59;
    box-shadow: 0 0 0 6px rgba(213, 78, 89, .1), 0 0 18px rgba(213, 78, 89, .26);
}

.server-health.health-offline .health-dot span[b-ou9wkxxy3x] {
    border-color: rgba(213, 78, 89, .4);
}

.server-health.health-offline .health-copy span[b-ou9wkxxy3x] {
    color: #b53b46;
}

.server-health.health-checking .health-dot[b-ou9wkxxy3x] {
    background: #df9d26;
    box-shadow: 0 0 0 6px rgba(223, 157, 38, .1), 0 0 18px rgba(223, 157, 38, .24);
}

.server-health.health-checking .health-dot span[b-ou9wkxxy3x] {
    border-color: rgba(223, 157, 38, .4);
}

.server-health.health-checking .health-copy span[b-ou9wkxxy3x] {
    color: #af7410;
}

.server-health.health-maintenance[b-ou9wkxxy3x] {
    border-color: rgba(214, 143, 31, .34);
    background: linear-gradient(135deg, rgba(255, 242, 211, .84), rgba(255, 250, 239, .58));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78), 0 14px 32px rgba(178, 105, 13, .1);
}

.server-health.health-maintenance .health-dot[b-ou9wkxxy3x] {
    background: #e29a27;
    box-shadow: 0 0 0 6px rgba(226, 154, 39, .11), 0 0 20px rgba(226, 154, 39, .34);
}

.server-health.health-maintenance .health-dot span[b-ou9wkxxy3x] {
    border-color: rgba(226, 154, 39, .46);
}

.server-health.health-maintenance .health-copy span[b-ou9wkxxy3x] {
    color: #9a630e;
}

.auth-message[b-ou9wkxxy3x] {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0 0 22px;
    padding: 13px 15px;
    border-radius: 14px;
    font-size: 13px;
}

.auth-message > span[b-ou9wkxxy3x] {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #c54450;
    font-weight: 900;
}

.auth-message.error[b-ou9wkxxy3x] {
    border: 1px solid rgba(201, 73, 84, .3);
    color: #8f2833;
    background: rgba(255, 232, 235, .84);
}

.login-footer[b-ou9wkxxy3x] {
    position: fixed;
    z-index: 3;
    right: 0;
    bottom: 14px;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: rgba(18, 67, 105, .62);
    background: transparent;
    font-size: 12px;
    font-weight: 620;
    line-height: 1.35;
    text-align: center;
    pointer-events: none;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .7);
}

.login-footer-product[b-ou9wkxxy3x] {
    color: rgba(11, 55, 99, .9);
    font-size: 12.5px;
    font-weight: 750;
    letter-spacing: .2px;
}

.login-footer-version[b-ou9wkxxy3x] {
    margin-left: 2px;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(23, 105, 220, .12);
    color: rgba(15, 96, 190, .95);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    vertical-align: 1px;
}

.login-footer-legal[b-ou9wkxxy3x] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px 8px;
    font-size: 11.5px;
    font-weight: 600;
}

.login-footer-sep[b-ou9wkxxy3x] {
    color: rgba(18, 67, 105, .34);
}

.sr-only[b-ou9wkxxy3x] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

@keyframes backgroundBreath-b-ou9wkxxy3x {
    from {
        transform: scale(1.08) translate3d(-1%, -.5%, 0);
    }
    to {
        transform: scale(1.16) translate3d(1.5%, 1%, 0);
    }
}

@keyframes gridDrift-b-ou9wkxxy3x {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(52px, 52px, 0); }
}

@keyframes specimenFloatOne-b-ou9wkxxy3x {
    from {
        transform: translate3d(0, 0, 0) rotate(-9deg) scale(1);
    }
    to {
        transform: translate3d(44px, 38px, 0) rotate(5deg) scale(1.05);
    }
}

@keyframes specimenFloatTwo-b-ou9wkxxy3x {
    from {
        transform: translate3d(0, 0, 0) rotate(12deg) scale(.96);
    }
    to {
        transform: translate3d(-58px, 44px, 0) rotate(-4deg) scale(1.04);
    }
}


@keyframes depthWashOne-b-ou9wkxxy3x {
    from {
        transform: translate3d(-18px, 14px, 0) rotate(-4deg);
    }
    to {
        transform: translate3d(42px, -28px, 0) rotate(6deg);
    }
}

@keyframes depthWashTwo-b-ou9wkxxy3x {
    from {
        transform: translate3d(24px, 16px, 0) rotate(5deg);
    }
    to {
        transform: translate3d(-46px, -22px, 0) rotate(-8deg);
    }
}

@keyframes strandDriftOne-b-ou9wkxxy3x {
    from {
        transform: translate3d(0, 0, 0) rotate(-31deg);
    }
    to {
        transform: translate3d(46px, -30px, 0) rotate(-18deg);
    }
}



@keyframes heroEnter-b-ou9wkxxy3x {
    from {
        opacity: 0;
        transform: translateX(-34px) scale(.975);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes cardEnter-b-ou9wkxxy3x {
    from {
        opacity: 0;
        transform: translateX(38px) translateY(12px) scale(.975);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes markAmbientPulse-b-ou9wkxxy3x {
    from {
        opacity: .64;
        transform: scale(.96);
    }
    to {
        opacity: 1;
        transform: scale(1.07);
    }
}

@keyframes markHover-b-ou9wkxxy3x {
    from {
        transform: translate3d(-4px, 5px, 0) scale(.992);
    }
    to {
        transform: translate3d(8px, -9px, 0) scale(1.018);
    }
}


@keyframes cardLightSweep-b-ou9wkxxy3x {
    0%, 16% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(18deg);
    }
    34% {
        opacity: .8;
    }
    64%, 100% {
        opacity: 0;
        transform: translate3d(180%, 620%, 0) rotate(18deg);
    }
}

@keyframes submitSheen-b-ou9wkxxy3x {
    0%, 22% {
        transform: translateX(0) rotate(14deg);
        opacity: 0;
    }
    38% {
        opacity: .9;
    }
    58%, 100% {
        transform: translateX(610%) rotate(14deg);
        opacity: 0;
    }
}

@keyframes healthPulse-b-ou9wkxxy3x {
    from {
        opacity: .8;
        transform: scale(.72);
    }
    to {
        opacity: 0;
        transform: scale(1.55);
    }
}

@media (max-width: 1280px) {
    .login-stage[b-ou9wkxxy3x] {
        width: min(1180px, calc(100% - 42px));
        grid-template-columns: minmax(430px, 1fr) minmax(480px, 540px);
        gap: 38px;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        width: clamp(470px, 39vw, 560px);
    }

    .hero-copy[b-ou9wkxxy3x] {
        width: min(520px, 42vw);
    }

    .auth-card[b-ou9wkxxy3x] {
        padding: 44px;
    }
}

@media (max-width: 1020px) {
    .login-stage[b-ou9wkxxy3x] {
        width: min(660px, calc(100% - 32px));
        min-height: auto;
        grid-template-columns: 1fr;
        gap: 22px;
        padding-top: 26px;
    }

    .login-hero[b-ou9wkxxy3x] {
        align-items: flex-start;
    }

    .hero-brand-lockup[b-ou9wkxxy3x] {
        justify-items: center;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        width: min(500px, 76vw);
    }

    .hero-copy[b-ou9wkxxy3x] {
        width: min(520px, 82vw);
        margin-top: -18px;
        padding-left: 38px;
        font-size: clamp(18px, 3vw, 24px);
    }

    .hero-copy[b-ou9wkxxy3x]::before {
        left: 12px;
    }

    .auth-card[b-ou9wkxxy3x] {
        min-height: 0;
    }
}

@media (max-width: 620px) {
    .login-stage[b-ou9wkxxy3x] {
        width: calc(100% - 18px);
        padding: 18px 0 58px;
    }

    .specimen-plane[b-ou9wkxxy3x],
    .bacteria-strand[b-ou9wkxxy3x] {
        opacity: .1;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        width: min(390px, 86vw);
    }

    .hero-copy[b-ou9wkxxy3x] {
        width: min(410px, 88vw);
        margin-top: -12px;
        padding-left: 28px;
        font-size: 18px;
    }

    .hero-copy-kicker[b-ou9wkxxy3x] {
        font-size: 10px;
    }

    .auth-card[b-ou9wkxxy3x] {
        padding: 30px 20px;
        border-radius: 24px;
    }

    .auth-heading h1[b-ou9wkxxy3x] {
        font-size: 31px;
    }

    .auth-heading p[b-ou9wkxxy3x] {
        font-size: 15px;
    }

    .heading-accent[b-ou9wkxxy3x] {
        margin: 22px auto 28px;
    }

    .auth-input-shell[b-ou9wkxxy3x] {
        min-height: 62px;
    }

    .auth-input-shell[b-ou9wkxxy3x]  .auth-input {
        height: 60px;
        font-size: 16px;
    }

    .field-icon[b-ou9wkxxy3x] {
        width: 56px;
    }

    .auth-options[b-ou9wkxxy3x] {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
    }

    .server-health[b-ou9wkxxy3x] {
        grid-template-columns: auto 1fr;
    }

    .server-health small[b-ou9wkxxy3x] {
        grid-column: 1 / -1;
        justify-self: start;
        padding-left: 30px;
        white-space: normal;
    }

    .health-copy[b-ou9wkxxy3x] {
        flex-wrap: wrap;
        gap: 6px 10px;
        white-space: normal;
    }

    .login-footer[b-ou9wkxxy3x] {
        bottom: 8px;
        font-size: 10px;
    }
}

@media (max-height: 760px) and (min-width: 1021px) {
    .login-stage[b-ou9wkxxy3x] {
        padding-top: 24px;
        padding-bottom: 54px;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        width: clamp(460px, 34vw, 610px);
    }

    .auth-card[b-ou9wkxxy3x] {
        min-height: 0;
        padding: 38px 44px;
    }

    .auth-input-shell[b-ou9wkxxy3x],
    .auth-submit[b-ou9wkxxy3x],
    .microsoft-signin[b-ou9wkxxy3x] {
        min-height: 58px;
    }

    .auth-input-shell[b-ou9wkxxy3x]  .auth-input {
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after {
        scroll-behavior: auto !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}


/* Mobile scroll-safe login patch
   Desktop keeps the full animated login page.
   Mobile/tablet uses a static but scrollable login screen.
   This avoids flicker when the keyboard opens and keeps normal finger scrolling enabled.
*/
.brand-mobile-static-mark[b-ou9wkxxy3x] {
    display: none;
}

@media (max-width: 768px), (pointer: coarse) {
    .login-experience[b-ou9wkxxy3x] {
        position: fixed !important;
        inset: 0 !important;
        z-index: 20 !important;
        height: auto !important;
        min-height: 0 !important;
        overflow-x: hidden !important;
        overflow-y: scroll !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: auto !important;
        color: var(--ink-950);
        background:
            radial-gradient(ellipse at 18% 10%, rgba(255, 255, 255, .98) 0 20%, transparent 48%),
            radial-gradient(ellipse at 82% 22%, rgba(92, 188, 234, .18) 0 13%, transparent 42%),
            radial-gradient(ellipse at 80% 86%, rgba(33, 154, 216, .11) 0 16%, transparent 46%),
            linear-gradient(132deg, #fbfeff 0%, #eef9ff 44%, #dff3fb 100%) !important;
        -webkit-user-select: auto !important;
        user-select: auto !important;
        transform: none !important;
        will-change: auto !important;
    }

    .login-experience[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after,
    .login-experience[b-ou9wkxxy3x]::before,
    .login-experience[b-ou9wkxxy3x]::after {
        animation: none !important;
        transform-style: flat !important;
        scroll-behavior: auto !important;
    }

    .login-experience[b-ou9wkxxy3x]::before,
    .login-experience[b-ou9wkxxy3x]::after,
    .login-atmosphere[b-ou9wkxxy3x],
    .specimen-plane[b-ou9wkxxy3x],
    .depth-wash[b-ou9wkxxy3x],
    .bacteria-strand[b-ou9wkxxy3x] {
        display: none !important;
        content: none !important;
    }

    .login-stage[b-ou9wkxxy3x] {
        position: relative !important;
        z-index: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 480px) !important;
        min-height: auto !important;
        height: auto !important;
        grid-template-columns: none !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 14px !important;
        margin: 0 auto !important;
        padding: 18px 14px max(34px, env(safe-area-inset-bottom)) !important;
        transform: none !important;
    }

    .login-hero[b-ou9wkxxy3x] {
        display: flex !important;
        min-height: auto !important;
        align-items: center !important;
        justify-content: center !important;
        animation: none !important;
        transform: none !important;
    }

    .hero-brand-lockup[b-ou9wkxxy3x] {
        display: grid !important;
        width: 100% !important;
        justify-items: center !important;
    }

    .hero-copy[b-ou9wkxxy3x] {
        display: none !important;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        position: relative !important;
        width: min(216px, 52vw) !important;
        aspect-ratio: 629 / 600 !important;
        margin: 0 auto !important;
        filter:
            drop-shadow(0 16px 24px rgba(5, 67, 108, .16))
            drop-shadow(0 1px 1px rgba(255, 255, 255, .62)) !important;
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
        isolation: auto !important;
    }.brand-mark-svg[b-ou9wkxxy3x],
.brand-mark-ambient[b-ou9wkxxy3x],
.brand-bio-motion-main[b-ou9wkxxy3x],
.brand-bio-layer[b-ou9wkxxy3x],
.brand-mark-svg animate[b-ou9wkxxy3x],
.brand-mark-svg animateTransform[b-ou9wkxxy3x] {
        display: none !important;
    }

    .brand-mobile-static-mark[b-ou9wkxxy3x] {
        position: relative !important;
        inset: auto !important;
        display: block !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 629 / 600 !important;
        object-fit: contain !important;
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        will-change: auto !important;
        backface-visibility: visible !important;
        -webkit-user-drag: none !important;
        user-select: none !important;
        pointer-events: none !important;
    }

    .auth-card[b-ou9wkxxy3x] {
        position: relative !important;
        width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        padding: 24px 18px 20px !important;
        overflow: visible !important;
        border-radius: 24px !important;
        background:
            linear-gradient(145deg, rgba(255, 255, 255, .96), rgba(239, 249, 255, .9)),
            linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, .16)) !important;
        box-shadow:
            0 20px 44px rgba(5, 64, 108, .16),
            0 7px 18px rgba(20, 126, 196, .09),
            inset 0 1px 0 rgba(255, 255, 255, .96) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .auth-card[b-ou9wkxxy3x]::before {
        background:
            linear-gradient(118deg, rgba(255, 255, 255, .34), transparent 42% 100%) !important;
    }

    .auth-card[b-ou9wkxxy3x]::after,
    .auth-card-light[b-ou9wkxxy3x],
    .auth-submit[b-ou9wkxxy3x]::before,
    .health-dot span[b-ou9wkxxy3x] {
        display: none !important;
        content: none !important;
    }

    .auth-heading h1[b-ou9wkxxy3x] {
        font-size: clamp(28px, 8vw, 34px) !important;
        line-height: 1.05 !important;
    }

    .auth-heading p[b-ou9wkxxy3x] {
        margin-top: 8px !important;
        font-size: 16px !important;
    }

    .auth-kicker[b-ou9wkxxy3x] {
        margin-bottom: 8px !important;
        font-size: 11px !important;
    }

    .heading-accent[b-ou9wkxxy3x] {
        margin: 18px auto 22px !important;
    }

    .auth-form[b-ou9wkxxy3x] {
        gap: 14px !important;
    }

    .auth-field[b-ou9wkxxy3x] {
        gap: 7px !important;
    }

    .auth-label[b-ou9wkxxy3x] {
        font-size: 13px !important;
    }

    .auth-input-shell[b-ou9wkxxy3x] {
        min-height: 56px !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, .92) !important;
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, .94),
            0 8px 18px rgba(26, 108, 158, .045) !important;
        transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease !important;
        transform: none !important;
        will-change: auto !important;
    }

    .auth-input-shell:focus-within[b-ou9wkxxy3x] {
        border-color: rgba(8, 120, 215, .7) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow:
            0 0 0 3px rgba(8, 120, 215, .1),
            inset 0 1px 0 rgba(255, 255, 255, .94) !important;
        transform: none !important;
    }

    .field-icon[b-ou9wkxxy3x] {
        width: 48px !important;
    }

    .field-icon svg[b-ou9wkxxy3x] {
        width: 22px !important;
        height: 22px !important;
    }

    .auth-input-shell[b-ou9wkxxy3x]  .auth-input {
        height: 54px !important;
        padding: 0 14px 0 0 !important;
        font-size: 16px !important;
        line-height: 1.2 !important;
        font-weight: 620 !important;
        transform: none !important;
        -webkit-text-size-adjust: 100% !important;
    }

    .auth-options[b-ou9wkxxy3x] {
        gap: 12px !important;
        align-items: flex-start !important;
    }

    .remember-row[b-ou9wkxxy3x],
    .forgot-password-link[b-ou9wkxxy3x] {
        font-size: 14px !important;
    }

    .auth-submit[b-ou9wkxxy3x],
    .microsoft-signin[b-ou9wkxxy3x] {
        min-height: 56px !important;
        border-radius: 16px !important;
        font-size: 16px !important;
        transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease, filter 120ms ease !important;
        transform: none !important;
        will-change: auto !important;
    }

    .auth-submit:hover:not(:disabled)[b-ou9wkxxy3x],
    .auth-submit:active:not(:disabled)[b-ou9wkxxy3x],
    .microsoft-signin:hover:not(:disabled)[b-ou9wkxxy3x],
    .microsoft-signin:active:not(:disabled)[b-ou9wkxxy3x] {
        transform: none !important;
    }

    .auth-separator[b-ou9wkxxy3x] {
        margin: 0 !important;
    }

    .server-health[b-ou9wkxxy3x] {
        margin-top: 16px !important;
    }
}

/* Browser autofill color fix
   Chrome and Edge add their own blue/grey background when saved email/password is filled.
   This keeps Email and Password fields visually consistent with the login design.
*/
.login-experience[b-ou9wkxxy3x]  input:-webkit-autofill,
.login-experience[b-ou9wkxxy3x]  input:-webkit-autofill:hover,
.login-experience[b-ou9wkxxy3x]  input:-webkit-autofill:focus,
.login-experience[b-ou9wkxxy3x]  input:-webkit-autofill:active,
.login-experience input:-webkit-autofill[b-ou9wkxxy3x],
.login-experience input:-webkit-autofill:hover[b-ou9wkxxy3x],
.login-experience input:-webkit-autofill:focus[b-ou9wkxxy3x],
.login-experience input:-webkit-autofill:active[b-ou9wkxxy3x] {
    -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .94) inset !important;
    box-shadow: 0 0 0 1000px rgba(255, 255, 255, .94) inset !important;
    -webkit-text-fill-color: #123f6b !important;
    caret-color: #123f6b !important;
    background-color: rgba(255, 255, 255, .94) !important;
    background-image: none !important;
    border: 0 !important;
    transition: background-color 9999s ease-out 0s !important;
}

.auth-input-shell:has(input:-webkit-autofill)[b-ou9wkxxy3x] {
    background: rgba(255, 255, 255, .96) !important;
}

.auth-input-shell:has(input:-webkit-autofill):focus-within[b-ou9wkxxy3x] {
    background: rgba(255, 255, 255, .98) !important;
}

@media (max-width: 768px), (pointer: coarse) {
    .login-experience[b-ou9wkxxy3x]  input:-webkit-autofill,
    .login-experience[b-ou9wkxxy3x]  input:-webkit-autofill:hover,
    .login-experience[b-ou9wkxxy3x]  input:-webkit-autofill:focus,
    .login-experience[b-ou9wkxxy3x]  input:-webkit-autofill:active,
    .login-experience input:-webkit-autofill[b-ou9wkxxy3x],
    .login-experience input:-webkit-autofill:hover[b-ou9wkxxy3x],
    .login-experience input:-webkit-autofill:focus[b-ou9wkxxy3x],
    .login-experience input:-webkit-autofill:active[b-ou9wkxxy3x] {
        -webkit-box-shadow: 0 0 0 1000px rgba(255, 255, 255, .96) inset !important;
        box-shadow: 0 0 0 1000px rgba(255, 255, 255, .96) inset !important;
        -webkit-text-fill-color: #123f6b !important;
        caret-color: #123f6b !important;
        background-color: rgba(255, 255, 255, .96) !important;
        background-image: none !important;
    }

    .auth-input-shell:has(input:-webkit-autofill)[b-ou9wkxxy3x] {
        background: rgba(255, 255, 255, .96) !important;
    }
}


/* =====================================================================
   LIVELINESS ENHANCEMENTS
   Extra ambient motion for the login screen: an aurora colour wash and
   drifting glow-motes across the whole background, plus a pulsing
   "living cells" glow and gentle breathing inside the cross mark.
   Everything animated here lives inside .login-atmosphere or is guarded
   below, so the static mobile screen and prefers-reduced-motion users
   are unaffected.
   ===================================================================== */

/* ---- Aurora colour wash drifting behind everything ---- */
.aurora-veil[b-ou9wkxxy3x] {
    position: absolute;
    inset: -22%;
    display: block;
    pointer-events: none;
    background:
        radial-gradient(38% 44% at 30% 34%, rgba(84, 206, 240, .22), transparent 70%),
        radial-gradient(42% 40% at 72% 62%, rgba(37, 140, 214, .18), transparent 72%),
        radial-gradient(30% 34% at 58% 20%, rgba(150, 235, 247, .16), transparent 74%);
    filter: blur(34px) saturate(1.05);
    opacity: .7;
    mix-blend-mode: screen;
    will-change: transform, filter;
    animation:
        auroraDrift-b-ou9wkxxy3x 60s ease-in-out infinite alternate,
        auroraHue-b-ou9wkxxy3x 34s ease-in-out infinite alternate;
}

@keyframes auroraDrift-b-ou9wkxxy3x {
    from { transform: translate3d(-3%, -2%, 0) rotate(-6deg) scale(1.05); }
    to   { transform: translate3d(4%, 3%, 0) rotate(8deg) scale(1.2); }
}

@keyframes auroraHue-b-ou9wkxxy3x {
    from { opacity: .5; }
    to   { opacity: .72; }
}

/* ---- Drifting glow-motes (little rising cells of light) ---- */
.micro-mote[b-ou9wkxxy3x] {
    position: absolute;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 38%,
        rgba(255, 255, 255, .96),
        rgba(140, 224, 246, .62) 42%,
        rgba(37, 140, 214, 0) 74%);
    box-shadow: 0 0 15px 4px rgba(120, 215, 244, .34);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
}

@keyframes moteRise-b-ou9wkxxy3x {
    0%   { opacity: 0; transform: translate3d(0, 24px, 0) scale(.55); }
    12%  { opacity: .95; }
    50%  { transform: translate3d(16px, -66px, 0) scale(1); }
    86%  { opacity: .7; }
    100% { opacity: 0; transform: translate3d(-10px, -150px, 0) scale(.65); }
}

@keyframes moteSway-b-ou9wkxxy3x {
    0%   { opacity: 0; transform: translate3d(0, 20px, 0) scale(.6); }
    16%  { opacity: .85; }
    50%  { transform: translate3d(-22px, -58px, 0) scale(1.05); }
    84%  { opacity: .6; }
    100% { opacity: 0; transform: translate3d(14px, -132px, 0) scale(.7); }
}

.mote-1[b-ou9wkxxy3x] { left: 16%;  top: 78%; animation: moteRise-b-ou9wkxxy3x 15s ease-in-out .0s infinite; }
.mote-2[b-ou9wkxxy3x] { left: 30%;  top: 88%; width: 8px;  animation: moteSway-b-ou9wkxxy3x 19s ease-in-out 2.4s infinite; }
.mote-3[b-ou9wkxxy3x] { left: 44%;  top: 72%; width: 13px; animation: moteRise-b-ou9wkxxy3x 22s ease-in-out 1.2s infinite; }
.mote-4[b-ou9wkxxy3x] { left: 58%;  top: 90%; width: 7px;  animation: moteSway-b-ou9wkxxy3x 17s ease-in-out 5.1s infinite; }
.mote-5[b-ou9wkxxy3x] { left: 9%;   top: 60%; width: 9px;  animation: moteRise-b-ou9wkxxy3x 26s ease-in-out 3.6s infinite; }
.mote-6[b-ou9wkxxy3x] { left: 68%;  top: 66%; width: 12px; animation: moteSway-b-ou9wkxxy3x 21s ease-in-out 6.8s infinite; }

/* ---- Pulsing "living cells" glow inside the cross ---- */
.brand-mark-pulse[b-ou9wkxxy3x] {
    position: absolute;
    inset: 8% 6% 9%;
    border-radius: 40% 60% 55% 45% / 45% 42% 58% 55%;
    background:
        radial-gradient(28% 26% at 38% 40%, rgba(180, 240, 252, .5), transparent 62%),
        radial-gradient(24% 22% at 66% 60%, rgba(90, 200, 235, .42), transparent 66%),
        radial-gradient(20% 20% at 54% 28%, rgba(255, 255, 255, .4), transparent 60%);
    mix-blend-mode: screen;
    opacity: .2;
    pointer-events: none;
    will-change: transform, opacity;
    animation: bioPulse-b-ou9wkxxy3x 6.5s ease-in-out infinite;
}

@keyframes bioPulse-b-ou9wkxxy3x {
    0%, 100% { opacity: .16; transform: scale(.98) rotate(-1deg); }
    50%      { opacity: .5;  transform: scale(1.04) rotate(1.5deg); }
}

/* ---- Cells breathe + gently shift hue so the mark feels alive ---- */
.brand-bio-layer-main[b-ou9wkxxy3x] {
    transform-box: fill-box;
    transform-origin: center;
    animation:
        cellBreath-b-ou9wkxxy3x 11s ease-in-out infinite alternate,
        cellHue-b-ou9wkxxy3x 15s ease-in-out infinite alternate;
}

@keyframes cellBreath-b-ou9wkxxy3x {
    from { transform: scale(1); }
    to   { transform: scale(1.055); }
}

@keyframes cellHue-b-ou9wkxxy3x {
    from { opacity: .94; }
    to   { opacity: 1; }
}


/* ---- Core drifts as before, now with a subtle breath ---- */
.brand-mark-core[b-ou9wkxxy3x] {
    animation:
        markHover-b-ou9wkxxy3x 13s ease-in-out infinite alternate,
        corePulse-b-ou9wkxxy3x 18s ease-in-out infinite alternate;
}

@keyframes corePulse-b-ou9wkxxy3x {
    from { transform: scale(1); }
    to   { transform: scale(1.012); }
}

/* ---- Ambient halo gains a slow colour drift ---- */
.brand-mark-ambient[b-ou9wkxxy3x] {
    animation:
        markAmbientPulse-b-ou9wkxxy3x 8s ease-in-out infinite alternate,
        ambientHue-b-ou9wkxxy3x 19s ease-in-out infinite alternate;
}

@keyframes ambientHue-b-ou9wkxxy3x {
    from { opacity: .82; }
    to   { opacity: 1; }
}

/* ---- Keep the static mobile screen and reduced-motion users clean ---- */
@media (max-width: 768px), (pointer: coarse) {
    .aurora-veil[b-ou9wkxxy3x],
    .micro-mote[b-ou9wkxxy3x],
    .brand-mark-pulse[b-ou9wkxxy3x] {
        display: none !important;
    }
}


/* =====================================================================
   V2 SIGNATURE ENHANCEMENTS  (appended - wins the cascade)
   Company wordmark, microscope rack-focus zoom on the specimen,
   pointer-driven 3D parallax, and sonar ripple rings radiating from
   the mark. All guarded so mobile + reduced-motion stay clean.
   ===================================================================== */

/* ---- Company wordmark in the hero ---- */
.hero-wordmark[b-ou9wkxxy3x] {
    display: block;
    width: clamp(228px, 21vw, 336px);
    height: auto;
    margin-bottom: 18px;
    filter: drop-shadow(0 6px 15px rgba(7, 64, 104, .15));
    animation: wordmarkEnter-b-ou9wkxxy3x 900ms 240ms cubic-bezier(.22, 1, .36, 1) both;
    -webkit-user-drag: none;
    user-select: none;
}

@keyframes wordmarkEnter-b-ou9wkxxy3x {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}

/* ---- Microscope rack-focus zoom on the living cell field ----
   The specimen slowly pushes in and pulls back (zbliżenie / oddalenie)
   with a gentle blur peak mid-cycle, like a lens racking into focus. */
.brand-bio-layer-main[b-ou9wkxxy3x] {
    animation:
        microscopeZoom-b-ou9wkxxy3x 19s ease-in-out infinite alternate,
        bioFocus-b-ou9wkxxy3x 12.5s ease-in-out infinite alternate;
}

@keyframes microscopeZoom-b-ou9wkxxy3x {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.16); }
    100% { transform: scale(1.03); }
}

@keyframes bioFocus-b-ou9wkxxy3x {
    from { opacity: .93; }
    to   { opacity: 1; }
}/* Depth copy counter-zooms for a layered {
    animation: microscopeZoomAlt 23s ease-in-out infinite alternate;
}

@keyframes microscopeZoomAlt {
    0%   { transform: scale(1.14); }
    50%  { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* ---- Pointer-driven 3D parallax on the whole mark ----
   login-parallax.js feeds --pointer-x/y and --tilt-x/y; CSS eases it. */
.brand-mark-shell[b-ou9wkxxy3x] {
    perspective: 1500px;
    transform-style: preserve-3d;
    transform:
        translate3d(var(--pointer-x, 0px), var(--pointer-y, 0px), 0)
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg));
    transition: transform 380ms cubic-bezier(.22, 1, .36, 1);
}

/* ---- Sonar ripple rings echoing the specimen outline ---- */
.mark-sonar[b-ou9wkxxy3x] {
    position: absolute;
    top: 48%;
    left: 50%;
    width: 48%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(90, 200, 235, .5);
    border-radius: 44% 56% 54% 46% / 47% 40% 60% 53%;
    box-shadow: 0 0 22px rgba(120, 215, 244, .28);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(.4);
    will-change: transform, opacity;
}

.mark-sonar-1[b-ou9wkxxy3x] { animation: markSonar-b-ou9wkxxy3x 7.2s ease-out infinite; }

@keyframes markSonar-b-ou9wkxxy3x {
    0%   { opacity: 0;   transform: translate(-50%, -50%) scale(.42); }
    14%  { opacity: .5; }
    70%  { opacity: 0; }
    100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.55); }
}

/* ---- Keep mobile + reduced-motion clean ---- */
@media (max-width: 768px), (pointer: coarse) {
    .mark-sonar[b-ou9wkxxy3x] {
        display: none !important;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        perspective: none !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .brand-mark-shell[b-ou9wkxxy3x] {
        transform: none !important;
    }
}


/* =====================================================================
   V3 REFINEMENTS  (appended - wins the cascade)
   - Smaller company wordmark
   - Remove the sweeping light passing through the specimen
   - Slower, calmer specimen motion
   - New: glowing living "membrane", gentle cell swirl
   - New background life: large drifting cells rising through the scene
   All guarded for mobile + reduced-motion.
   ===================================================================== */

/* ---- Smaller wordmark ---- */
.hero-wordmark[b-ou9wkxxy3x] {
    width: clamp(150px, 13.5vw, 214px);
    margin-bottom: 16px;
}

/* ---- Slower, calmer specimen drift ---- */
.brand-mark-core[b-ou9wkxxy3x] {
    animation:
        markHover-b-ou9wkxxy3x 20s ease-in-out infinite alternate,
        corePulse-b-ou9wkxxy3x 28s ease-in-out infinite alternate;
}

/* ---- Slower rack-focus zoom + a gentle living swirl ---- */
.brand-bio-layer-main[b-ou9wkxxy3x] {
    animation:
        microscopeZoom-b-ou9wkxxy3x 26s ease-in-out infinite alternate,
        bioFocus-b-ou9wkxxy3x 17s ease-in-out infinite alternate;
}

@keyframes microscopeZoom-b-ou9wkxxy3x {
    0%   { transform: rotate(-1.2deg) scale(1); }
    50%  { transform: rotate(0.7deg)  scale(1.15); }
    100% { transform: rotate(-0.4deg) scale(1.04); }
}

@keyframes microscopeZoomAlt-b-ou9wkxxy3x {
    0%   { transform: rotate(0.8deg)  scale(1.13); }
    50%  { transform: rotate(-0.6deg) scale(1); }
    100% { transform: rotate(0.4deg)  scale(1.09); }
}

/* ---- Glowing living membrane around the mark ---- */
.brand-mark-rim[b-ou9wkxxy3x] {
    animation: rimGlow-b-ou9wkxxy3x 9s ease-in-out infinite alternate;
}

@keyframes rimGlow-b-ou9wkxxy3x {
    from { opacity: .42; }
    to   { opacity: .78; }
}

/* ---- Large drifting cells rising through the background ---- */
.drift-orb[b-ou9wkxxy3x] {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%,
        rgba(255, 255, 255, .5),
        rgba(140, 224, 246, .28) 46%,
        rgba(37, 140, 214, 0) 72%);
    filter: blur(6px);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
}

.drift-orb-1[b-ou9wkxxy3x] { left: 12%; bottom: -12%; width: 118px; height: 118px; animation: orbFloat-b-ou9wkxxy3x    34s ease-in-out infinite; }
.drift-orb-2[b-ou9wkxxy3x] { left: 68%; bottom: -16%; width: 178px; height: 178px; animation: orbFloat-b-ou9wkxxy3x    46s ease-in-out infinite 6s; }

@keyframes orbFloat-b-ou9wkxxy3x {
    0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.8); }
    12%  { opacity: .5; }
    50%  { transform: translate3d(40px, -60vh, 0) scale(1.1); }
    85%  { opacity: .3; }
    100% { opacity: 0;   transform: translate3d(-30px, -108vh, 0) scale(.9); }
}

@keyframes orbFloatAlt-b-ou9wkxxy3x {
    0%   { opacity: 0;   transform: translate3d(0, 0, 0) scale(.75); }
    14%  { opacity: .42; }
    50%  { transform: translate3d(-52px, -64vh, 0) scale(1.12); }
    82%  { opacity: .26; }
    100% { opacity: 0;   transform: translate3d(36px, -112vh, 0) scale(.85); }
}

/* ---- Keep mobile + reduced-motion clean ---- */
@media (max-width: 768px), (pointer: coarse) {
    .drift-orb[b-ou9wkxxy3x] {
        display: none !important;
    }
}


/* =====================================================================
   V4 PREMIUM POLISH  (appended - wins the cascade)
   - Slightly smaller, balanced hero mark
   - Wordmark tucked closer to the mark (one hero unit)
   - Staggered content entrance: title -> subtitle -> form -> status
   - Smooth input hover + gentle card border highlight
   Pure presentation. No markup, auth, routing or validation changes.
   ===================================================================== */

/* ---- 1. Smaller, balanced medical plus (~12% down across breakpoints) ---- */
.brand-mark-shell[b-ou9wkxxy3x] {
    width: clamp(482px, 33vw, 636px);
}

@media (max-width: 1280px) {
    .brand-mark-shell[b-ou9wkxxy3x] {
        width: clamp(410px, 34vw, 494px);
    }
}

@media (max-width: 1020px) {
    .brand-mark-shell[b-ou9wkxxy3x] {
        width: min(444px, 68vw);
    }
}

@media (max-width: 620px) {
    .brand-mark-shell[b-ou9wkxxy3x] {
        width: min(344px, 76vw);
    }
}

@media (max-height: 760px) and (min-width: 1021px) {
    .brand-mark-shell[b-ou9wkxxy3x] {
        width: clamp(404px, 30vw, 538px);
    }
}

/* ---- 2. Integrate the wordmark with the mark (sits higher, part of hero) ---- */
.hero-copy[b-ou9wkxxy3x] {
    margin-top: clamp(-56px, -3.2vw, -30px);
}

.hero-wordmark[b-ou9wkxxy3x] {
    margin-bottom: 14px;
}

/* ---- 6. Smooth input hover (before focus) ---- */
.auth-input-shell:hover:not(:focus-within)[b-ou9wkxxy3x] {
    border-color: rgba(54, 128, 188, .4);
    background: rgba(255, 255, 255, .82);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .94),
        0 14px 30px rgba(26, 108, 158, .08);
}

/* ---- 5. Gentle animated border highlight on the glass card ---- */
.auth-card[b-ou9wkxxy3x] {
    animation:
        cardEnter-b-ou9wkxxy3x 680ms 90ms cubic-bezier(.22, 1, .36, 1) both,
        cardBorderGlow-b-ou9wkxxy3x 7.5s ease-in-out 1000ms infinite alternate;
}

@keyframes cardBorderGlow-b-ou9wkxxy3x {
    from { opacity: .55; }
    to   { opacity: 1; }
}

/* ---- 9. Staggered content entrance inside the card ---- */
.auth-heading h1[b-ou9wkxxy3x] {
    animation: authRise-b-ou9wkxxy3x 620ms 320ms cubic-bezier(.22, 1, .36, 1) both;
}

.auth-heading p[b-ou9wkxxy3x] {
    animation: authRise-b-ou9wkxxy3x 620ms 450ms cubic-bezier(.22, 1, .36, 1) both;
}

.heading-accent[b-ou9wkxxy3x] {
    animation: authRise-b-ou9wkxxy3x 620ms 560ms cubic-bezier(.22, 1, .36, 1) both;
}

.auth-form[b-ou9wkxxy3x] {
    animation: authRise-b-ou9wkxxy3x 660ms 620ms cubic-bezier(.22, 1, .36, 1) both;
}

.server-health[b-ou9wkxxy3x] {
    animation: authRise-b-ou9wkxxy3x 680ms 780ms cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes authRise-b-ou9wkxxy3x {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
}


/* =====================================================================
   V5 REQUESTED TWEAKS  (appended - wins the cascade)
   - Mark no longer follows the pointer (static, only breathes)
   - Company wordmark relocated to a fixed top-left app-header lockup
   - Sharper specimen: less blur, a touch more contrast
   - Richer background life: twinkling sparks, more drifting cells,
     ambient light blooms
   All guarded for mobile + reduced-motion.
   ===================================================================== */

/* ---- Mark stays put: kill pointer parallax, keep the breathing ---- */
.brand-mark-shell[b-ou9wkxxy3x] {
    perspective: none !important;
    transform: none !important;
    transition: none !important;
}

/* ---- Company wordmark moved to a fixed top-left brand lockup ---- */
.brand-corner-wordmark[b-ou9wkxxy3x] {
    position: fixed;
    z-index: 4;
    top: clamp(20px, 3vh, 34px);
    left: clamp(24px, 3.4vw, 58px);
    width: clamp(132px, 12vw, 178px);
    height: auto;
    opacity: 0;
    filter: drop-shadow(0 4px 11px rgba(7, 64, 104, .15));
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    animation: wordmarkEnter-b-ou9wkxxy3x 900ms 220ms cubic-bezier(.22, 1, .36, 1) both;
}

/* hero tagline sits nicely under the mark now the wordmark has moved out */
.hero-copy[b-ou9wkxxy3x] {
    margin-top: clamp(-20px, -1vw, -8px);
}/* ---- Sharper specimen: trim the blur {
    filter: blur(1.5px) saturate(1.24) contrast(1.08) !important;
}

@keyframes bioFocus {
    from { opacity: .93; }
    to   { opacity: 1; }
}

/* ---- Ambient light blooms (soft, slow-pulsing glow pools) ---- */
.light-bloom[b-ou9wkxxy3x] {
    position: absolute;
    width: 46vw;
    height: 46vw;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 205, 244, .16), transparent 68%);
    filter: blur(14px);
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
}

.light-bloom-1[b-ou9wkxxy3x] { left: -10vw; top: 6vw;    animation: bloomPulse-b-ou9wkxxy3x 17s ease-in-out infinite alternate; }

@keyframes bloomPulse-b-ou9wkxxy3x {
    from { opacity: .5;  transform: translate3d(0, 0, 0) scale(1); }
    to   { opacity: .85; transform: translate3d(4%, -3%, 0) scale(1.18); }
}

/* ---- Two more drifting cells for a fuller scene ---- */

/* ---- Twinkling light sparks scattered across the scene ---- */
.spark[b-ou9wkxxy3x] {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .96), rgba(150, 225, 246, .5) 55%, transparent 76%);
    box-shadow: 0 0 8px 2px rgba(150, 225, 246, .5);
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: opacity, transform;
}

@keyframes twinkle-b-ou9wkxxy3x {
    0%, 100% { opacity: 0;   transform: scale(.5); }
    50%      { opacity: .95; transform: scale(1); }
}

.spark-1[b-ou9wkxxy3x]  { left: 22%; top: 28%; animation: twinkle-b-ou9wkxxy3x 4.6s ease-in-out 0s    infinite; }
.spark-2[b-ou9wkxxy3x]  { left: 78%; top: 34%; animation: twinkle-b-ou9wkxxy3x 5.4s ease-in-out 1.1s  infinite; }
.spark-3[b-ou9wkxxy3x]  { left: 63%; top: 22%; width: 3px; height: 3px; animation: twinkle-b-ou9wkxxy3x 6.2s ease-in-out 2.3s infinite; }
.spark-4[b-ou9wkxxy3x]  { left: 41%; top: 18%; animation: twinkle-b-ou9wkxxy3x 5s   ease-in-out 3.4s  infinite; }
.spark-5[b-ou9wkxxy3x]  { left: 88%; top: 52%; width: 5px; height: 5px; animation: twinkle-b-ou9wkxxy3x 5.8s ease-in-out .7s  infinite; }

/* ---- Keep mobile + reduced-motion clean ---- */
@media (max-width: 768px), (pointer: coarse) {
    .brand-corner-wordmark[b-ou9wkxxy3x],
    .light-bloom[b-ou9wkxxy3x],
    .spark[b-ou9wkxxy3x] {
        display: none !important;
    }
}


/* =====================================================================
   V6 BRANDING + SPACING  (appended - wins the cascade)
   - Footer now reads: [PDI logo] | Operations Portal v1.0
     (logo fitted to the text, same font size as before)
   - Tagline dropped a little lower, away from the mark
   - Login card heading a touch smaller
   ===================================================================== */

/* ---- Footer brand lockup: logo | Operations Portal ---- */
.login-footer-product[b-ou9wkxxy3x] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
}

.footer-mark[b-ou9wkxxy3x] {
    display: block;
    width: auto;
    height: 1.7em;          /* fitted to the text height */
    -webkit-user-drag: none;
    user-select: none;
}

.footer-mark-sep[b-ou9wkxxy3x] {
    display: block;
    width: 1px;
    height: 1.15em;
    background: rgba(18, 67, 105, .34);
    border-radius: 1px;
}

.footer-product-name[b-ou9wkxxy3x] {
    color: rgba(11, 55, 99, .9);
    font-size: 12.5px;      /* unchanged - same size as before */
    font-weight: 750;
    letter-spacing: .2px;
}

/* ---- Tagline sits a little lower, not so close to the mark ---- */
.hero-copy[b-ou9wkxxy3x] {
    margin-top: clamp(6px, 1.6vw, 26px);
}

/* ---- Login card heading slightly smaller ---- */
.auth-heading h1[b-ou9wkxxy3x] {
    font-size: clamp(32px, 2.4vw, 42px);
}


/* =====================================================================
   V7 HEADER LOCKUP + BACKGROUND CLARITY  (appended - wins the cascade)
   - Card heading becomes [PDI logo] | Operations Portal
   - Shield icon beside "Secure operations access"
   - Footer nudged up a touch
   - Background sharpened (less blur) with gently drifting microbes
   ===================================================================== */

/* ---- Kicker with shield icon ---- */
.auth-kicker[b-ou9wkxxy3x] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.kicker-shield[b-ou9wkxxy3x] {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---- Card heading lockup: logo | Operations Portal ---- */
.auth-title-lockup[b-ou9wkxxy3x] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.title-mark[b-ou9wkxxy3x] {
    display: block;
    width: auto;
    height: .96em;              /* fitted to the heading text */
    transform: translateY(-.03em);
    -webkit-user-drag: none;
    user-select: none;
}

.title-sep[b-ou9wkxxy3x] {
    display: block;
    width: 2px;
    height: .82em;
    background: rgba(11, 55, 99, .22);
    border-radius: 2px;
}

.title-text[b-ou9wkxxy3x] {
    white-space: nowrap;
}

/* ---- Footer a little higher ---- */
.login-footer[b-ou9wkxxy3x] {
    bottom: 24px;
}

/* ---- Background: less blur, a touch clearer ---- */
.login-experience[b-ou9wkxxy3x]::before {
    opacity: .15;
    filter: blur(9px) saturate(.9);
}

/* ---- Gently drifting microbes: sharper + subtly alive ---- */
.specimen-plane[b-ou9wkxxy3x] {
    filter: blur(7px) saturate(1);
}

.specimen-plane-one[b-ou9wkxxy3x] {
    opacity: .24;
    animation: specimenFloatOne-b-ou9wkxxy3x 30s ease-in-out infinite alternate,
               specimenBreath-b-ou9wkxxy3x 18s ease-in-out infinite alternate;
}

.specimen-plane-two[b-ou9wkxxy3x] {
    opacity: .22;
    animation: specimenFloatTwo-b-ou9wkxxy3x 34s ease-in-out infinite alternate,
               specimenBreath-b-ou9wkxxy3x 22s ease-in-out infinite alternate 3s;
}


@keyframes specimenBreath-b-ou9wkxxy3x {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: .86; transform: scale(1.03); }
}

/* ---- Keep mobile behaviour intact ---- */
@media (max-width: 768px), (pointer: coarse) {
    .login-footer[b-ou9wkxxy3x] {
        bottom: 8px;
    }
}


/* =====================================================================
   V8 FINE-TUNE  (appended - wins the cascade)
   - Background sharper again (less blur)
   - Footer mark nudged higher
   - Header logo enlarged to match the "Operations Portal" text
   ===================================================================== */

/* ---- Sharper background ---- */
.login-experience[b-ou9wkxxy3x]::before {
    opacity: .17;
    filter: blur(5px) saturate(.92);
}

.specimen-plane[b-ou9wkxxy3x] {
    filter: blur(4px) saturate(1.02);
}

@keyframes specimenBreath-b-ou9wkxxy3x {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: .86; transform: scale(1.03); }
}

/* ---- Footer a bit higher still ---- */
.login-footer[b-ou9wkxxy3x] {
    bottom: 34px;
}

/* ---- Header logo larger (closer to the text size) ---- */
.title-mark[b-ou9wkxxy3x] {
    height: 1.16em;
    transform: translateY(-.04em);
}

.title-sep[b-ou9wkxxy3x] {
    height: .86em;
}

/* ---- Keep mobile footer where it was ---- */
@media (max-width: 768px), (pointer: coarse) {
    .login-footer[b-ou9wkxxy3x] {
        bottom: 8px;
    }
}


/* =====================================================================
   V9 LOCKUP ALIGNMENT  (appended - wins the cascade)
   The "+PDI" mark has a plus above the letters, so centering it drops
   the PDI letters below the text. Align both lockups to the text
   baseline so "PDI" sits level with "Operations Portal", enlarge the
   header mark, and make the divider clear.
   ===================================================================== */

/* ---- Footer: PDI letters level with the text ---- */
.login-footer-product[b-ou9wkxxy3x] {
    align-items: baseline;
}

.footer-mark[b-ou9wkxxy3x] {
    height: 1.55em;
    transform: none;
}

.footer-mark-sep[b-ou9wkxxy3x] {
    align-self: center;
    height: 1.05em;
}

/* ---- Header (above email): bigger mark, baseline-aligned, clear divider ---- */
.auth-title-lockup[b-ou9wkxxy3x] {
    align-items: baseline;
    gap: 16px;
}

.title-mark[b-ou9wkxxy3x] {
    height: 1.5em;
    transform: none;
}

.title-sep[b-ou9wkxxy3x] {
    align-self: center;
    width: 2px;
    height: .92em;
    background: rgba(11, 55, 99, .28);
}


/* =====================================================================
   V10 HEADER DIVIDER ACCENT  (appended - wins the cascade)
   - Divider sits right after the PDI logo
   - Header mark slightly larger
   - Divider becomes a delicate blue -> cyan gradient accent
   ===================================================================== */

.auth-title-lockup[b-ou9wkxxy3x] {
    gap: 0;                     /* spacing handled by margins below */
}

.title-mark[b-ou9wkxxy3x] {
    height: 1.6em;              /* slightly larger */
    margin-right: 11px;         /* line sits right after the logo */
}

.title-sep[b-ou9wkxxy3x] {
    align-self: center;
    width: 3px;
    height: 1.05em;
    margin-right: 18px;
    border-radius: 3px;
    background: linear-gradient(180deg,
        rgba(11, 121, 220, 0) 0%,
        rgba(11, 121, 220, .55) 32%,
        rgba(95, 209, 234, .62) 68%,
        rgba(95, 209, 234, 0) 100%);
    box-shadow: 0 0 6px rgba(41, 167, 234, .35);
}


/* =====================================================================
   V11 DIVIDER VISIBILITY FIX  (appended - wins the cascade)
   The V10 gradient faded to transparent and washed out on the light
   card, so the divider disappeared. Make it a slim, rounded, clearly
   visible blue -> cyan accent with a soft glow.
   ===================================================================== */

.title-sep[b-ou9wkxxy3x] {
    flex: 0 0 auto;
    align-self: center;
    width: 3px;
    height: 1.15em;
    margin: 0 18px 0 12px;
    border-radius: 999px;
    background: linear-gradient(180deg, #1f9fed 0%, #5fd1ea 100%);
    box-shadow: 0 0 8px rgba(41, 167, 234, .5);
    opacity: .9;
}


/* =====================================================================
   V12 MICRO-ALIGN  (appended - wins the cascade)
   - Divider a touch longer, extending downward
   - "Operations Portal" nudged slightly higher
   ===================================================================== */

.title-sep[b-ou9wkxxy3x] {
    height: 1.42em;
    transform: translateY(.13em);   /* extra length goes toward the bottom */
}

.title-text[b-ou9wkxxy3x] {
    transform: translateY(-3px);    /* slightly higher */
}


/* =====================================================================
   V13 DIVIDER TONE  (appended - wins the cascade)
   The bright blue/cyan accent was too loud. Match the calm steel-blue
   used by the footer divider. Size unchanged.
   ===================================================================== */

.title-sep[b-ou9wkxxy3x] {
    background: linear-gradient(180deg, rgba(18, 67, 105, .30), rgba(18, 67, 105, .44));
    box-shadow: none;
    opacity: 1;
}

/* ==========================================================================
   Password reveal toggle
   Replaces the browser-native reveal control (Edge/Chromium only) with our
   own button so the behaviour is identical in every browser.
   ========================================================================== */

.auth-input-shell[b-ou9wkxxy3x]  .auth-input--password {
    padding-right: 4px;
}

.auth-input-shell[b-ou9wkxxy3x]  .auth-input--password::-ms-reveal,
.auth-input-shell[b-ou9wkxxy3x]  .auth-input--password::-ms-clear {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.password-toggle[b-ou9wkxxy3x] {
    position: relative;
    display: grid;
    width: 56px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    margin-right: 8px;
    padding: 0;
    border: 0;
    border-radius: 13px;
    background: transparent;
    color: #6295bf;
    cursor: pointer;
    opacity: 0;
    transform: scale(.82);
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms cubic-bezier(.22, 1, .36, 1),
                color 150ms ease, background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}

.auth-input-shell.has-password-value .password-toggle[b-ou9wkxxy3x],
.password-toggle.has-password-value[b-ou9wkxxy3x],
.auth-input-shell:focus-within .password-toggle[b-ou9wkxxy3x] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.password-toggle:hover[b-ou9wkxxy3x] {
    color: #0f6fbe;
    background: rgba(12, 116, 194, .09);
}

.password-toggle:active[b-ou9wkxxy3x] {
    transform: scale(.94);
}

.password-toggle:focus-visible[b-ou9wkxxy3x] {
    outline: 0;
    color: #0f6fbe;
    background: rgba(12, 116, 194, .12);
    box-shadow: 0 0 0 3px rgba(8, 120, 215, .28);
}

.password-toggle.is-revealed[b-ou9wkxxy3x] {
    color: #0d6cba;
}

.password-toggle-glyph[b-ou9wkxxy3x] {
    position: absolute;
    display: grid;
    place-items: center;
    transition: opacity 150ms ease, transform 150ms ease;
}

.password-toggle-glyph svg[b-ou9wkxxy3x] {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.password-toggle-glyph--hide[b-ou9wkxxy3x],
.password-toggle.is-revealed .password-toggle-glyph--show[b-ou9wkxxy3x] {
    opacity: 0;
    transform: scale(.7);
}

.password-toggle-glyph--show[b-ou9wkxxy3x],
.password-toggle.is-revealed .password-toggle-glyph--hide[b-ou9wkxxy3x] {
    opacity: 1;
    transform: scale(1);
}

@media (max-width: 640px) {
    .password-toggle[b-ou9wkxxy3x] {
        width: 46px;
        height: 40px;
        margin-right: 5px;
        border-radius: 12px;
    }

    .password-toggle-glyph svg[b-ou9wkxxy3x] {
        width: 21px;
        height: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .password-toggle[b-ou9wkxxy3x],
    .password-toggle-glyph[b-ou9wkxxy3x] {
        transition: opacity 120ms ease !important;
        transform: none !important;
    }
}


/* =====================================================================
   CORPORATE BALANCED  (appended - wins the cascade)
   ---------------------------------------------------------------------
   One single, predictable low-cost profile for every machine.

   Rules enforced in this block:
     - continuous animations use ONLY transform + opacity
     - no animated filter / blur / backdrop-filter / box-shadow /
       background-position / hue-rotate anywhere
     - background element count reduced 45 -> 20 (removed from markup)
     - logo keeps ONE breath, ONE sheen, a STATIC glow and one very slow
       biological drift
     - compositor layers (will-change / blend modes) kept to a minimum
     - everything pauses when the tab is hidden (.login-idle)
     - full prefers-reduced-motion support
   ===================================================================== */

/* ---- Compositor hygiene: promote only what really animates ---- */
.login-experience *[b-ou9wkxxy3x],
.login-experience *[b-ou9wkxxy3x]::before,
.login-experience *[b-ou9wkxxy3x]::after {
    will-change: auto;
}

.micro-mote[b-ou9wkxxy3x],
.spark[b-ou9wkxxy3x],
.drift-orb[b-ou9wkxxy3x],
.aurora-veil[b-ou9wkxxy3x],
.brand-mark-core[b-ou9wkxxy3x] {
    will-change: transform, opacity;
}

/* ---- Blend modes are expensive: keep them only where they earn it ---- */
.specimen-plane[b-ou9wkxxy3x],
.depth-wash[b-ou9wkxxy3x],
.bacteria-strand[b-ou9wkxxy3x],
.brand-mark-pulse[b-ou9wkxxy3x],
.mark-sonar[b-ou9wkxxy3x],
.auth-card-light[b-ou9wkxxy3x] {
    mix-blend-mode: normal;
}

/* ---- Slower, smaller-amplitude background motion ---- */
.login-experience[b-ou9wkxxy3x]::before {
    animation-duration: 60s;
}

.login-experience[b-ou9wkxxy3x]::after {
    /* gridDrift now uses transform instead of background-position, so the
       layer is oversized to make sure the translation never exposes an edge. */
    inset: -80px;
    animation-duration: 90s;
}

.specimen-plane-one[b-ou9wkxxy3x] {
    animation: specimenFloatOne-b-ou9wkxxy3x 54s ease-in-out infinite alternate;
}

.specimen-plane-two[b-ou9wkxxy3x] {
    animation: specimenFloatTwo-b-ou9wkxxy3x 62s ease-in-out infinite alternate;
}

.depth-wash-one[b-ou9wkxxy3x] {
    animation: depthWashOne-b-ou9wkxxy3x 46s ease-in-out infinite alternate;
}

.depth-wash-two[b-ou9wkxxy3x] {
    animation: depthWashTwo-b-ou9wkxxy3x 54s ease-in-out infinite alternate;
}

.strand-one[b-ou9wkxxy3x] {
    animation: strandDriftOne-b-ou9wkxxy3x 58s ease-in-out infinite alternate;
}

.aurora-veil[b-ou9wkxxy3x] {
    filter: blur(34px);
    opacity: .6;
    animation: auroraDrift-b-ou9wkxxy3x 96s ease-in-out infinite alternate;
}

/* ---- Re-spread the surviving particles across the full canvas ---- */
.mote-1[b-ou9wkxxy3x] { left: 14%; top: 76%; width: 11px; animation: moteRise-b-ou9wkxxy3x 34s ease-in-out 0s    infinite; }
.mote-2[b-ou9wkxxy3x] { left: 37%; top: 88%; width: 9px;  animation: moteSway-b-ou9wkxxy3x 40s ease-in-out 4.5s  infinite; }
.mote-3[b-ou9wkxxy3x] { left: 59%; top: 72%; width: 12px; animation: moteRise-b-ou9wkxxy3x 38s ease-in-out 9s    infinite; }
.mote-4[b-ou9wkxxy3x] { left: 79%; top: 84%; width: 8px;  animation: moteSway-b-ou9wkxxy3x 44s ease-in-out 13.5s infinite; }
.mote-5[b-ou9wkxxy3x] { left: 25%; top: 55%; width: 10px; animation: moteRise-b-ou9wkxxy3x 42s ease-in-out 18s   infinite; }
.mote-6[b-ou9wkxxy3x] { left: 68%; top: 58%; width: 9px;  animation: moteSway-b-ou9wkxxy3x 46s ease-in-out 22.5s infinite; }

.spark-1[b-ou9wkxxy3x] { left: 20%; top: 26%; animation: twinkle-b-ou9wkxxy3x 9s  ease-in-out 0s   infinite; }
.spark-2[b-ou9wkxxy3x] { left: 46%; top: 19%; animation: twinkle-b-ou9wkxxy3x 10s ease-in-out 2.2s infinite; }
.spark-3[b-ou9wkxxy3x] { left: 74%; top: 31%; width: 4px; height: 4px; animation: twinkle-b-ou9wkxxy3x 11s ease-in-out 4.4s infinite; }
.spark-4[b-ou9wkxxy3x] { left: 33%; top: 66%; animation: twinkle-b-ou9wkxxy3x 9.5s ease-in-out 6.6s infinite; }
.spark-5[b-ou9wkxxy3x] { left: 86%; top: 57%; width: 4px; height: 4px; animation: twinkle-b-ou9wkxxy3x 10.5s ease-in-out 8.8s infinite; }

.drift-orb-1[b-ou9wkxxy3x] { left: 18%; bottom: -12%; width: 128px; height: 128px; animation: orbFloat-b-ou9wkxxy3x    72s ease-in-out infinite; }
.drift-orb-2[b-ou9wkxxy3x] { left: 64%; bottom: -16%; width: 172px; height: 172px; animation: orbFloatAlt-b-ou9wkxxy3x 84s ease-in-out infinite 14s; }

.light-bloom-1[b-ou9wkxxy3x] { left: -10vw; top: 8vw; animation: bloomPulse-b-ou9wkxxy3x 40s ease-in-out infinite alternate; }

/* ---- Logo: one breath, one sheen, static glow, one slow bio drift ---- */

/* Static halo - no animation at all, glow fully preserved. */
.brand-mark-ambient[b-ou9wkxxy3x] {
    filter: blur(20px);
    opacity: .92;
    animation: none;
}

/* THE breath. */
.brand-mark-core[b-ou9wkxxy3x] {
    animation: corePulse-b-ou9wkxxy3x 24s ease-in-out infinite alternate;
}

@keyframes corePulse-b-ou9wkxxy3x {
    from { transform: scale(1)     rotate(-0.25deg); }
    to   { transform: scale(1.014) rotate(0.25deg); }
}

/* THE sheen. */
.brand-mark-pulse[b-ou9wkxxy3x] {
    opacity: .22;
    animation: bioPulse-b-ou9wkxxy3x 16s ease-in-out infinite;
}

@keyframes bioPulse-b-ou9wkxxy3x {
    0%, 100% { opacity: .16; transform: scale(.99); }
    50%      { opacity: .42; transform: scale(1.03); }
}

/* Minimal, very slow living drift of the specimen. */
.brand-bio-layer-main[b-ou9wkxxy3x] {
    transform-box: fill-box;
    transform-origin: center;
    filter: saturate(1.16) contrast(1.08);
    animation: microscopeZoom-b-ou9wkxxy3x 60s ease-in-out infinite alternate;
}

@keyframes microscopeZoom-b-ou9wkxxy3x {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* Rim: static membrane glow. */
.brand-mark-rim[b-ou9wkxxy3x] {
    opacity: .62;
    animation: none;
}

/* One sonar ring instead of three. */
.mark-sonar-1[b-ou9wkxxy3x] {
    animation: markSonar-b-ou9wkxxy3x 14s ease-out infinite;
}

/* ---- Card: static shadow, animated light only via opacity ---- */
.auth-card[b-ou9wkxxy3x] {
    animation: cardEnter-b-ou9wkxxy3x 680ms 90ms cubic-bezier(.22, 1, .36, 1) both;
    border-color: rgba(255, 255, 255, .9);
    box-shadow:
        0 28px 64px rgba(5, 64, 108, .2),
        0 10px 24px rgba(20, 126, 196, .1),
        inset 0 1px 0 rgba(255, 255, 255, .98);
}

.auth-card-light[b-ou9wkxxy3x] {
    animation: cardLightSweep-b-ou9wkxxy3x 18s ease-in-out infinite;
}

.auth-submit[b-ou9wkxxy3x]::before {
    animation: submitSheen-b-ou9wkxxy3x 11s ease-in-out infinite;
}

/* =====================================================================
   IDLE STATE - set by login-performance.js ONLY when the tab is truly
   hidden (another tab selected, window minimised, OS screen off).
   Losing window focus does NOT set this class: a login screen sitting
   visible on a second monitor must keep animating.
   ===================================================================== */
.login-idle .login-experience *[b-ou9wkxxy3x],
.login-idle .login-experience *[b-ou9wkxxy3x]::before,
.login-idle .login-experience *[b-ou9wkxxy3x]::after,
.login-idle .login-experience[b-ou9wkxxy3x]::before,
.login-idle .login-experience[b-ou9wkxxy3x]::after {
    animation-play-state: paused !important;
    transition: none !important;
}

/* =====================================================================
   REDUCED MOTION - fully static background, premium look retained.
   Glow, gradients, glass and depth all stay; only movement stops.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {

    .login-experience[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after,
    .login-experience[b-ou9wkxxy3x]::before,
    .login-experience[b-ou9wkxxy3x]::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
        will-change: auto !important;
    }

    /* Freeze every layer on its most attractive frame instead of
       collapsing it to a blank state. */
    .login-experience[b-ou9wkxxy3x]::before { transform: scale(1.08) !important; }
    .login-experience[b-ou9wkxxy3x]::after  { transform: none !important; }

    .specimen-plane[b-ou9wkxxy3x] { opacity: .24 !important; transform: none !important; }
    .depth-wash[b-ou9wkxxy3x]     { opacity: .9  !important; transform: none !important; }
    .bacteria-strand[b-ou9wkxxy3x] { opacity: .15 !important; }

    .aurora-veil[b-ou9wkxxy3x] {
        opacity: .62 !important;
        transform: translate3d(0, 0, 0) rotate(2deg) scale(1.1) !important;
    }

    .micro-mote[b-ou9wkxxy3x] { opacity: .5  !important; transform: none !important; }
    .spark[b-ou9wkxxy3x]      { opacity: .75 !important; transform: scale(1) !important; }
    .drift-orb[b-ou9wkxxy3x]  { opacity: .5  !important; transform: none !important; }
    .light-bloom[b-ou9wkxxy3x] { opacity: .8 !important; }

    .brand-mark-ambient[b-ou9wkxxy3x] { opacity: .92 !important; }
    .brand-mark-core[b-ou9wkxxy3x]    { transform: none !important; }
    .brand-mark-pulse[b-ou9wkxxy3x]   { opacity: .3 !important; transform: scale(1.01) !important; }
    .brand-mark-rim[b-ou9wkxxy3x]     { opacity: .66 !important; }
    .brand-bio-layer-main[b-ou9wkxxy3x] { transform: scale(1.03) !important; }

    /* No pulsing ring at all. */
    .mark-sonar[b-ou9wkxxy3x] { display: none !important; }

    .auth-card-light[b-ou9wkxxy3x],
    .auth-submit[b-ou9wkxxy3x]::before { display: none !important; }

    .brand-mark-shell[b-ou9wkxxy3x] { transform: none !important; }
}


/* =====================================================================
   V11  ORGANIC MARK + MOBILE LAYOUT   (appended - wins the cascade)
   ---------------------------------------------------------------------
   B. Logo
        - the PDI plus itself never rotates, scales or wobbles
        - ONLY the biological content inside the clip moves
        - no ripple / sonar / splash / wave layers at all
        - organic 0deg -> +6deg -> -4deg -> 0deg cycle, 14s
        - transform + opacity only, static glow preserved
   C. Mobile layout rebuilt as a deliberate mobile design
   D. The same organic drift also runs on phones (no pointer parallax)
   ===================================================================== */

/* ---------------------------------------------------------------------
   B1. Kill every "water" effect around the mark.
   markSonar was an expanding ring (the ripple/splash read), bioPulse an
   expanding halo. Both are removed for good; their host elements are
   already absent from the markup, these rules stop them ever returning.
   --------------------------------------------------------------------- */
.mark-sonar[b-ou9wkxxy3x],
.mark-sonar-1[b-ou9wkxxy3x],
.mark-sonar-2[b-ou9wkxxy3x],
.mark-sonar-3[b-ou9wkxxy3x],
.brand-mark-pulse[b-ou9wkxxy3x],
.brand-mark-sheen[b-ou9wkxxy3x] {
    display: none !important;
    animation: none !important;
}

/* ---------------------------------------------------------------------
   B2. The plus sign is completely still.
   corePulse used to scale + rotate the whole clipped mark while the drop
   shadow underneath stayed put, which is what made the silhouette look
   like it was sloshing. The mark is now rigid.
   --------------------------------------------------------------------- */
.brand-mark-core[b-ou9wkxxy3x] {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
}

/* microscopeZoom was a slow 1 -> 1.06 swell of the texture: the second
   half of the "water" impression. Movement moves up to the parent group. */
.brand-bio-layer-main[b-ou9wkxxy3x] {
    animation: none !important;
    transform: none !important;
    transform-box: view-box;
    transform-origin: center;
    /* Static colour grade only - filters are never animated. */
    filter: saturate(1.16) contrast(1.08);
}

/* ---------------------------------------------------------------------
   B3. THE motion: organic drift of the biological content only.
   Rotation pivots on the group's own bounding box, which is centred on
   the mark, so the specimen turns in place instead of orbiting.
   --------------------------------------------------------------------- */
/* transform-box: view-box + an explicit pivot in viewBox units is the
   only combination every engine agrees on for a <g>. fill-box resolves
   against the group's own bbox, which older WebKit reports as (0,0) -
   the specimen then orbits the corner instead of turning in place. */
.brand-bio-motion-main[b-ou9wkxxy3x] {
    transform-box: view-box;
    transform-origin: 314.5px 300px;
    will-change: transform;
    animation: bioOrganicDrift-b-ou9wkxxy3x 14s ease-in-out infinite;
}

@keyframes bioOrganicDrift-b-ou9wkxxy3x {
    0% {
        transform: rotate(0deg) scale(1) translate(0, 0);
    }
    30% {
        transform: rotate(6deg) scale(1.025) translate(3px, -2px);
    }
    62% {
        transform: rotate(-4deg) scale(1.012) translate(-2px, 3px);
    }
    100% {
        transform: rotate(0deg) scale(1) translate(0, 0);
    }
}

/* Static glow stays exactly as it was. */
.brand-mark-ambient[b-ou9wkxxy3x] {
    animation: none !important;
}

.brand-mark-rim[b-ou9wkxxy3x] {
    animation: none !important;
}


/* =====================================================================
   C. MOBILE LAYOUT - deliberately designed, not a shrunken desktop.
   ===================================================================== */
@media (max-width: 768px), (pointer: coarse) {

    /* ---- C1. Scroll container ----
       Desktop keeps `position: fixed; inset: 0` and scrolls INSIDE the
       overlay. On a phone that is exactly what clipped Server Status and
       the footer: a fixed box is glued to the layout viewport, so when
       the on-screen keyboard opens iOS/Android shrink the visual viewport
       underneath it and the bottom of the card becomes unreachable.
       On mobile the overlay therefore joins the normal document flow and
       the PAGE scrolls - content decides the height, nothing is clipped. */
    .login-experience[b-ou9wkxxy3x] {
        position: relative !important;
        display: block !important;
        inset: auto !important;
        /* 100dvh is deliberately NOT used here. dvh tracks the visual
           viewport, so every time Chrome's address bar slides away the
           container's own min-height changes mid-scroll and the whole
           gradient has to be re-rasterised - that is the flicker.
           svh is the SMALL viewport height: it is a fixed number for the
           lifetime of the page and does not react to browser chrome. */
        min-height: 100vh !important;   /* fallback for engines without svh */
        min-height: 100svh !important;  /* stable: never changes while scrolling */
        height: auto !important;
        overflow-x: hidden;            /* fallback: Safari < 16, Firefox < 81 */
        overflow-x: clip !important;   /* preferred: clips without scroll-container */
        overflow-y: visible !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* The decorative atmosphere is hidden on phones anyway - keep it that
       way and make sure nothing re-pins it to the viewport. A fixed layer
       behind a scrolling document is repainted on every scroll tick. */
    .login-atmosphere[b-ou9wkxxy3x] {
        display: none !important;
        position: static !important;
    }

    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after {
        max-width: 100%;
    }

    /* ---- C2. Stage: content decides the height, never a fixed box ---- */
    .login-stage[b-ou9wkxxy3x] {
        width: min(100%, 460px) !important;
        max-width: 100% !important;
        min-height: 0 !important;
        height: auto !important;
        gap: 12px !important;
        padding: 16px 14px 0 !important;
    }

    /* ---- C3. Branding: centred, inside the card, never clipped ---- */
    .hero-brand-lockup[b-ou9wkxxy3x] {
        justify-items: center !important;
        max-width: 100% !important;
    }

    .brand-mark-shell[b-ou9wkxxy3x] {
        width: min(198px, 46vw) !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        /* Container drop-shadows would re-filter the animated content on
           every frame; the SVG carries its own static shadow instead. */
        filter: none !important;
    }

    .auth-title-lockup[b-ou9wkxxy3x] {
        display: grid !important;
        grid-template-columns: auto 2px auto !important;
        align-items: center !important;
        justify-content: center !important;
        column-gap: 9px !important;
        row-gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-inline: auto !important;
        flex-wrap: nowrap !important;
        font-size: clamp(21px, 5.8vw, 27px) !important;
        line-height: 1 !important;
        text-align: center !important;
        overflow-wrap: normal !important;
    }

    .auth-heading h1[b-ou9wkxxy3x] {
        font-size: clamp(21px, 5.8vw, 27px) !important;
    }

    .title-mark[b-ou9wkxxy3x] {
        display: block !important;
        width: auto !important;
        height: 1.14em !important;
        aspect-ratio: 212 / 125 !important;
        margin: 0 !important;
        align-self: center !important;
        flex: none !important;
        transform: translateY(-5px) !important;
    }

    .title-sep[b-ou9wkxxy3x] {
        display: block !important;
        width: 2px !important;
        height: 1.08em !important;
        margin: 0 !important;
        align-self: center !important;
        flex: none !important;
        transform: none !important;
    }

    .title-text[b-ou9wkxxy3x] {
        min-width: 0 !important;
        margin: 0 !important;
        align-self: center !important;
        font-size: 1em !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        transform: none !important;
    }

    .auth-heading p[b-ou9wkxxy3x] {
        font-size: 14.5px !important;
    }

    .heading-accent[b-ou9wkxxy3x] {
        margin: 14px auto 18px !important;
    }

    /* Give the mobile form a little more breathing room below the
       heading and between the e-mail field and Password label. */
    .auth-form[b-ou9wkxxy3x] {
        margin-top: 3px !important;
        gap: 18px !important;
    }

    /* ---- C4. Card: height follows content ---- */
    .auth-card[b-ou9wkxxy3x] {
        min-height: 0 !important;
        height: auto !important;
        padding: 22px 17px 20px !important;
        overflow: visible !important;
    }

    /* ---- C5. Remember me (left) and Forgot password? (right), one row ---- */
    .auth-options[b-ou9wkxxy3x] {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px 12px !important;
        min-height: 44px !important;
    }

    .remember-row[b-ou9wkxxy3x] {
        display: inline-flex !important;
        min-height: 44px !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        gap: 9px !important;
        font-size: 14px !important;
    }

    .forgot-password-link[b-ou9wkxxy3x] {
        display: inline-flex !important;
        min-height: 44px !important;
        flex: 0 1 auto !important;
        align-items: center !important;
        padding: 0 !important;
        font-size: 14px !important;
        text-align: right !important;
        white-space: nowrap !important;
    }

    /* ---- C6. Server Status: always fully visible, above the footer ---- */
    .server-health[b-ou9wkxxy3x] {
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    /* ---- C7. Footer: normal flow under Server Status, never overlapping ---- */
    .login-footer[b-ou9wkxxy3x] {
        position: static !important;
        z-index: auto !important;
        inset: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;
        width: min(100%, 460px) !important;
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 4px !important;
        margin: 16px auto 0 !important;
        padding: 0 16px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
        font-size: 10.5px !important;
        line-height: 1.45 !important;
        pointer-events: auto !important;
    }

    .login-footer-product[b-ou9wkxxy3x] {
        font-size: 11px !important;
    }

    .login-footer-legal[b-ou9wkxxy3x] {
        display: block !important;
        max-width: 100% !important;
        text-wrap: balance;
    }
}

/* ---- C8. Very narrow phones (320-359px): brand allowed two rows ---- */
@media (max-width: 359px) {
    .auth-title-lockup[b-ou9wkxxy3x] {
        grid-template-columns: auto 2px auto !important;
        column-gap: 8px !important;
        row-gap: 0 !important;
        font-size: 20px !important;
    }

    .title-text[b-ou9wkxxy3x] {
        white-space: nowrap !important;
        text-align: center !important;
    }

    .title-sep[b-ou9wkxxy3x] {
        display: block !important;
    }

    .remember-row[b-ou9wkxxy3x],
    .forgot-password-link[b-ou9wkxxy3x] {
        font-size: 13px !important;
    }

    .remember-row[b-ou9wkxxy3x]  input {
        width: 19px !important;
        height: 19px !important;
    }

    .login-stage[b-ou9wkxxy3x] {
        padding-inline: 10px !important;
    }

    .auth-card[b-ou9wkxxy3x] {
        padding: 20px 14px 18px !important;
    }
}

/* ---- C9. Short screens / on-screen keyboard open ---- */
@media (max-height: 620px) and (max-width: 768px) {
    .brand-mark-shell[b-ou9wkxxy3x] {
        width: min(132px, 30vw) !important;
    }

    .login-stage[b-ou9wkxxy3x] {
        gap: 8px !important;
        padding-top: 10px !important;
    }

    .heading-accent[b-ou9wkxxy3x] {
        margin: 10px auto 14px !important;
    }

    .login-footer[b-ou9wkxxy3x] {
        margin-top: 12px !important;
    }
}


/* =====================================================================
   D. MOBILE MARK - no pointer parallax, but not a dead logo either.
   The live SVG is shown again and runs exactly one animation: the same
   organic drift of the biological content. Everything else stays still.
   ===================================================================== */
@media (max-width: 768px), (pointer: coarse) {

    /* The static PNG fallback is no longer needed. */
    .brand-mark-shell .brand-mobile-static-mark[b-ou9wkxxy3x] {
        display: none !important;
    }

    .brand-mark-shell .brand-mark-svg[b-ou9wkxxy3x],
    .brand-mark-shell .brand-mark-ambient[b-ou9wkxxy3x] {
        display: block !important;
    }

    .brand-mark-shell .brand-bio-motion-main[b-ou9wkxxy3x],
    .brand-mark-shell .brand-bio-layer[b-ou9wkxxy3x],
    .brand-mark-shell .brand-bio-layer-main[b-ou9wkxxy3x] {
        display: inline !important;
    }

    /* Static halo - identical look, zero cost. */
    .brand-mark-shell .brand-mark-ambient[b-ou9wkxxy3x] {
        animation: none !important;
        filter: blur(16px) !important;
        opacity: .85 !important;
    }

    /* The plus stays rigid on mobile too. */
    .brand-mark-shell .brand-mark-core[b-ou9wkxxy3x] {
        animation: none !important;
        transform: none !important;
    }

    /* The one animation allowed on a phone. */
    .brand-mark-shell .brand-bio-motion-main[b-ou9wkxxy3x] {
        transform-box: view-box !important;
        transform-origin: 314.5px 300px !important;
        will-change: transform !important;
        animation: bioOrganicDrift-b-ou9wkxxy3x 14s ease-in-out infinite !important;
    }

    /* No filter at all on phones. saturate/contrast are cheap per-pixel
       ops, but they still sit on content that a parent <g> transforms
       every frame - on a mid-range Android that is a needless re-filter. */
    .brand-mark-shell .brand-bio-layer-main[b-ou9wkxxy3x] {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    /* No pointer parallax on touch. */
    .brand-mark-shell[b-ou9wkxxy3x] {
        perspective: none !important;
        transform: none !important;
        transform-style: flat !important;
    }
}


/* =====================================================================
   REDUCED MOTION - one correct, static frame of the mark on every
   device. Glow, depth and glass are all preserved.
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
    .brand-bio-motion-main[b-ou9wkxxy3x],
    .brand-mark-shell .brand-bio-motion-main[b-ou9wkxxy3x],
    .server-health .health-dot span[b-ou9wkxxy3x] {
        animation: none !important;
        transform: rotate(2deg) scale(1.012) !important;
        will-change: auto !important;
    }

    .brand-mark-core[b-ou9wkxxy3x],
    .brand-bio-layer-main[b-ou9wkxxy3x] {
        animation: none !important;
        transform: none !important;
    }

    .mark-sonar[b-ou9wkxxy3x],
    .brand-mark-pulse[b-ou9wkxxy3x],
    .brand-mark-sheen[b-ou9wkxxy3x] {
        display: none !important;
    }
}


/* =====================================================================
   V13  MOBILE BACKGROUND STABILITY   (appended - wins the cascade)
   ---------------------------------------------------------------------
   Desktop is untouched: every rule below sits inside a mobile-only
   media query.

   The flicker was a repaint problem, not a layout problem:
     - min-height: 100dvh re-measured the container whenever Chrome's
       address bar slid in or out, so the box changed height mid-scroll;
     - the background was four stacked gradients (3 radial + 1 linear)
       painted across that changing box, so all four were re-rasterised
       on the same tick;
     - the composited layer had no flat base colour underneath, so the
       moment between discarding the old raster and presenting the new
       one showed through as a pale flash.

   Fix: a fixed height reference (svh), one flat colour, and at most two
   cheap gradient layers pinned to the element box.
   ===================================================================== */
@media (max-width: 768px), (pointer: coarse) {

    /* ---- V13.1  Static, cheap, document-tall background ----
       background-size: 100% 100% ties both layers to the element's own
       box. The element is in normal flow and as tall as its content, so
       the gradient always covers the full document - it is never glued
       to the visual viewport. */
    .login-experience[b-ou9wkxxy3x] {
        /* Flat base first: whatever happens during a repaint or an
           overscroll bounce, this colour is what shows. */
        background-color: #e9f5fc !important;
        background-image:
            radial-gradient(ellipse at 50% 0%,
                rgba(255, 255, 255, .85) 0%,
                rgba(255, 255, 255, 0) 55%),
            linear-gradient(180deg,
                #fbfeff 0%,
                #eef9ff 45%,
                #dff3fb 100%) !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
        background-position: center top !important;

        /* Nothing here may promote a layer or invalidate a raster. */
        animation: none !important;
        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        will-change: auto !important;
        contain: none !important;
        isolation: auto !important;
    }

    /* ---- V13.2  Every decorative layer stays gone on phones ---- */
    .login-experience[b-ou9wkxxy3x]::before,
    .login-experience[b-ou9wkxxy3x]::after,
    .login-atmosphere[b-ou9wkxxy3x],
    .specimen-plane[b-ou9wkxxy3x],
    .depth-wash[b-ou9wkxxy3x],
    .bacteria-strand[b-ou9wkxxy3x],
    .aurora-veil[b-ou9wkxxy3x],
    .micro-mote[b-ou9wkxxy3x],
    .spark[b-ou9wkxxy3x],
    .drift-orb[b-ou9wkxxy3x],
    .light-bloom[b-ou9wkxxy3x],
    .mark-sonar[b-ou9wkxxy3x] {
        display: none !important;
        content: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    /* ---- V13.3  No fixed / attached backgrounds anywhere on the page ----
       background-attachment: fixed forces a repaint of that layer on
       every scroll tick in Chrome for Android. */
    .login-experience[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after {
        background-attachment: scroll !important;
    }

    /* ---- V13.4  The card keeps its glass look but stops re-filtering ----
       A backdrop-filter samples whatever is behind it; while the page
       scrolls that backdrop changes every frame, so the blur is redone
       every frame. The card is opaque enough on mobile without it. */
    .auth-card[b-ou9wkxxy3x] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        will-change: auto !important;
        transform: none !important;
    }

    /* ---- V13.5  The one exception: the specimen inside the mark ----
       Unchanged from V12 on purpose. It is a transform on a small,
       clipped, self-contained SVG group and does not touch the page
       background. */
    .brand-mark-shell .brand-bio-motion-main[b-ou9wkxxy3x] {
        animation: bioOrganicDrift-b-ou9wkxxy3x 14s ease-in-out infinite !important;
        will-change: transform !important;
    }
}


/* =====================================================================
   V14  MOBILE: ONE ANIMATION, FLAT BACKGROUND   (appended - wins)
   ---------------------------------------------------------------------
   Desktop is untouched. Every rule below is inside a mobile-only media
   query, except the final prefers-reduced-motion block which must be
   able to override the single surviving animation on any device.

   Order matters and is deliberate:
     A. flat background            (no image, no layer promotion)
     B. every decorative node gone
     C. blanket animation/transition kill
     D. card flattened
     E. will-change purge
     F. the ONE exception: bioOrganicDrift
     G. reduced motion kills even that
   ===================================================================== */

/* ---------------------------------------------------------------------
   A. Flat, single-colour mobile background.
   `background` shorthand is used first so it resets image, size,
   position, attachment, repeat, origin and clip in one go - leaving no
   inherited 100% 100% or gradient behind from any earlier block.
   html / body get the identical colour from login-performance.js,
   because scoped component CSS cannot reach outside the component.
   --------------------------------------------------------------------- */
@media (max-width: 768px), (pointer: coarse) {

    .login-experience[b-ou9wkxxy3x] {
        position: relative !important;
        display: block !important;
        inset: auto !important;
        min-height: 0 !important;
        height: auto !important;

        /* Full document width: .account-content is a grid with
           place-items: center, so an in-flow child would otherwise
           shrink to its content and leave the shell showing at the
           sides. That gap is what read as "blue background". */
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 0 max(28px, env(safe-area-inset-bottom, 0px)) !important;

        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        /* An earlier !important longhand (background-size: 100% 100%)
           outranks the reset the shorthand carries, so it is undone
           explicitly here. Same for the other longhands. */
        background-size: auto !important;
        background-position: initial !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        background-blend-mode: normal !important;

        transform: none !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        mix-blend-mode: normal !important;
        will-change: auto !important;
        contain: none !important;
        isolation: auto !important;
        perspective: none !important;
        transform-style: flat !important;

        overflow-x: hidden !important;
        overflow-y: visible !important;
        overscroll-behavior-y: auto !important;
        touch-action: pan-y !important;
    }

    /* The stage spans the full width and paints nothing of its own;
       only its inner content keeps a max-width. */
    .login-stage[b-ou9wkxxy3x] {
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        background: #ffffff !important;
        background-image: none !important;
    }

    .login-stage > *[b-ou9wkxxy3x] {
        width: min(100%, 460px) !important;
        margin-inline: auto !important;
    }

    /* ---- B. Every decorative node is gone, including pseudo backgrounds ---- */
    .login-experience[b-ou9wkxxy3x]::before,
    .login-experience[b-ou9wkxxy3x]::after,
    .login-atmosphere[b-ou9wkxxy3x],
    .login-atmosphere[b-ou9wkxxy3x]::before,
    .login-atmosphere[b-ou9wkxxy3x]::after,
    .specimen-plane[b-ou9wkxxy3x],
    .depth-wash[b-ou9wkxxy3x],
    .bacteria-strand[b-ou9wkxxy3x],
    .aurora-veil[b-ou9wkxxy3x],
    .micro-mote[b-ou9wkxxy3x],
    .spark[b-ou9wkxxy3x],
    .drift-orb[b-ou9wkxxy3x],
    .light-bloom[b-ou9wkxxy3x],
    .mark-sonar[b-ou9wkxxy3x],
    .auth-card-light[b-ou9wkxxy3x],
    .auth-card[b-ou9wkxxy3x]::before,
    .auth-card[b-ou9wkxxy3x]::after,
    .brand-mark-pulse[b-ou9wkxxy3x],
    .brand-mark-sheen[b-ou9wkxxy3x],
    .auth-submit[b-ou9wkxxy3x]::before,
    .auth-submit[b-ou9wkxxy3x]::after {
        display: none !important;
        content: none !important;
        background: none !important;
        background-image: none !important;
        animation: none !important;
        transform: none !important;
        filter: none !important;
        will-change: auto !important;
    }

    /* ---- C. Blanket: no animation, no transition, anywhere ---- */
    .login-experience[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }

    /* ---- D. Card: one flat shadow, no glass, no promoted layer ---- */
    .auth-card[b-ou9wkxxy3x] {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        transform: none !important;
        will-change: auto !important;
        contain: none !important;
        isolation: auto !important;
        border: 1px solid rgba(146, 195, 226, .45) !important;
        border-radius: 22px !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        box-shadow: 0 8px 24px rgba(16, 70, 105, .12) !important;
    }

    /* ---- E. Nothing on the login screen may be promoted to its own
             GPU layer. The single animated group re-enables this below. ---- */
    .login-experience[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x]::before,
    .login-experience *[b-ou9wkxxy3x]::after {
        will-change: auto !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    /* ---- E2. Remember me: no tap flash, no reflow on tap ----
       Chrome for Android paints -webkit-tap-highlight-color over the
       whole label box on touch; on a label that sits in a
       space-between flex row that reads as a bright bar appearing at
       the side. Transform/box-shadow are cleared too so tapping can
       never change the label's box and therefore never the document
       width. -->  keyboard focus stays visible via :focus-visible. */
    .remember-row[b-ou9wkxxy3x] {
        -webkit-tap-highlight-color: transparent !important;
        transform: none !important;
        transition: none !important;
        filter: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .remember-row[b-ou9wkxxy3x]::before,
    .remember-row[b-ou9wkxxy3x]::after {
        display: none !important;
        content: none !important;
    }

    .remember-row input[b-ou9wkxxy3x],
    .remember-row[b-ou9wkxxy3x]  input {
        transform: none !important;
        transition: none !important;
        filter: none !important;
        box-shadow: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    .remember-row input:focus-visible[b-ou9wkxxy3x],
    .remember-row[b-ou9wkxxy3x]  input:focus-visible {
        outline: 2px solid #0878d7 !important;
        outline-offset: 2px !important;
    }

    /* Mobile-only content protection for the presentation layer.
       Inputs keep normal selection/paste support for password managers. */
    .login-experience[b-ou9wkxxy3x],
    .login-experience *[b-ou9wkxxy3x] {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
    }

    .auth-input-shell input[b-ou9wkxxy3x],
    .auth-input-shell textarea[b-ou9wkxxy3x],
    .auth-input-shell[b-ou9wkxxy3x]  input,
    .auth-input-shell[b-ou9wkxxy3x]  textarea,
    .login-experience [contenteditable="true"][b-ou9wkxxy3x] {
        -webkit-user-select: text !important;
        user-select: text !important;
        -webkit-touch-callout: default !important;
    }

    .brand-mark-shell[b-ou9wkxxy3x],
    .brand-mark-shell *[b-ou9wkxxy3x],
    .brand-mark-svg[b-ou9wkxxy3x],
    .brand-mobile-static-mark[b-ou9wkxxy3x],
    .title-mark[b-ou9wkxxy3x],
    .footer-mark[b-ou9wkxxy3x] {
        pointer-events: none !important;
        -webkit-user-drag: none !important;
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-touch-callout: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }


    /* ---- E3. Final mobile spacing and compact server status ---- */

    /* A little more air between the e-mail field and Password label,
       without changing spacing elsewhere in the form. */
    .auth-field + .auth-field[b-ou9wkxxy3x] {
        margin-top: 6px !important;
    }

    /* Mobile shows only: status light + Server Status + current state.
       The diagnostic detail remains available on desktop. */
    .server-health[b-ou9wkxxy3x] {
        grid-template-columns: auto minmax(0, 1fr) !important;
        min-height: 60px !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 13px 16px !important;
    }

    .server-health small[b-ou9wkxxy3x] {
        display: none !important;
    }

    .server-health .health-copy[b-ou9wkxxy3x] {
        min-width: 0 !important;
        flex-wrap: wrap !important;
        gap: 5px 10px !important;
        white-space: normal !important;
    }

    /* The only additional mobile motion requested besides the bacterium:
       a slow, subtle status ring. It uses transform + opacity only. */
    .server-health .health-dot span[b-ou9wkxxy3x] {
        display: block !important;
        animation: healthPulse-b-ou9wkxxy3x 2.8s ease-out infinite !important;
        transform-origin: center !important;
        will-change: transform, opacity !important;
    }

    /* ---- F. THE ONE EXCEPTION ----
             Same specificity as the blanket rule above (0,1,0), so it
             wins purely on source order. Must stay last in this block. ---- */
    .brand-bio-motion-main[b-ou9wkxxy3x] {
        animation: bioOrganicDrift-b-ou9wkxxy3x 14s ease-in-out infinite !important;
        transform-box: view-box !important;
        transform-origin: 314.5px 300px !important;
        will-change: transform !important;
    }
}

/* ---------------------------------------------------------------------
   G. Reduced motion outranks even the exception.
   This block is last in the file on purpose: the mobile exception above
   also has specificity (0,1,0), so only source order can beat it.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .brand-bio-motion-main[b-ou9wkxxy3x],
    .brand-mark-shell .brand-bio-motion-main[b-ou9wkxxy3x] {
        animation: none !important;
        transform: rotate(2deg) scale(1.012) !important;
        will-change: auto !important;
    }
}
/* /Components/Account/Pages/Setup.razor.rz.scp.css */
.setup-card[b-qlpr18c4ft] {
    width: min(440px, 100%);
    padding: 30px;
    border: 1px solid rgba(135, 159, 190, 0.30);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.90);
    box-shadow: 0 26px 70px rgba(31, 58, 92, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.90);
    backdrop-filter: blur(20px);
}

.setup-brand[b-qlpr18c4ft] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(130, 151, 178, 0.22);
}

.setup-brand img[b-qlpr18c4ft] {
    width: 92px;
    height: 46px;
    object-fit: contain;
}

.setup-brand > div[b-qlpr18c4ft] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.setup-brand strong[b-qlpr18c4ft] {
    color: #14233c;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.35px;
}

.setup-brand span[b-qlpr18c4ft] {
    color: #64748b;
    font-size: 10px;
    font-weight: 700;
}

.setup-heading[b-qlpr18c4ft] {
    padding: 25px 0 20px;
}

.setup-eyebrow[b-qlpr18c4ft] {
    color: #1769dc;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.setup-heading h1[b-qlpr18c4ft] {
    margin: 5px 0 6px;
    color: #14233c;
    font-size: 30px;
    font-weight: 780;
    letter-spacing: -0.7px;
}

.setup-heading p[b-qlpr18c4ft] {
    margin: 0;
    color: #64748b;
    font-size: 13px;
    line-height: 1.5;
}

.setup-form[b-qlpr18c4ft] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.setup-field[b-qlpr18c4ft] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    color: #1e2f49;
    font-size: 11px;
    font-weight: 800;
}

.setup-field[b-qlpr18c4ft]  .setup-input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid #c8d5e6;
    border-radius: 10px;
    outline: none;
    color: #17243a;
    background: rgba(255, 255, 255, 0.86);
    font: inherit;
    font-size: 13px;
    font-weight: 550;
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.setup-field[b-qlpr18c4ft]  .setup-input:focus {
    border-color: #1769dc;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(23, 105, 220, 0.12);
}

.setup-field[b-qlpr18c4ft]  .setup-input::placeholder {
    color: #98a6b8;
}

.setup-validation[b-qlpr18c4ft] {
    color: #b43c49;
    font-size: 10px;
    font-weight: 700;
}

.remember-row[b-qlpr18c4ft] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #52647c;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.remember-row[b-qlpr18c4ft]  input {
    width: 16px;
    height: 16px;
    accent-color: #1769dc;
}

.setup-submit[b-qlpr18c4ft] {
    min-height: 47px;
    border: 1px solid #1769dc;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #225fc5 0%, #1769dc 65%, #4b9fb2 100%);
    box-shadow: 0 12px 24px rgba(23, 105, 220, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.26);
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

.setup-submit:hover[b-qlpr18c4ft] {
    transform: translateY(-1px);
    box-shadow: 0 16px 28px rgba(23, 105, 220, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.30);
    filter: saturate(1.08);
}

.setup-submit:active[b-qlpr18c4ft] {
    transform: translateY(0) scale(0.99);
}

.setup-help[b-qlpr18c4ft] {
    margin-top: 20px;
    padding: 12px 13px;
    border: 1px solid rgba(23, 105, 220, 0.18);
    border-radius: 10px;
    color: #5f7087;
    background: rgba(232, 242, 255, 0.64);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.45;
    text-align: center;
}

.setup-message[b-qlpr18c4ft] {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    padding: 11px 12px;
    border-radius: 10px;
    font-size: 11px;
}

.setup-message > span[b-qlpr18c4ft] {
    display: grid;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #b83d4a;
    font-weight: 900;
}

.setup-message.error[b-qlpr18c4ft] {
    border: 1px solid #e4a1a9;
    color: #8b2f39;
    background: #fff0f2;
}

@media (prefers-color-scheme: dark) {
    .setup-card[b-qlpr18c4ft] {
        border-color: rgba(129, 159, 195, 0.24);
        background: rgba(21, 33, 49, 0.92);
        box-shadow: 0 28px 74px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }

    .setup-brand[b-qlpr18c4ft] {
        border-bottom-color: rgba(154, 177, 205, 0.16);
    }

    .setup-brand strong[b-qlpr18c4ft],
    .setup-heading h1[b-qlpr18c4ft],
    .setup-field[b-qlpr18c4ft] {
        color: #f4f7fb;
    }

    .setup-brand span[b-qlpr18c4ft],
    .setup-heading p[b-qlpr18c4ft],
    .remember-row[b-qlpr18c4ft] {
        color: #9aabc0;
    }

    .setup-field[b-qlpr18c4ft]  .setup-input {
        border-color: #34485f;
        color: #f4f7fb;
        background: #101d2c;
    }

    .setup-field[b-qlpr18c4ft]  .setup-input:focus {
        border-color: #4e97f0;
        background: #122235;
        box-shadow: 0 0 0 4px rgba(78, 151, 240, 0.14);
    }

    .setup-help[b-qlpr18c4ft] {
        border-color: rgba(91, 155, 235, 0.20);
        color: #9db0c7;
        background: rgba(35, 77, 127, 0.20);
    }

    .setup-message.error[b-qlpr18c4ft] {
        border-color: rgba(225, 111, 124, 0.46);
        color: #ffc4ca;
        background: rgba(131, 38, 50, 0.24);
    }
}

@media (max-width: 520px) {
    .setup-card[b-qlpr18c4ft] {
        padding: 23px 20px;
        border-radius: 15px;
    }

    .setup-heading h1[b-qlpr18c4ft] {
        font-size: 27px;
    }
}

.setup-card[b-qlpr18c4ft] { width: min(500px, 100%); }
.password-rules[b-qlpr18c4ft] { padding: 10px 12px; border-radius: 9px; color: #5f7087; background: rgba(232, 242, 255, 0.64); font-size: 10.5px; line-height: 1.45; }
.setup-message[b-qlpr18c4ft] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; padding: 11px 12px; border: 1px solid #e4a1a9; border-radius: 10px; color: #8b2f39; background: #fff0f2; font-size: 11px; font-weight: 700; }
@media (prefers-color-scheme: dark) { .password-rules[b-qlpr18c4ft] { color: #9db0c7; background: rgba(35, 77, 127, 0.20); } .setup-message[b-qlpr18c4ft] { border-color: rgba(225, 111, 124, 0.46); color: #ffc4ca; background: rgba(131, 38, 50, 0.24); } }

.setup-message > span[b-qlpr18c4ft] {
    display: block;
    width: auto;
    height: auto;
    color: inherit;
    background: transparent;
    border-radius: 0;
    font-weight: 700;
}
/* /Components/Account/Pages/SignInTransition.razor.rz.scp.css */
.sign-in-transition[b-56rwyaswry] {
    position: relative;
    display: flex;
    width: min(520px, 100%);
    min-height: 370px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding: 54px 48px 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 30px;
    color: #06223f;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(238, 249, 255, .6)),
        linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .14));
    box-shadow:
        0 42px 110px rgba(5, 64, 108, .22),
        0 14px 36px rgba(20, 126, 196, .11),
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 0 0 1px rgba(87, 168, 220, .08);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-user-select: none;
    user-select: none;
    animation: transitionPanelEnter-b-56rwyaswry 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.sign-in-transition[b-56rwyaswry]::before,
.sign-in-transition[b-56rwyaswry]::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.sign-in-transition[b-56rwyaswry]::before {
    inset: -30%;
    background:
        radial-gradient(circle at 50% 14%, rgba(88, 209, 228, .22), transparent 30%),
        url("/images/login/bio-microorganism-field.png");
    background-position: center;
    background-size: cover;
    opacity: .08;
    filter: blur(10px) saturate(.9);
    animation: transitionMicrobeDrift-b-56rwyaswry 18s ease-in-out infinite alternate;
}

.sign-in-transition[b-56rwyaswry]::after {
    top: -42%;
    left: -58%;
    width: 92%;
    height: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
    filter: blur(10px);
    transform: rotate(18deg);
    animation: transitionSweep-b-56rwyaswry 7s ease-in-out infinite;
}

.sign-in-transition > *[b-56rwyaswry] {
    position: relative;
    z-index: 1;
}

.transition-mark[b-56rwyaswry] {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
}

.transition-ring[b-56rwyaswry],
.transition-ring[b-56rwyaswry]::before,
.transition-ring[b-56rwyaswry]::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.transition-ring[b-56rwyaswry] {
    inset: 0;
    border: 2px solid rgba(8, 120, 215, .16);
    border-top-color: #0878d7;
    border-right-color: #58d1e4;
    box-shadow: 0 0 34px rgba(31, 159, 237, .16);
    animation: transitionRingSpin-b-56rwyaswry 1.35s linear infinite;
}

.transition-ring[b-56rwyaswry]::before {
    inset: 9px;
    border: 1px solid rgba(53, 201, 154, .2);
    border-bottom-color: rgba(53, 201, 154, .62);
    animation: transitionRingSpin-b-56rwyaswry 2.1s linear infinite reverse;
}

.transition-ring[b-56rwyaswry]::after {
    inset: -8px;
    border: 1px solid rgba(88, 209, 228, .18);
    opacity: .7;
    animation: transitionPulse-b-56rwyaswry 2.4s ease-out infinite;
}

.transition-check[b-56rwyaswry] {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid rgba(53, 201, 154, .44);
    border-radius: 50%;
    color: #effff9;
    background: linear-gradient(145deg, #35c99a, #11966f);
    box-shadow: 0 16px 34px rgba(17, 150, 111, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
    font-size: 28px;
    font-weight: 850;
    transform: scale(.84);
    animation: transitionCheckPulse-b-56rwyaswry 1.9s ease-in-out infinite;
}

.transition-copy[b-56rwyaswry] {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.transition-copy span[b-56rwyaswry] {
    color: #079c6a;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.transition-copy strong[b-56rwyaswry] {
    color: #082f5d;
    font-size: clamp(25px, 2vw, 31px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.14;
}

.transition-progress[b-56rwyaswry] {
    width: min(310px, 88%);
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(78, 136, 184, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.transition-progress span[b-56rwyaswry] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0878d7, #1f9fed, #58d1e4, #35c99a);
    box-shadow: 0 0 18px rgba(31, 159, 237, .32);
    transform: scaleX(0);
    transform-origin: left;
    animation: transitionProgressFill-b-56rwyaswry var(--transition-duration, 3s) linear forwards;
}

.transition-fallback[b-56rwyaswry] {
    color: rgba(25, 78, 120, .62);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    opacity: .8;
    transition: color 160ms ease, opacity 160ms ease;
}

.transition-fallback:hover[b-56rwyaswry] {
    color: #075fae;
    opacity: 1;
}

@keyframes transitionPanelEnter-b-56rwyaswry {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.982);
    }

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

@keyframes transitionMicrobeDrift-b-56rwyaswry {
    from {
        transform: translate3d(-18px, 10px, 0) scale(1.04);
    }

    to {
        transform: translate3d(20px, -16px, 0) scale(1.12);
    }
}

@keyframes transitionSweep-b-56rwyaswry {
    0%, 16% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(18deg);
    }

    34% {
        opacity: .86;
    }

    64%, 100% {
        opacity: 0;
        transform: translate3d(190%, 620%, 0) rotate(18deg);
    }
}

@keyframes transitionRingSpin-b-56rwyaswry {
    to {
        transform: rotate(360deg);
    }
}

@keyframes transitionPulse-b-56rwyaswry {
    from {
        opacity: .58;
        transform: scale(.82);
    }

    to {
        opacity: 0;
        transform: scale(1.28);
    }
}

@keyframes transitionCheckPulse-b-56rwyaswry {
    0%, 100% {
        transform: scale(.96);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes transitionProgressFill-b-56rwyaswry {
    to {
        transform: scaleX(1);
    }
}

@media (max-width: 620px) {
    .sign-in-transition[b-56rwyaswry] {
        box-sizing: border-box;
        width: min(420px, calc(100% - 24px));
        max-width: 420px;
        min-width: 0;
        min-height: 330px;
        margin: clamp(16px, 6svh, 52px) auto 24px;
        padding: 38px 22px 32px;
        border-radius: 24px;
        backdrop-filter: none;
    }

    .transition-copy[b-56rwyaswry],
    .transition-progress[b-56rwyaswry] {
        min-width: 0;
        max-width: 100%;
    }

    .transition-copy strong[b-56rwyaswry] {
        max-width: 100%;
        font-size: clamp(21px, 6.2vw, 24px);
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .transition-progress[b-56rwyaswry] {
        width: min(310px, 100%);
    }
}

@media (max-width: 360px) {
    .sign-in-transition[b-56rwyaswry] {
        min-height: 310px;
        gap: 20px;
        padding: 32px 18px 28px;
        border-radius: 20px;
    }

    .transition-mark[b-56rwyaswry] {
        width: 82px;
        height: 82px;
    }

    .transition-check[b-56rwyaswry] {
        width: 50px;
        height: 50px;
        font-size: 25px;
    }
}

@media (max-width: 620px) and (max-height: 520px) {
    .sign-in-transition[b-56rwyaswry] {
        min-height: 286px;
        gap: 18px;
        margin: 12px auto;
        padding: 24px 20px 22px;
    }

    .transition-mark[b-56rwyaswry] {
        width: 72px;
        height: 72px;
    }

    .transition-check[b-56rwyaswry] {
        width: 46px;
        height: 46px;
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sign-in-transition[b-56rwyaswry],
    .sign-in-transition[b-56rwyaswry]::before,
    .sign-in-transition[b-56rwyaswry]::after,
    .transition-ring[b-56rwyaswry],
    .transition-ring[b-56rwyaswry]::before,
    .transition-ring[b-56rwyaswry]::after,
    .transition-check[b-56rwyaswry],
    .transition-progress span[b-56rwyaswry] {
        animation: none;
    }

    .transition-progress span[b-56rwyaswry] {
        transform: none;
    }
}
/* /Components/Account/Pages/SignOutTransition.razor.rz.scp.css */
.sign-out-transition[b-stqsxzifc4] {
    position: relative;
    display: flex;
    width: min(520px, 100%);
    min-height: 370px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 24px;
    padding: 54px 48px 42px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 30px;
    color: #06223f;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .8), rgba(238, 249, 255, .6)),
        linear-gradient(180deg, rgba(255, 255, 255, .36), rgba(255, 255, 255, .14));
    box-shadow:
        0 42px 110px rgba(5, 64, 108, .22),
        0 14px 36px rgba(20, 126, 196, .11),
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 0 0 1px rgba(87, 168, 220, .08);
    backdrop-filter: blur(28px) saturate(1.2);
    -webkit-user-select: none;
    user-select: none;
    animation: signOutPanelEnter-b-stqsxzifc4 520ms cubic-bezier(.22, 1, .36, 1) both;
}

.sign-out-transition[b-stqsxzifc4]::before,
.sign-out-transition[b-stqsxzifc4]::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.sign-out-transition[b-stqsxzifc4]::before {
    inset: -30%;
    background:
        radial-gradient(circle at 50% 14%, rgba(88, 209, 228, .2), transparent 30%),
        url("/images/login/bio-microorganism-field.png");
    background-position: center;
    background-size: cover;
    opacity: .08;
    filter: blur(10px) saturate(.9);
    animation: signOutMicrobeDrift-b-stqsxzifc4 18s ease-in-out infinite alternate;
}

.sign-out-transition[b-stqsxzifc4]::after {
    top: -42%;
    left: -58%;
    width: 92%;
    height: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
    filter: blur(10px);
    transform: rotate(18deg);
    animation: signOutSweep-b-stqsxzifc4 7s ease-in-out infinite;
}

.sign-out-transition > *[b-stqsxzifc4] {
    position: relative;
    z-index: 1;
}

.sign-out-mark[b-stqsxzifc4] {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
}

.sign-out-ring[b-stqsxzifc4],
.sign-out-ring[b-stqsxzifc4]::before,
.sign-out-ring[b-stqsxzifc4]::after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

.sign-out-ring[b-stqsxzifc4] {
    inset: 0;
    border: 2px solid rgba(8, 120, 215, .16);
    border-top-color: #0878d7;
    border-right-color: #58d1e4;
    box-shadow: 0 0 34px rgba(31, 159, 237, .16);
    animation: signOutRingSpin-b-stqsxzifc4 1.55s linear infinite;
}

.sign-out-ring[b-stqsxzifc4]::before {
    inset: 9px;
    border: 1px solid rgba(8, 120, 215, .18);
    border-bottom-color: rgba(8, 120, 215, .56);
    animation: signOutRingSpin-b-stqsxzifc4 2.3s linear infinite reverse;
}

.sign-out-ring[b-stqsxzifc4]::after {
    inset: -8px;
    border: 1px solid rgba(88, 209, 228, .18);
    opacity: .7;
    animation: signOutPulse-b-stqsxzifc4 2.4s ease-out infinite;
}

.sign-out-icon[b-stqsxzifc4] {
    display: grid;
    width: 56px;
    height: 56px;
    place-items: center;
    border: 1px solid rgba(8, 120, 215, .42);
    border-radius: 50%;
    color: #f1f9ff;
    background: linear-gradient(145deg, #1f9fed, #075fba);
    box-shadow: 0 16px 34px rgba(8, 120, 215, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
    transform: scale(.84);
    animation: signOutIconPulse-b-stqsxzifc4 1.9s ease-in-out infinite;
}

.sign-out-icon svg[b-stqsxzifc4] {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.9;
}

.sign-out-copy[b-stqsxzifc4] {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.sign-out-copy span[b-stqsxzifc4] {
    color: #0878d7;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.sign-out-copy strong[b-stqsxzifc4] {
    color: #082f5d;
    font-size: clamp(25px, 2vw, 31px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.14;
}

.sign-out-progress[b-stqsxzifc4] {
    width: min(310px, 88%);
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(78, 136, 184, .15);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.sign-out-progress span[b-stqsxzifc4] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0878d7, #1f9fed, #58d1e4);
    box-shadow: 0 0 18px rgba(31, 159, 237, .32);
    transform: scaleX(0);
    transform-origin: left;
    animation: signOutProgressFill-b-stqsxzifc4 var(--transition-duration, 3s) linear forwards;
}

.sign-out-fallback[b-stqsxzifc4] {
    color: rgba(25, 78, 120, .62);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    opacity: .8;
    transition: color 160ms ease, opacity 160ms ease;
}

.sign-out-fallback:hover[b-stqsxzifc4] {
    color: #075fae;
    opacity: 1;
}

@keyframes signOutPanelEnter-b-stqsxzifc4 {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.982);
    }

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

@keyframes signOutMicrobeDrift-b-stqsxzifc4 {
    from {
        transform: translate3d(18px, 10px, 0) scale(1.04);
    }

    to {
        transform: translate3d(-20px, -16px, 0) scale(1.12);
    }
}

@keyframes signOutSweep-b-stqsxzifc4 {
    0%, 16% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(18deg);
    }

    34% {
        opacity: .86;
    }

    64%, 100% {
        opacity: 0;
        transform: translate3d(190%, 620%, 0) rotate(18deg);
    }
}

@keyframes signOutRingSpin-b-stqsxzifc4 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes signOutPulse-b-stqsxzifc4 {
    from {
        opacity: .58;
        transform: scale(.82);
    }

    to {
        opacity: 0;
        transform: scale(1.28);
    }
}

@keyframes signOutIconPulse-b-stqsxzifc4 {
    0%, 100% {
        transform: scale(.96);
    }

    50% {
        transform: scale(1.04);
    }
}

@keyframes signOutProgressFill-b-stqsxzifc4 {
    to {
        transform: scaleX(1);
    }
}

@media (max-width: 620px) {
    .sign-out-transition[b-stqsxzifc4] {
        box-sizing: border-box;
        width: min(420px, calc(100% - 24px));
        max-width: 420px;
        min-width: 0;
        min-height: 330px;
        margin: clamp(16px, 6svh, 52px) auto 24px;
        padding: 38px 22px 32px;
        border-radius: 24px;
        backdrop-filter: none;
    }

    .sign-out-copy[b-stqsxzifc4],
    .sign-out-progress[b-stqsxzifc4] {
        min-width: 0;
        max-width: 100%;
    }

    .sign-out-copy strong[b-stqsxzifc4] {
        max-width: 100%;
        font-size: clamp(21px, 6.2vw, 24px);
        overflow-wrap: break-word;
        text-wrap: balance;
    }

    .sign-out-progress[b-stqsxzifc4] {
        width: min(310px, 100%);
    }
}

@media (max-width: 360px) {
    .sign-out-transition[b-stqsxzifc4] {
        min-height: 310px;
        gap: 20px;
        padding: 32px 18px 28px;
        border-radius: 20px;
    }

    .sign-out-mark[b-stqsxzifc4] {
        width: 82px;
        height: 82px;
    }

    .sign-out-icon[b-stqsxzifc4] {
        width: 50px;
        height: 50px;
    }

    .sign-out-icon svg[b-stqsxzifc4] {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 620px) and (max-height: 520px) {
    .sign-out-transition[b-stqsxzifc4] {
        min-height: 286px;
        gap: 18px;
        margin: 12px auto;
        padding: 24px 20px 22px;
    }

    .sign-out-mark[b-stqsxzifc4] {
        width: 72px;
        height: 72px;
    }

    .sign-out-icon[b-stqsxzifc4] {
        width: 46px;
        height: 46px;
    }

    .sign-out-icon svg[b-stqsxzifc4] {
        width: 23px;
        height: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sign-out-transition[b-stqsxzifc4],
    .sign-out-transition[b-stqsxzifc4]::before,
    .sign-out-transition[b-stqsxzifc4]::after,
    .sign-out-ring[b-stqsxzifc4],
    .sign-out-ring[b-stqsxzifc4]::before,
    .sign-out-ring[b-stqsxzifc4]::after,
    .sign-out-icon[b-stqsxzifc4],
    .sign-out-progress span[b-stqsxzifc4] {
        animation: none;
    }

    .sign-out-progress span[b-stqsxzifc4] {
        transform: none;
    }
}
/* /Components/Account/Profile/AccountProfileDialog.razor.rz.scp.css */
.account-profile-host[b-i88bznwtdh],
.account-profile-host[b-i88bznwtdh]  *,
.account-profile-host[b-i88bznwtdh]  *::before,
.account-profile-host[b-i88bznwtdh]  *::after {
    box-sizing: border-box;
}

.account-profile-host[b-i88bznwtdh] {
    --account-bg: #081729;
    --account-panel: #0d2038;
    --account-panel-strong: #12294a;
    --account-border: rgba(86, 179, 244, .32);
    --account-border-soft: rgba(121, 170, 220, .16);
    --account-text: #eef7ff;
    --account-muted: #93aac6;
    --account-input: rgba(5, 17, 35, .68);
    --account-input-border: rgba(119, 169, 219, .26);
    --account-primary: #2b8ef6;
    --account-primary-hover: #55a9ff;
    --account-success: #4fd68f;
    --account-warning: #ffc069;
    --account-danger: #ff8e9c;
    --account-shadow: 0 40px 120px rgba(0, 6, 22, .74), 0 0 50px rgba(26, 118, 231, .12);
    --account-card-shadow: 0 16px 40px rgba(1, 8, 21, .22);
    --account-avatar-shadow: 0 22px 46px rgba(65, 73, 211, .3);
    --account-avatar-glow-opacity: 1;
    --account-role-color: #92c9ff;
    --account-role-bg: rgba(35, 118, 215, .12);
    --account-shield-stroke: #64b2ff;
    --account-shield-filter: drop-shadow(0 8px 14px rgba(24, 112, 230, .3));
    --account-shield-bg: radial-gradient(circle, rgba(33, 119, 226, .16), rgba(9, 39, 76, .06) 66%, transparent 67%);
    --account-icon-muted: #6f8cad;
    --account-chip-bg: rgba(24, 66, 118, .34);
    position: fixed;
    z-index: 9000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    color: var(--account-text);
    background: rgba(1, 8, 22, .66);
    backdrop-filter: blur(11px) saturate(.92);
    -webkit-backdrop-filter: blur(11px) saturate(.92);
    isolation: isolate;
    animation: accountBackdropIn-b-i88bznwtdh .2s ease-out both;
}

.account-profile-host.theme-light[b-i88bznwtdh] {
    --account-bg: #f5f8fc;
    --account-panel: #ffffff;
    --account-panel-strong: #f4f8fe;
    --account-border: rgba(46, 116, 184, .26);
    --account-border-soft: rgba(61, 93, 131, .15);
    --account-text: #10243e;
    --account-muted: #5c6f85;
    --account-input: #fafcff;
    --account-input-border: #ccd8e6;
    --account-primary: #1273d3;
    --account-primary-hover: #0d63b7;
    --account-success: #14834e;
    --account-warning: #b06a12;
    --account-danger: #bb3d4e;
    --account-shadow: 0 26px 70px rgba(32, 58, 88, .22), 0 4px 18px rgba(32, 58, 88, .08);
    --account-card-shadow: 0 10px 26px rgba(32, 58, 88, .08);
    --account-avatar-shadow: 0 14px 28px rgba(62, 79, 174, .16);
    --account-avatar-glow-opacity: .4;
    --account-role-color: #17639f;
    --account-role-bg: #ecf5ff;
    --account-shield-stroke: #1472c8;
    --account-shield-filter: drop-shadow(0 6px 9px rgba(24, 112, 200, .16));
    --account-shield-bg: radial-gradient(circle, rgba(36, 125, 218, .1), transparent 68%);
    --account-icon-muted: #7d92aa;
    --account-chip-bg: #eef4fb;
    background: rgba(216, 223, 232, .68);
    backdrop-filter: blur(11px) saturate(.85);
    -webkit-backdrop-filter: blur(11px) saturate(.85);
}

.account-profile-dialog[b-i88bznwtdh] {
    position: relative;
    display: grid;
    grid-template-rows: auto auto minmax(0, 1fr);
    width: min(1120px, calc(100vw - 56px));
    height: min(742px, 88dvh);
    overflow: hidden;
    border: 1px solid var(--account-border);
    border-radius: 24px;
    outline: none;
    background:
        radial-gradient(circle at 88% 0%, rgba(38, 133, 245, .13), transparent 26%),
        radial-gradient(circle at 4% 100%, rgba(96, 74, 218, .1), transparent 30%),
        var(--account-bg);
    box-shadow: var(--account-shadow);
    animation: accountDialogIn-b-i88bznwtdh .26s cubic-bezier(.2, .85, .25, 1) both;
}

.theme-light .account-profile-dialog[b-i88bznwtdh] {
    background:
        radial-gradient(circle at 88% 0%, rgba(62, 143, 222, .09), transparent 28%),
        radial-gradient(circle at 4% 100%, rgba(96, 74, 218, .05), transparent 30%),
        var(--account-bg);
}

.dialog-accent-line[b-i88bznwtdh] {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 4%,
        rgba(43, 142, 246, .85) 30%,
        rgba(129, 108, 245, .85) 55%,
        rgba(43, 142, 246, .55) 78%,
        transparent 96%);
    background-size: 220% 100%;
    animation: accentSlide-b-i88bznwtdh 9s linear infinite;
    pointer-events: none;
}

.dialog-glow-orb[b-i88bznwtdh] {
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(52px);
    opacity: .5;
    pointer-events: none;
}

.orb-one[b-i88bznwtdh] {
    top: -70px;
    right: -50px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(43, 142, 246, .3), transparent 68%);
    animation: orbDrift-b-i88bznwtdh 12s ease-in-out infinite alternate;
}

.orb-two[b-i88bznwtdh] {
    bottom: -90px;
    left: -60px;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(116, 84, 235, .22), transparent 68%);
    animation: orbDrift-b-i88bznwtdh 14s ease-in-out infinite alternate-reverse;
}

.theme-light .dialog-glow-orb[b-i88bznwtdh] {
    opacity: .2;
}

.dialog-header[b-i88bznwtdh] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 26px 28px 18px;
}

.dialog-title-group[b-i88bznwtdh] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0;
}

.dialog-emblem[b-i88bznwtdh] {
    display: grid;
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(118, 180, 250, .4);
    border-radius: 16px;
    color: #eaf5ff;
    background: linear-gradient(150deg, #2a5cb8, #6b46cd 62%, #2087cb);
    box-shadow: 0 12px 26px rgba(53, 96, 214, .32), inset 0 1px 0 rgba(255, 255, 255, .22);
    animation: emblemPop-b-i88bznwtdh .45s cubic-bezier(.3, 1.4, .45, 1) both .08s;
}

.theme-light .dialog-emblem[b-i88bznwtdh] {
    box-shadow: 0 10px 22px rgba(53, 96, 214, .22), inset 0 1px 0 rgba(255, 255, 255, .3);
}

.dialog-emblem svg[b-i88bznwtdh] {
    width: 25px;
    height: 25px;
}

.dialog-title-copy[b-i88bznwtdh] {
    min-width: 0;
}

.dialog-title-copy h2[b-i88bznwtdh] {
    margin: 2px 0 3px;
    color: var(--account-text);
    font-size: clamp(23px, 2.3vw, 29px);
    font-weight: 760;
    letter-spacing: -.035em;
}

.dialog-title-copy p[b-i88bznwtdh] {
    margin: 0;
    color: var(--account-muted);
    font-size: 12.5px;
}

.dialog-kicker[b-i88bznwtdh] {
    color: var(--account-primary-hover);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .17em;
    text-transform: uppercase;
}

.dialog-close-button[b-i88bznwtdh] {
    display: grid;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--account-border-soft);
    border-radius: 12px;
    color: var(--account-muted);
    background: var(--account-panel);
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.dialog-close-button:hover[b-i88bznwtdh] {
    border-color: rgba(255, 128, 146, .5);
    color: #ff9daa;
    background: var(--account-panel-strong);
    transform: rotate(90deg);
    box-shadow: 0 6px 16px rgba(190, 60, 80, .18);
}

.theme-light .dialog-close-button:hover[b-i88bznwtdh] {
    color: #bb3d4e;
}

.dialog-close-button svg[b-i88bznwtdh] {
    width: 18px;
    height: 18px;
}

/* ---- Segmented tabs with sliding indicator ---- */

.account-tabs[b-i88bznwtdh] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: fit-content;
    min-width: 420px;
    margin: 0 28px 18px;
    padding: 5px;
    border: 1px solid var(--account-border-soft);
    border-radius: 15px;
    background: color-mix(in srgb, var(--account-panel) 78%, transparent);
    box-shadow: inset 0 1px 4px rgba(0, 8, 20, .18);
}

.theme-light .account-tabs[b-i88bznwtdh] {
    box-shadow: inset 0 1px 4px rgba(32, 58, 88, .07);
}

.tab-indicator[b-i88bznwtdh] {
    position: absolute;
    z-index: 0;
    top: 5px;
    bottom: 5px;
    left: 5px;
    width: calc(50% - 5px);
    border: 1px solid color-mix(in srgb, var(--account-primary) 55%, transparent);
    border-radius: 11px;
    background: linear-gradient(160deg,
        color-mix(in srgb, var(--account-primary) 26%, var(--account-panel-strong)),
        color-mix(in srgb, var(--account-primary) 12%, var(--account-panel-strong)));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--account-primary) 26%, transparent);
    transition: transform .32s cubic-bezier(.35, 1.1, .35, 1);
    will-change: transform;
}

.account-tabs.security-active .tab-indicator[b-i88bznwtdh] {
    transform: translateX(100%);
}

.account-tabs button[b-i88bznwtdh] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 20px;
    border: 0;
    border-radius: 11px;
    color: var(--account-muted);
    background: transparent;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .22s ease;
}

.account-tabs button:hover[b-i88bznwtdh] {
    color: var(--account-text);
}

.account-tabs button.is-active[b-i88bznwtdh] {
    color: var(--account-text);
}

.tab-icon[b-i88bznwtdh] {
    display: grid;
    width: 20px;
    height: 20px;
    place-items: center;
    color: var(--account-icon-muted);
    transition: color .22s ease, transform .3s cubic-bezier(.3, 1.4, .45, 1);
}

.tab-icon svg[b-i88bznwtdh] {
    width: 19px;
    height: 19px;
}

.account-tabs button:hover .tab-icon[b-i88bznwtdh] {
    transform: translateY(-1px);
}

.is-active .tab-icon[b-i88bznwtdh] {
    color: var(--account-primary-hover);
    transform: scale(1.08);
}

.theme-light .is-active .tab-icon[b-i88bznwtdh] {
    color: var(--account-primary);
}

/* ---- Content and animated tab panels ---- */

.dialog-content[b-i88bznwtdh] {
    position: relative;
    z-index: 1;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 4px 28px 28px;
    scrollbar-color: var(--account-border) transparent;
    scrollbar-width: thin;
}

.account-tab-panel[b-i88bznwtdh] {
    min-height: 100%;
    animation: tabPanelIn-b-i88bznwtdh .34s cubic-bezier(.25, .85, .3, 1) both;
}

.account-tab-panel[hidden][b-i88bznwtdh] {
    display: none;
}

.dialog-loading[b-i88bznwtdh],
.dialog-load-error[b-i88bznwtdh] {
    display: grid;
    min-height: 100%;
    place-items: center;
    align-content: center;
    gap: 12px;
    color: var(--account-muted);
    text-align: center;
}

.dialog-loading strong[b-i88bznwtdh],
.dialog-load-error strong[b-i88bznwtdh] {
    color: var(--account-text);
}

.dialog-load-error span[b-i88bznwtdh] {
    max-width: 520px;
    font-size: 13px;
    line-height: 1.55;
}

.loading-orbit[b-i88bznwtdh] {
    position: relative;
    width: 38px;
    height: 38px;
    border: 3px solid var(--account-border-soft);
    border-top-color: var(--account-primary);
    border-radius: 50%;
    animation: accountSpin-b-i88bznwtdh .8s linear infinite;
}

/* ---- Discard confirmation ---- */

.discard-confirmation-backdrop[b-i88bznwtdh] {
    position: absolute;
    z-index: 5;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    border-radius: inherit;
    background: rgba(3, 10, 23, .72);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    animation: accountBackdropIn-b-i88bznwtdh .18s ease-out both;
}

.theme-light .discard-confirmation-backdrop[b-i88bznwtdh] {
    background: rgba(224, 229, 236, .78);
}

.discard-confirmation[b-i88bznwtdh] {
    display: grid;
    grid-template-columns: auto 1fr;
    width: min(478px, 100%);
    gap: 14px 16px;
    padding: 22px;
    border: 1px solid var(--account-border);
    border-radius: 18px;
    background: var(--account-panel);
    box-shadow: var(--account-shadow);
    animation: accountDialogIn-b-i88bznwtdh .22s cubic-bezier(.2, .85, .25, 1) both;
}

.discard-confirmation h3[b-i88bznwtdh] {
    margin: 0 0 5px;
    color: var(--account-text);
    font-size: 17px;
}

.discard-confirmation p[b-i88bznwtdh] {
    margin: 0;
    color: var(--account-muted);
    font-size: 13px;
    line-height: 1.5;
}

.discard-icon[b-i88bznwtdh] {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(255, 177, 76, .4);
    border-radius: 13px;
    color: #ffca7a;
    background: rgba(221, 139, 33, .13);
    animation: discardPulse-b-i88bznwtdh 2.2s ease-in-out infinite;
}

.theme-light .discard-icon[b-i88bznwtdh] {
    color: #b06a12;
    background: #fdf3e3;
}

.discard-icon svg[b-i88bznwtdh] {
    width: 22px;
    height: 22px;
}

.discard-actions[b-i88bznwtdh] {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 10px;
    padding-top: 4px;
}

.secondary-action[b-i88bznwtdh],
.danger-action[b-i88bznwtdh] {
    min-height: 38px;
    padding: 0 15px;
    border: 1px solid var(--account-border-soft);
    border-radius: 10px;
    color: var(--account-text);
    background: var(--account-panel-strong);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.secondary-action:hover[b-i88bznwtdh] {
    border-color: var(--account-border);
    transform: translateY(-1px);
}

.danger-action[b-i88bznwtdh] {
    border-color: rgba(238, 91, 111, .42);
    color: #fff;
    background: #bd4051;
    box-shadow: 0 8px 18px rgba(189, 64, 81, .26);
}

.danger-action:hover[b-i88bznwtdh] {
    background: #cf4a5c;
    transform: translateY(-1px);
}

.account-profile-dialog :is(button, input):focus-visible[b-i88bznwtdh] {
    outline: 3px solid color-mix(in srgb, var(--account-primary) 42%, transparent);
    outline-offset: 2px;
}

@keyframes accountBackdropIn-b-i88bznwtdh {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes accountDialogIn-b-i88bznwtdh {
    from { opacity: 0; transform: translateY(14px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes accountSpin-b-i88bznwtdh {
    to { transform: rotate(360deg); }
}

@keyframes accentSlide-b-i88bznwtdh {
    from { background-position: 0% 0; }
    to { background-position: 220% 0; }
}

@keyframes orbDrift-b-i88bznwtdh {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(26px, 18px, 0) scale(1.12); }
}

@keyframes emblemPop-b-i88bznwtdh {
    from { opacity: 0; transform: scale(.7) rotate(-8deg); }
    to { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes tabPanelIn-b-i88bznwtdh {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes discardPulse-b-i88bznwtdh {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 177, 76, .32); }
    50% { box-shadow: 0 0 0 9px rgba(255, 177, 76, 0); }
}

@media (max-width: 960px) {
    .account-profile-dialog[b-i88bznwtdh] {
        height: min(820px, 92dvh);
    }
}

@media (max-width: 760px) {
    .account-profile-host[b-i88bznwtdh] {
        align-items: stretch;
        padding: 10px;
    }

    .account-profile-dialog[b-i88bznwtdh] {
        width: 100%;
        height: calc(100dvh - 20px);
        border-radius: 18px;
    }

    .dialog-header[b-i88bznwtdh] {
        padding: 18px 18px 13px;
    }

    .dialog-emblem[b-i88bznwtdh] {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }

    .dialog-title-copy p[b-i88bznwtdh] {
        display: none;
    }

    .account-tabs[b-i88bznwtdh] {
        width: auto;
        min-width: 0;
        margin: 0 14px 14px;
    }

    .account-tabs button[b-i88bznwtdh] {
        min-width: 0;
        padding: 0 8px;
        font-size: 11.5px;
    }

    .tab-icon[b-i88bznwtdh] {
        display: none;
    }

    .dialog-content[b-i88bznwtdh] {
        padding: 2px 16px 16px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-profile-host[b-i88bznwtdh],
    .account-profile-dialog[b-i88bznwtdh],
    .loading-orbit[b-i88bznwtdh],
    .account-profile-host *[b-i88bznwtdh] {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Account/Profile/PasswordSecurityTab.razor.rz.scp.css */
.password-tab-layout[b-2i8wf89wsj] {
    display: grid;
    grid-template-columns: minmax(252px, .78fr) minmax(0, 1.85fr);
    gap: 16px;
    min-height: 100%;
    align-items: stretch;
}

.security-card[b-2i8wf89wsj],
.password-card[b-2i8wf89wsj] {
    border: 1px solid var(--account-border-soft);
    border-radius: 18px;
    background: var(--account-panel);
    box-shadow: var(--account-card-shadow);
}

.security-card[b-2i8wf89wsj] {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 22px 22px 20px;
    text-align: center;
    animation: cardRiseIn-b-2i8wf89wsj .4s cubic-bezier(.25, .85, .3, 1) both;
}

.password-card[b-2i8wf89wsj] {
    padding: 20px 22px;
    animation: cardRiseIn-b-2i8wf89wsj .4s cubic-bezier(.25, .85, .3, 1) both .06s;
}

/* ---- Shield ---- */

.security-shield[b-2i8wf89wsj] {
    position: relative;
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    margin: 0 0 14px;
    border: 1px solid rgba(68, 153, 244, .3);
    border-radius: 50%;
    background: var(--account-shield-bg);
}

.shield-pulse[b-2i8wf89wsj] {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(52, 149, 255, .4);
    border-radius: 50%;
    animation: shieldSonar-b-2i8wf89wsj 3.4s ease-out infinite;
    pointer-events: none;
}

.shield-pulse.pulse-two[b-2i8wf89wsj] {
    animation-delay: 1.7s;
}

.theme-light .shield-pulse[b-2i8wf89wsj] {
    border-color: rgba(20, 114, 200, .3);
}

.security-shield svg[b-2i8wf89wsj] {
    width: 48px;
    overflow: visible;
    fill: rgba(28, 119, 230, .18);
    stroke: var(--account-shield-stroke);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    filter: var(--account-shield-filter);
    animation: shieldBreath-b-2i8wf89wsj 5s ease-in-out infinite;
}

.theme-light .security-shield svg[b-2i8wf89wsj] {
    fill: rgba(28, 119, 230, .08);
}

.section-eyebrow[b-2i8wf89wsj] {
    color: var(--account-primary-hover);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.security-card h3[b-2i8wf89wsj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 6px 0 9px;
    color: var(--account-success);
    font-size: 22px;
}

.security-card h3 svg[b-2i8wf89wsj] {
    width: 19px;
    height: 19px;
}

.security-card > p[b-2i8wf89wsj] {
    margin: 0;
    color: var(--account-muted);
    font-size: 11px;
    line-height: 1.55;
}

/* ---- Security facts ---- */

.security-facts[b-2i8wf89wsj] {
    display: grid;
    width: 100%;
    gap: 4px;
    margin: 25px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--account-border-soft);
    text-align: left;
}

.security-facts > div[b-2i8wf89wsj] {
    padding: 7px 9px;
    border-radius: 10px;
    transition: background .18s ease;
}

.security-facts > div:hover[b-2i8wf89wsj] {
    background: color-mix(in srgb, var(--account-panel-strong) 72%, transparent);
}

.security-facts dt[b-2i8wf89wsj],
.security-facts dd[b-2i8wf89wsj] {
    margin: 0;
    font-size: 10px;
    line-height: 1.45;
}

.security-facts dt[b-2i8wf89wsj] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 4px;
    color: var(--account-muted);
}

.fact-icon[b-2i8wf89wsj] {
    display: grid;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--account-icon-muted);
}

.fact-icon svg[b-2i8wf89wsj] {
    width: 14px;
    height: 14px;
}

.security-facts dd[b-2i8wf89wsj] {
    color: var(--account-text);
    font-weight: 650;
}

/* ---- Password card ---- */

.card-heading[b-2i8wf89wsj] {
    margin-bottom: 12px;
}

.card-heading h3[b-2i8wf89wsj] {
    margin: 3px 0 0;
    color: var(--account-text);
    font-size: 19px;
}

.password-fields[b-2i8wf89wsj] {
    display: grid;
    grid-template-columns: minmax(0, 1.06fr) minmax(260px, .94fr);
    gap: 12px 16px;
}

.account-field[b-2i8wf89wsj] {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--account-text);
    font-size: 11px;
    font-weight: 750;
}

.field-label[b-2i8wf89wsj] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.current-password-field[b-2i8wf89wsj] {
    grid-column: 1;
    grid-row: 1;
}

.new-password-field[b-2i8wf89wsj] {
    grid-column: 1;
    grid-row: 2;
}

.confirm-password-field[b-2i8wf89wsj] {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
}

.password-input-wrap[b-2i8wf89wsj] {
    position: relative;
    display: block;
}

.field-icon[b-2i8wf89wsj] {
    position: absolute;
    top: 50%;
    left: 13px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    color: var(--account-icon-muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color .18s ease;
}

.field-icon svg[b-2i8wf89wsj] {
    display: block;
    width: 17px;
    height: 17px;
    overflow: visible;
}

.password-input-wrap:focus-within .field-icon[b-2i8wf89wsj] {
    color: var(--account-primary-hover);
}

.theme-light .password-input-wrap:focus-within .field-icon[b-2i8wf89wsj] {
    color: var(--account-primary);
}

.password-input-wrap input[b-2i8wf89wsj] {
    box-sizing: border-box;
    width: 100%;
    min-height: 44px;
    padding: 0 52px 0 40px;
    border: 1px solid var(--account-input-border);
    border-radius: 12px;
    outline: 0;
    color: var(--account-text);
    background: var(--account-input);
    font: inherit;
    font-size: 12.5px;
    font-weight: 550;
    letter-spacing: .04em;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.password-input-wrap input:focus[b-2i8wf89wsj] {
    border-color: var(--account-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-primary) 16%, transparent);
}

.password-input-wrap input[aria-invalid="true"][b-2i8wf89wsj] {
    border-color: color-mix(in srgb, var(--account-danger) 65%, var(--account-input-border));
}

.password-input-wrap input[aria-invalid="true"]:focus[b-2i8wf89wsj] {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-danger) 15%, transparent);
}

.password-input-wrap input:-webkit-autofill[b-2i8wf89wsj],
.password-input-wrap input:-webkit-autofill:hover[b-2i8wf89wsj] {
    border-color: var(--account-input-border);
    -webkit-text-fill-color: #eef7ff;
    caret-color: #eef7ff;
    -webkit-box-shadow: 0 0 0 1000px #0a1c33 inset;
    box-shadow: 0 0 0 1000px #0a1c33 inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

.password-input-wrap input:-webkit-autofill:focus[b-2i8wf89wsj] {
    border-color: var(--account-primary);
    -webkit-text-fill-color: #eef7ff;
    caret-color: #eef7ff;
    -webkit-box-shadow:
        0 0 0 3px color-mix(in srgb, var(--account-primary) 16%, transparent),
        0 0 0 1000px #0a1c33 inset;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--account-primary) 16%, transparent),
        0 0 0 1000px #0a1c33 inset;
}

.theme-light .password-input-wrap input:-webkit-autofill[b-2i8wf89wsj],
.theme-light .password-input-wrap input:-webkit-autofill:hover[b-2i8wf89wsj] {
    -webkit-text-fill-color: #10243e;
    caret-color: #10243e;
    -webkit-box-shadow: 0 0 0 1000px #fafcff inset;
    box-shadow: 0 0 0 1000px #fafcff inset;
}

.theme-light .password-input-wrap input:-webkit-autofill:focus[b-2i8wf89wsj] {
    -webkit-text-fill-color: #10243e;
    caret-color: #10243e;
    -webkit-box-shadow:
        0 0 0 3px color-mix(in srgb, var(--account-primary) 16%, transparent),
        0 0 0 1000px #fafcff inset;
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--account-primary) 16%, transparent),
        0 0 0 1000px #fafcff inset;
}

.password-visibility[b-2i8wf89wsj] {
    position: absolute;
    top: 50%;
    right: 7px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--account-icon-muted);
    background: transparent;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}

.password-visibility:hover[b-2i8wf89wsj] {
    border-color: var(--account-border-soft);
    color: var(--account-text);
    background: var(--account-panel-strong);
}

.password-visibility svg[b-2i8wf89wsj] {
    display: block;
    width: 18px;
    height: 18px;
    overflow: visible;
    animation: eyeSwapIn-b-2i8wf89wsj .18s ease-out both;
}

.field-error[b-2i8wf89wsj] {
    color: var(--account-danger);
    font-size: 9.5px;
    font-weight: 550;
    animation: fieldErrorIn-b-2i8wf89wsj .2s ease-out both;
}

/* ---- Strength & requirements ---- */

.password-strength[b-2i8wf89wsj],
.password-requirements[b-2i8wf89wsj] {
    padding: 12px;
    border: 1px solid var(--account-border-soft);
    border-radius: 12px;
    background: color-mix(in srgb, var(--account-input) 75%, transparent);
}

.password-strength[b-2i8wf89wsj] {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    min-height: 82px;
    align-content: start;
    gap: 8px;
}

.password-requirements[b-2i8wf89wsj] {
    grid-column: 2;
    grid-row: 3;
    min-height: 112px;
}

.strength-label[b-2i8wf89wsj],
.password-requirements > strong[b-2i8wf89wsj] {
    color: var(--account-muted);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.strength-track[b-2i8wf89wsj] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
}

.strength-track span[b-2i8wf89wsj] {
    height: 6px;
    border-radius: 999px;
    background: var(--account-border-soft);
    transition: background .3s ease, box-shadow .3s ease;
}

.password-strength[data-level="1"] .strength-track span.is-filled[b-2i8wf89wsj] {
    background: #ff6b81;
    box-shadow: 0 0 8px rgba(255, 107, 129, .42);
}

.password-strength[data-level="2"] .strength-track span.is-filled[b-2i8wf89wsj] {
    background: #ffab5e;
    box-shadow: 0 0 8px rgba(255, 171, 94, .42);
}

.password-strength[data-level="3"] .strength-track span.is-filled[b-2i8wf89wsj] {
    background: #59b6ff;
    box-shadow: 0 0 8px rgba(89, 182, 255, .42);
}

.password-strength[data-level="4"] .strength-track span.is-filled[b-2i8wf89wsj] {
    background: var(--account-success);
    box-shadow: 0 0 9px color-mix(in srgb, var(--account-success) 48%, transparent);
}

.strength-track span.is-filled[b-2i8wf89wsj] {
    animation: strengthFill-b-2i8wf89wsj .32s cubic-bezier(.3, 1.2, .4, 1) both;
}

.strength-value[b-2i8wf89wsj] {
    color: var(--account-text);
    font-size: 12.5px;
    transition: color .3s ease;
}

.password-strength[data-level="1"] .strength-value[b-2i8wf89wsj] { color: #ff8296; }
.password-strength[data-level="2"] .strength-value[b-2i8wf89wsj] { color: #ffb673; }
.password-strength[data-level="3"] .strength-value[b-2i8wf89wsj] { color: #6fbfff; }
.password-strength[data-level="4"] .strength-value[b-2i8wf89wsj] { color: var(--account-success); }

.theme-light .password-strength[data-level="1"] .strength-value[b-2i8wf89wsj] { color: #c14459; }
.theme-light .password-strength[data-level="2"] .strength-value[b-2i8wf89wsj] { color: #ad6516; }
.theme-light .password-strength[data-level="3"] .strength-value[b-2i8wf89wsj] { color: #1273d3; }

.password-requirements ul[b-2i8wf89wsj] {
    display: grid;
    gap: 5px;
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
}

.password-requirements li[b-2i8wf89wsj] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--account-muted);
    font-size: 10px;
    line-height: 1.35;
    transition: color .25s ease;
}

.password-requirements li.is-met[b-2i8wf89wsj] {
    color: var(--account-success);
}

.rule-mark[b-2i8wf89wsj] {
    display: grid;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    place-items: center;
    border: 1.4px solid var(--account-border-soft);
    border-radius: 50%;
    transition: border-color .25s ease, background .25s ease;
}

.is-met .rule-mark[b-2i8wf89wsj] {
    border-color: var(--account-success);
    background: color-mix(in srgb, var(--account-success) 14%, transparent);
}

.rule-mark svg[b-2i8wf89wsj] {
    width: 9px;
    height: 9px;
    animation: ruleCheckIn-b-2i8wf89wsj .28s cubic-bezier(.3, 1.4, .45, 1) both;
}

/* ---- Messages ---- */

.account-message[b-2i8wf89wsj] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 12px;
    padding: 9px 12px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 11.5px;
    line-height: 1.45;
    animation: messageSlideIn-b-2i8wf89wsj .28s cubic-bezier(.25, .85, .3, 1) both;
}

.account-message svg[b-2i8wf89wsj] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.message-lines[b-2i8wf89wsj] {
    display: grid;
    gap: 3px;
}

.account-message.success[b-2i8wf89wsj] {
    border-color: color-mix(in srgb, var(--account-success) 35%, transparent);
    color: var(--account-success);
    background: color-mix(in srgb, var(--account-success) 9%, transparent);
}

.account-message.error[b-2i8wf89wsj] {
    border-color: color-mix(in srgb, var(--account-danger) 35%, transparent);
    color: var(--account-danger);
    background: color-mix(in srgb, var(--account-danger) 8%, transparent);
}

/* ---- Actions ---- */

.tab-actions[b-2i8wf89wsj] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--account-border-soft);
}

.secondary-action[b-2i8wf89wsj],
.primary-action[b-2i8wf89wsj] {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--account-border-soft);
    border-radius: 11px;
    color: var(--account-text);
    background: var(--account-panel-strong);
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.secondary-action:hover:not(:disabled)[b-2i8wf89wsj] {
    border-color: var(--account-border);
    transform: translateY(-1px);
}

.primary-action[b-2i8wf89wsj] {
    min-width: 160px;
    border-color: color-mix(in srgb, var(--account-primary) 65%, transparent);
    color: #fff;
    background: linear-gradient(160deg, var(--account-primary), color-mix(in srgb, var(--account-primary) 68%, #6d4ae0));
    box-shadow: 0 10px 22px rgba(22, 111, 211, .26);
}

.primary-action:hover:not(:disabled)[b-2i8wf89wsj] {
    background: linear-gradient(160deg, var(--account-primary-hover), color-mix(in srgb, var(--account-primary-hover) 68%, #7d5cee));
    transform: translateY(-1px);
    box-shadow: 0 13px 27px rgba(22, 111, 211, .32);
}

.primary-action:active:not(:disabled)[b-2i8wf89wsj] {
    transform: translateY(0);
}

.button-icon[b-2i8wf89wsj] {
    width: 15px;
    height: 15px;
}

.secondary-action:disabled[b-2i8wf89wsj],
.primary-action:disabled[b-2i8wf89wsj] {
    cursor: not-allowed;
    opacity: .46;
    box-shadow: none;
}

.button-spinner[b-2i8wf89wsj] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .36);
    border-top-color: #fff;
    border-radius: 50%;
    animation: passwordButtonSpin-b-2i8wf89wsj .8s linear infinite;
}

@keyframes passwordButtonSpin-b-2i8wf89wsj {
    to { transform: rotate(360deg); }
}

@keyframes cardRiseIn-b-2i8wf89wsj {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes shieldSonar-b-2i8wf89wsj {
    0% { opacity: .55; transform: scale(1); }
    100% { opacity: 0; transform: scale(1.55); }
}

@keyframes shieldBreath-b-2i8wf89wsj {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.035); }
}

@keyframes eyeSwapIn-b-2i8wf89wsj {
    from { opacity: 0; transform: scale(.75); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes strengthFill-b-2i8wf89wsj {
    from { transform: scaleX(.4); transform-origin: left; }
    to { transform: scaleX(1); transform-origin: left; }
}

@keyframes ruleCheckIn-b-2i8wf89wsj {
    from { opacity: 0; transform: scale(.4); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes messageSlideIn-b-2i8wf89wsj {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fieldErrorIn-b-2i8wf89wsj {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
    .password-tab-layout[b-2i8wf89wsj] {
        grid-template-columns: 1fr;
    }

    .security-facts[b-2i8wf89wsj] {
        margin-top: 22px;
    }
}

@media (max-width: 560px) {
    .security-card[b-2i8wf89wsj],
    .password-card[b-2i8wf89wsj] {
        border-radius: 14px;
    }

    .password-card[b-2i8wf89wsj] {
        padding: 18px;
    }

    .password-fields[b-2i8wf89wsj] {
        grid-template-columns: 1fr;
    }

    .current-password-field[b-2i8wf89wsj],
    .new-password-field[b-2i8wf89wsj],
    .confirm-password-field[b-2i8wf89wsj],
    .password-strength[b-2i8wf89wsj],
    .password-requirements[b-2i8wf89wsj] {
        grid-column: auto;
        grid-row: auto;
    }

    .tab-actions[b-2i8wf89wsj] {
        position: sticky;
        bottom: -16px;
        margin-right: -18px;
        margin-left: -18px;
        padding: 14px 18px 16px;
        background: var(--account-panel);
    }

    .tab-actions button[b-2i8wf89wsj] {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .password-tab-layout *[b-2i8wf89wsj] {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Account/Profile/ProfileTab.razor.rz.scp.css */
.profile-tab-layout[b-c7n9zhfm4n] {
    display: grid;
    grid-template-columns: minmax(252px, .78fr) minmax(0, 1.85fr);
    gap: 20px;
    min-height: 100%;
    align-items: stretch;
}

.identity-card[b-c7n9zhfm4n],
.details-card[b-c7n9zhfm4n] {
    border: 1px solid var(--account-border-soft);
    border-radius: 18px;
    background: var(--account-panel);
    box-shadow: var(--account-card-shadow);
}

.identity-card[b-c7n9zhfm4n] {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 32px 24px 24px;
    text-align: center;
    animation: cardRiseIn-b-c7n9zhfm4n .4s cubic-bezier(.25, .85, .3, 1) both;
}

.details-card[b-c7n9zhfm4n] {
    padding: 24px;
    animation: cardRiseIn-b-c7n9zhfm4n .4s cubic-bezier(.25, .85, .3, 1) both .06s;
}

/* ---- Avatar ---- */

.avatar-stage[b-c7n9zhfm4n] {
    position: relative;
    margin: 4px 0 20px;
    isolation: isolate;
    animation: avatarStageIn-b-c7n9zhfm4n .62s cubic-bezier(.2, .9, .28, 1.18) both .08s;
}

.avatar-ring[b-c7n9zhfm4n] {
    position: absolute;
    inset: -9px;
    border-radius: 40px;
    background: conic-gradient(from 140deg,
        rgba(43, 142, 246, .0) 0deg,
        rgba(43, 142, 246, .75) 110deg,
        rgba(132, 94, 247, .75) 210deg,
        rgba(43, 142, 246, 0) 320deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2px));
    animation: avatarRingSpin-b-c7n9zhfm4n 11s linear infinite;
    opacity: .78;
    filter: drop-shadow(0 0 7px rgba(74, 155, 255, .22));
}

.avatar-ring[b-c7n9zhfm4n]::after {
    position: absolute;
    top: 7px;
    right: 13px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #83d1ff;
    box-shadow: 0 0 0 3px rgba(89, 172, 255, .1), 0 0 10px rgba(100, 190, 255, .8);
    content: "";
}

.theme-light .avatar-ring[b-c7n9zhfm4n] {
    opacity: .55;
}

.profile-avatar[b-c7n9zhfm4n] {
    position: relative;
    display: grid;
    width: 108px;
    height: 108px;
    place-items: center;
    border: 1px solid rgba(118, 193, 255, .44);
    border-radius: 34px;
    color: #f5fbff;
    background: linear-gradient(145deg, #2752ae, #6a3ec5 58%, #1e88c7);
    box-shadow: var(--account-avatar-shadow), inset 0 1px 0 rgba(255, 255, 255, .22);
    isolation: isolate;
    animation: avatarBreath-b-c7n9zhfm4n 6.2s ease-in-out infinite;
}

.profile-avatar[b-c7n9zhfm4n]::before {
    position: absolute;
    z-index: -1;
    inset: -18px;
    border-radius: 45%;
    background: radial-gradient(circle, rgba(92, 84, 240, .35), transparent 68%);
    content: "";
    filter: blur(10px);
    opacity: var(--account-avatar-glow-opacity);
}

.profile-avatar[b-c7n9zhfm4n]::after {
    position: absolute;
    z-index: 0;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 25%, rgba(255, 255, 255, .22) 46%, transparent 67%);
    background-position: 155% 0;
    background-size: 240% 100%;
    content: "";
    pointer-events: none;
    animation: avatarLightSweep-b-c7n9zhfm4n 6.8s cubic-bezier(.35, 0, .2, 1) infinite 1.2s;
}

.profile-avatar.external-glow[b-c7n9zhfm4n] {
    background: linear-gradient(145deg, #126d8f, #207f9b 56%, #2560a8);
}

.profile-avatar.standard-glow[b-c7n9zhfm4n] {
    background: linear-gradient(145deg, #245fa2, #307cbb 58%, #2757a6);
}

.profile-avatar span[b-c7n9zhfm4n] {
    position: relative;
    z-index: 1;
    font-size: 31px;
    font-weight: 800;
    letter-spacing: .035em;
    text-shadow: 0 2px 9px rgba(5, 15, 45, .28);
    animation: avatarInitialsIn-b-c7n9zhfm4n .55s cubic-bezier(.2, .9, .25, 1.15) both .22s;
}

.avatar-status-dot[b-c7n9zhfm4n] {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 20px;
    height: 20px;
    border: 3px solid var(--account-panel);
    border-radius: 50%;
    background: #8a97a8;
    transition: background .25s ease, box-shadow .25s ease;
}

.avatar-status-dot.is-loading[b-c7n9zhfm4n] {
    background: #8a97a8;
    opacity: .7;
}

.avatar-status-dot.is-available[b-c7n9zhfm4n] {
    background: #25bd78;
    box-shadow: 0 0 12px rgba(37, 189, 120, .55);
    animation: statusDotPulse-b-c7n9zhfm4n 2.6s ease-in-out infinite;
}

.avatar-status-dot.is-brb[b-c7n9zhfm4n] {
    background: #d99322;
    box-shadow: 0 0 12px rgba(217, 147, 34, .5);
}

.avatar-status-dot.is-dnd[b-c7n9zhfm4n] {
    background: #e5484d;
    box-shadow: 0 0 12px rgba(229, 72, 77, .5);
}

.avatar-status-dot.is-invisible[b-c7n9zhfm4n] {
    background: #8a97a8;
    box-shadow: 0 0 8px rgba(138, 151, 168, .4);
}

.avatar-status-dot.is-blocked[b-c7n9zhfm4n] {
    background: var(--account-danger);
    box-shadow: 0 0 12px color-mix(in srgb, var(--account-danger) 65%, transparent);
}

/* ---- Identity heading ---- */

.identity-heading h3[b-c7n9zhfm4n] {
    margin: 0 0 10px;
    color: var(--account-text);
    font-size: 19px;
    line-height: 1.2;
}

.role-badge[b-c7n9zhfm4n] {
    display: inline-flex;
    min-height: 26px;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border: 1px solid rgba(100, 164, 241, .28);
    border-radius: 999px;
    color: var(--account-role-color);
    background: var(--account-role-bg);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.role-badge svg[b-c7n9zhfm4n] {
    width: 12px;
    height: 12px;
}

/* ---- Identity facts ---- */

.identity-facts[b-c7n9zhfm4n] {
    display: grid;
    width: 100%;
    gap: 2px;
    margin: auto 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--account-border-soft);
    text-align: left;
}

.identity-facts > div[b-c7n9zhfm4n] {
    display: grid;
    grid-template-columns: minmax(112px, .9fr) 1fr;
    align-items: center;
    gap: 12px;
    padding: 8px 9px;
    border-radius: 10px;
    transition: background .18s ease;
}

.identity-facts > div:hover[b-c7n9zhfm4n] {
    background: color-mix(in srgb, var(--account-panel-strong) 72%, transparent);
}

.identity-facts dt[b-c7n9zhfm4n],
.identity-facts dd[b-c7n9zhfm4n] {
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
}

.identity-facts dt[b-c7n9zhfm4n] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--account-muted);
}

.fact-icon[b-c7n9zhfm4n] {
    display: grid;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    place-items: center;
    color: var(--account-icon-muted);
}

.fact-icon svg[b-c7n9zhfm4n] {
    width: 15px;
    height: 15px;
}

.identity-facts dd[b-c7n9zhfm4n] {
    color: var(--account-text);
    font-weight: 700;
    text-align: right;
    overflow-wrap: anywhere;
}

.identity-facts dd.account-status[b-c7n9zhfm4n] {
    display: inline-flex;
    justify-content: flex-end;
    align-items: center;
    gap: 6px;
    color: var(--account-success);
}

.account-status span[b-c7n9zhfm4n] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.identity-facts dd.is-blocked[b-c7n9zhfm4n] {
    color: var(--account-danger);
}

/* ---- Details card ---- */

.card-heading[b-c7n9zhfm4n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.section-eyebrow[b-c7n9zhfm4n] {
    color: var(--account-primary-hover);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.card-heading h3[b-c7n9zhfm4n] {
    margin: 3px 0 0;
    color: var(--account-text);
    font-size: 19px;
}

.read-only-note[b-c7n9zhfm4n] {
    display: inline-flex;
    max-width: 260px;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border: 1px solid var(--account-border-soft);
    border-radius: 999px;
    color: var(--account-muted);
    background: var(--account-chip-bg);
    font-size: 10px;
    line-height: 1.35;
}

.read-only-note svg[b-c7n9zhfm4n] {
    width: 12px;
    height: 12px;
    flex: 0 0 auto;
}

/* ---- Fields ---- */

.details-grid[b-c7n9zhfm4n] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
}

.account-field[b-c7n9zhfm4n] {
    display: grid;
    gap: 7px;
    min-width: 0;
    color: var(--account-text);
    font-size: 11px;
    font-weight: 750;
}

.field-label[b-c7n9zhfm4n] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.editable-chip[b-c7n9zhfm4n] {
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border: 1px solid color-mix(in srgb, var(--account-primary) 42%, transparent);
    border-radius: 999px;
    color: var(--account-primary-hover);
    background: color-mix(in srgb, var(--account-primary) 11%, transparent);
    font-size: 8.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.theme-light .editable-chip[b-c7n9zhfm4n] {
    color: var(--account-primary);
}

.input-shell[b-c7n9zhfm4n] {
    position: relative;
    display: block;
}

.field-icon[b-c7n9zhfm4n] {
    position: absolute;
    top: 50%;
    left: 13px;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    color: var(--account-icon-muted);
    pointer-events: none;
    transform: translateY(-50%);
    transition: color .18s ease;
}

.field-icon svg[b-c7n9zhfm4n] {
    width: 17px;
    height: 17px;
}

.input-shell:focus-within .field-icon[b-c7n9zhfm4n] {
    color: var(--account-primary-hover);
}

.theme-light .input-shell:focus-within .field-icon[b-c7n9zhfm4n] {
    color: var(--account-primary);
}

.lock-icon[b-c7n9zhfm4n] {
    position: absolute;
    top: 50%;
    right: 12px;
    display: grid;
    width: 14px;
    height: 14px;
    place-items: center;
    color: var(--account-icon-muted);
    opacity: .75;
    pointer-events: none;
    transform: translateY(-50%);
}

.lock-icon svg[b-c7n9zhfm4n] {
    width: 14px;
    height: 14px;
}

.account-field input[b-c7n9zhfm4n] {
    box-sizing: border-box;
    width: 100%;
    min-height: 46px;
    padding: 0 36px 0 40px;
    border: 1px solid var(--account-input-border);
    border-radius: 12px;
    outline: 0;
    color: var(--account-text);
    background: var(--account-input);
    font: inherit;
    font-size: 12.5px;
    font-weight: 550;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.editable-field input[b-c7n9zhfm4n] {
    padding-right: 13px;
}

.account-field input[b-c7n9zhfm4n]::placeholder {
    color: color-mix(in srgb, var(--account-muted) 68%, transparent);
    font-weight: 450;
}

.account-field input:focus[b-c7n9zhfm4n] {
    border-color: var(--account-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--account-primary) 16%, transparent);
}

.read-only-field input[b-c7n9zhfm4n] {
    color: color-mix(in srgb, var(--account-text) 78%, var(--account-muted));
    background: color-mix(in srgb, var(--account-input) 74%, var(--account-panel));
    cursor: default;
}

.editable-field input[b-c7n9zhfm4n] {
    border-color: color-mix(in srgb, var(--account-primary) 45%, var(--account-input-border));
}

.account-field input:-webkit-autofill[b-c7n9zhfm4n],
.account-field input:-webkit-autofill:hover[b-c7n9zhfm4n],
.account-field input:-webkit-autofill:focus[b-c7n9zhfm4n] {
    border-color: var(--account-input-border);
    -webkit-text-fill-color: #eef7ff;
    caret-color: #eef7ff;
    -webkit-box-shadow: 0 0 0 1000px #0a1c33 inset;
    box-shadow: 0 0 0 1000px #0a1c33 inset;
    transition: background-color 600000s 0s, color 600000s 0s;
}

.theme-light .account-field input:-webkit-autofill[b-c7n9zhfm4n],
.theme-light .account-field input:-webkit-autofill:hover[b-c7n9zhfm4n],
.theme-light .account-field input:-webkit-autofill:focus[b-c7n9zhfm4n] {
    -webkit-text-fill-color: #10243e;
    caret-color: #10243e;
    -webkit-box-shadow: 0 0 0 1000px #fafcff inset;
    box-shadow: 0 0 0 1000px #fafcff inset;
}

.account-field small[b-c7n9zhfm4n] {
    color: var(--account-muted);
    font-size: 9.5px;
    font-weight: 500;
}

.account-field .field-error[b-c7n9zhfm4n] {
    color: var(--account-danger);
    animation: fieldErrorIn-b-c7n9zhfm4n .2s ease-out both;
}

.full-width[b-c7n9zhfm4n] {
    grid-column: 1 / -1;
}

/* ---- Messages ---- */

.account-message[b-c7n9zhfm4n] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 17px;
    padding: 11px 13px;
    border: 1px solid;
    border-radius: 11px;
    font-size: 11.5px;
    line-height: 1.45;
    animation: messageSlideIn-b-c7n9zhfm4n .28s cubic-bezier(.25, .85, .3, 1) both;
}

.account-message svg[b-c7n9zhfm4n] {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.message-lines[b-c7n9zhfm4n] {
    display: grid;
    gap: 3px;
}

.account-message.success[b-c7n9zhfm4n] {
    border-color: color-mix(in srgb, var(--account-success) 35%, transparent);
    color: var(--account-success);
    background: color-mix(in srgb, var(--account-success) 9%, transparent);
}

.account-message.error[b-c7n9zhfm4n] {
    border-color: color-mix(in srgb, var(--account-danger) 35%, transparent);
    color: var(--account-danger);
    background: color-mix(in srgb, var(--account-danger) 8%, transparent);
}

/* ---- Actions ---- */

.tab-actions[b-c7n9zhfm4n] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 23px;
    padding-top: 18px;
    border-top: 1px solid var(--account-border-soft);
}

.secondary-action[b-c7n9zhfm4n],
.primary-action[b-c7n9zhfm4n] {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid var(--account-border-soft);
    border-radius: 11px;
    color: var(--account-text);
    background: var(--account-panel-strong);
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.secondary-action:hover:not(:disabled)[b-c7n9zhfm4n] {
    border-color: var(--account-border);
    transform: translateY(-1px);
}

.primary-action[b-c7n9zhfm4n] {
    min-width: 148px;
    border-color: color-mix(in srgb, var(--account-primary) 65%, transparent);
    color: #fff;
    background: linear-gradient(160deg, var(--account-primary), color-mix(in srgb, var(--account-primary) 68%, #6d4ae0));
    box-shadow: 0 10px 22px rgba(22, 111, 211, .26);
}

.primary-action:hover:not(:disabled)[b-c7n9zhfm4n] {
    background: linear-gradient(160deg, var(--account-primary-hover), color-mix(in srgb, var(--account-primary-hover) 68%, #7d5cee));
    transform: translateY(-1px);
    box-shadow: 0 13px 27px rgba(22, 111, 211, .32);
}

.primary-action:active:not(:disabled)[b-c7n9zhfm4n] {
    transform: translateY(0);
}

.button-icon[b-c7n9zhfm4n] {
    width: 15px;
    height: 15px;
}

.secondary-action:disabled[b-c7n9zhfm4n],
.primary-action:disabled[b-c7n9zhfm4n] {
    cursor: not-allowed;
    opacity: .46;
    box-shadow: none;
}

.button-spinner[b-c7n9zhfm4n] {
    width: 13px;
    height: 13px;
    border: 2px solid rgba(255, 255, 255, .36);
    border-top-color: #fff;
    border-radius: 50%;
    animation: profileButtonSpin-b-c7n9zhfm4n .8s linear infinite;
}

@keyframes profileButtonSpin-b-c7n9zhfm4n {
    to { transform: rotate(360deg); }
}

@keyframes cardRiseIn-b-c7n9zhfm4n {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes avatarRingSpin-b-c7n9zhfm4n {
    to { transform: rotate(360deg); }
}

@keyframes avatarStageIn-b-c7n9zhfm4n {
    from { opacity: 0; transform: translateY(8px) scale(.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes avatarBreath-b-c7n9zhfm4n {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.012); }
}

@keyframes avatarInitialsIn-b-c7n9zhfm4n {
    from { opacity: 0; transform: translateY(5px) scale(.9); filter: blur(3px); }
    to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

@keyframes avatarLightSweep-b-c7n9zhfm4n {
    0%, 62% { opacity: 0; background-position: 155% 0; }
    68% { opacity: .85; }
    82%, 100% { opacity: 0; background-position: -65% 0; }
}

@keyframes statusDotPulse-b-c7n9zhfm4n {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 189, 120, .42); }
    50% { box-shadow: 0 0 0 6px rgba(37, 189, 120, 0); }
}

@keyframes messageSlideIn-b-c7n9zhfm4n {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fieldErrorIn-b-c7n9zhfm4n {
    from { opacity: 0; transform: translateY(-3px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 860px) {
    .profile-tab-layout[b-c7n9zhfm4n] {
        grid-template-columns: 1fr;
    }

    .identity-facts[b-c7n9zhfm4n] {
        margin-top: 22px;
    }
}

@media (max-width: 560px) {
    .identity-card[b-c7n9zhfm4n],
    .details-card[b-c7n9zhfm4n] {
        border-radius: 14px;
    }

    .details-card[b-c7n9zhfm4n] {
        padding: 18px;
    }

    .details-grid[b-c7n9zhfm4n] {
        grid-template-columns: 1fr;
    }

    .full-width[b-c7n9zhfm4n] {
        grid-column: auto;
    }

    .read-only-note[b-c7n9zhfm4n] {
        display: none;
    }

    .tab-actions[b-c7n9zhfm4n] {
        position: sticky;
        bottom: -16px;
        margin-right: -18px;
        margin-left: -18px;
        padding: 14px 18px 16px;
        background: var(--account-panel);
    }

    .tab-actions button[b-c7n9zhfm4n] {
        flex: 1 1 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .profile-tab-layout *[b-c7n9zhfm4n] {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}
/* /Components/Account/Shared/AccountSessionNotice.razor.rz.scp.css */
.account-session-notice[b-ko5w7gsw0i] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 12px;
    align-items: start;
    padding: 14px 15px;
    border: 1px solid rgba(25, 112, 175, .3);
    border-radius: 12px;
    color: #123c5d;
    background: rgba(232, 247, 255, .94);
    box-shadow: 0 12px 30px rgba(13, 72, 118, .12);
}

.account-session-notice__icon[b-ko5w7gsw0i] {
    display: grid;
    width: 26px;
    height: 26px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #1970af;
    font-weight: 900;
}

.account-session-notice__copy[b-ko5w7gsw0i] {
    min-width: 0;
}

.account-session-notice__copy strong[b-ko5w7gsw0i] {
    display: block;
    font-size: 14px;
}

.account-session-notice__copy p[b-ko5w7gsw0i] {
    margin: 4px 0 0;
    font-size: 12px;
    line-height: 1.5;
}

.account-session-notice__dismiss[b-ko5w7gsw0i] {
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 0;
    border-radius: 8px;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 20px;
    cursor: pointer;
}

.account-session-notice__dismiss:hover[b-ko5w7gsw0i],
.account-session-notice__dismiss:focus-visible[b-ko5w7gsw0i] {
    outline: 2px solid rgba(25, 112, 175, .5);
    outline-offset: 1px;
    background: rgba(25, 112, 175, .1);
}

@media (prefers-color-scheme: dark) {
    .account-session-notice[b-ko5w7gsw0i] {
        border-color: rgba(100, 196, 239, .4);
        color: #dff5ff;
        background: rgba(13, 50, 72, .96);
        box-shadow: 0 12px 30px rgba(0, 0, 0, .24);
    }

    .account-session-notice__icon[b-ko5w7gsw0i] {
        color: #06223f;
        background: #77d5f2;
    }
}
/* /Components/Account/Shared/LoginServerHealthStatus.razor.rz.scp.css */
.server-health[b-sx52g5l29e] {
    display: grid;
    min-height: 66px;
    grid-template-columns: auto auto minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    margin-top: 34px;
    padding: 14px 17px;
    border: 1px solid rgba(61, 165, 151, .24);
    border-radius: 18px;
    color: #214b70;
    background: linear-gradient(135deg, rgba(226, 255, 249, .74), rgba(242, 255, 252, .44));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 14px 32px rgba(44, 147, 137, .08);
    font-size: 13px;
    animation: healthStatusEnter-b-sx52g5l29e 680ms cubic-bezier(.22, 1, .36, 1) both;
}

.health-dot[b-sx52g5l29e] {
    position: relative;
    display: grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: #22c58a;
    box-shadow: 0 0 0 6px rgba(34, 197, 138, .1), 0 0 18px rgba(34, 197, 138, .32);
}

.health-dot span[b-sx52g5l29e] {
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(34, 197, 138, .42);
    border-radius: inherit;
    animation: healthStatusPulse-b-sx52g5l29e 2.6s ease-out infinite;
}

.health-copy[b-sx52g5l29e] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    white-space: nowrap;
}

.health-copy strong[b-sx52g5l29e],
.health-copy span[b-sx52g5l29e] {
    font-weight: 820;
}

.health-copy span[b-sx52g5l29e] { color: #049b68; }

.server-health small[b-sx52g5l29e] {
    min-width: 0;
    justify-self: end;
    overflow: hidden;
    color: #557f9f;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.server-health.health-offline[b-sx52g5l29e] {
    border-color: rgba(205, 83, 91, .25);
    background: linear-gradient(135deg, rgba(255, 236, 238, .78), rgba(255, 247, 248, .48));
}

.server-health.health-offline .health-dot[b-sx52g5l29e] { background: #d54e59; }
.server-health.health-offline .health-dot span[b-sx52g5l29e] { border-color: rgba(213, 78, 89, .4); }
.server-health.health-offline .health-copy span[b-sx52g5l29e] { color: #b53b46; }

.server-health.health-checking .health-dot[b-sx52g5l29e],
.server-health.health-maintenance .health-dot[b-sx52g5l29e] { background: #e29a27; }

.server-health.health-checking .health-dot span[b-sx52g5l29e],
.server-health.health-maintenance .health-dot span[b-sx52g5l29e] { border-color: rgba(226, 154, 39, .46); }

.server-health.health-checking .health-copy span[b-sx52g5l29e],
.server-health.health-maintenance .health-copy span[b-sx52g5l29e] { color: #9a630e; }

.server-health.health-maintenance[b-sx52g5l29e] {
    border-color: rgba(214, 143, 31, .34);
    background: linear-gradient(135deg, rgba(255, 242, 211, .84), rgba(255, 250, 239, .58));
}

@keyframes healthStatusEnter-b-sx52g5l29e {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes healthStatusPulse-b-sx52g5l29e {
    from { opacity: .75; transform: scale(.72); }
    to { opacity: 0; transform: scale(1.42); }
}

@media (max-width: 620px) {
    .server-health[b-sx52g5l29e] { grid-template-columns: auto 1fr; margin-top: 16px; }
    .server-health small[b-sx52g5l29e] { grid-column: 1 / -1; justify-self: start; padding-left: 30px; white-space: normal; }
    .health-copy[b-sx52g5l29e] { flex-wrap: wrap; gap: 6px 10px; white-space: normal; }
}


/* Mobile login: compact status row, no diagnostic latency/detail text.
   The container itself stays static; only the small status ring pulses. */
@media (max-width: 768px), (pointer: coarse) {
    .server-health[b-sx52g5l29e] {
        min-height: 60px;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: 12px;
        margin-top: 14px;
        padding: 13px 16px;
        animation: none;
    }

    .server-health small[b-sx52g5l29e] {
        display: none;
    }

    .health-copy[b-sx52g5l29e] {
        min-width: 0;
        flex-wrap: wrap;
        gap: 5px 10px;
        white-space: normal;
    }

    .health-dot span[b-sx52g5l29e] {
        display: block;
        animation: healthStatusPulse-b-sx52g5l29e 2.8s ease-out infinite;
        transform-origin: center;
        will-change: transform, opacity;
    }
}

@media (prefers-reduced-motion: reduce) {
    .server-health[b-sx52g5l29e],
    .server-health *[b-sx52g5l29e] { animation: none !important; }
}
/* /Components/Layout/AccountLayout.razor.rz.scp.css */
.account-shell[b-wf4y68am0v] {
    position: relative;
    display: grid;
    min-height: 100dvh;
    overflow: hidden;
    color: #06223f;
    background:
        radial-gradient(ellipse at 14% 12%, rgba(255, 255, 255, .98) 0 18%, transparent 48%),
        radial-gradient(ellipse at 88% 18%, rgba(92, 188, 234, .28) 0 13%, transparent 42%),
        radial-gradient(ellipse at 82% 88%, rgba(33, 154, 216, .2) 0 16%, transparent 46%),
        linear-gradient(132deg, #fbfeff 0%, #eef9ff 39%, #dff3fb 68%, #cce9f7 100%);
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    -webkit-user-select: none;
    user-select: none;
}

.account-shell[b-wf4y68am0v],
.account-shell *[b-wf4y68am0v] {
    box-sizing: border-box;
}

.account-shell[b-wf4y68am0v]  input,
.account-shell[b-wf4y68am0v]  textarea {
    -webkit-user-select: text;
    user-select: text;
}

.account-shell[b-wf4y68am0v]::before,
.account-shell[b-wf4y68am0v]::after {
    position: fixed;
    inset: 0;
    content: "";
    pointer-events: none;
}

.account-shell[b-wf4y68am0v]::before {
    z-index: 0;
    background:
        linear-gradient(90deg, rgba(255, 255, 255, .48), transparent 24%, transparent 72%, rgba(255, 255, 255, .22)),
        url("/images/login/bio-microorganism-field.png");
    background-position: center;
    background-size: cover;
    opacity: .11;
    filter: blur(16px) saturate(.9);
    transform: scale(1.08);
    animation: accountBackgroundBreath-b-wf4y68am0v 30s ease-in-out infinite alternate;
}

.account-shell[b-wf4y68am0v]::after {
    z-index: 0;
    background:
        linear-gradient(rgba(8, 105, 168, .026) 1px, transparent 1px),
        linear-gradient(90deg, rgba(8, 105, 168, .024) 1px, transparent 1px),
        radial-gradient(ellipse at 57% 46%, transparent 0 38%, rgba(5, 55, 96, .04) 82%, rgba(3, 39, 73, .065) 100%);
    background-size: 52px 52px, 52px 52px, auto;
    mask-image: radial-gradient(ellipse at 55% 45%, #000 0 44%, transparent 86%);
    animation: accountGridDrift-b-wf4y68am0v 44s linear infinite;
}

.account-background[b-wf4y68am0v] {
    position: fixed;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.account-orb[b-wf4y68am0v] {
    position: absolute;
    display: block;
    border-radius: 42% 58% 50% 50% / 48% 44% 56% 52%;
    background:
        linear-gradient(rgba(231, 250, 255, .18), rgba(231, 250, 255, .18)),
        url("/images/login/bio-microorganism-field.png");
    background-position: center;
    background-size: cover;
    box-shadow: 0 36px 120px rgba(7, 87, 132, .15);
    filter: blur(10px) saturate(.96);
    opacity: .18;
    transform-origin: center;
    mask-image: radial-gradient(ellipse at center, #000 0 35%, rgba(0, 0, 0, .75) 45%, transparent 72%);
}

.account-orb-one[b-wf4y68am0v] {
    top: -15vw;
    left: -12vw;
    width: clamp(520px, 42vw, 760px);
    aspect-ratio: 1.14;
    animation: accountSpecimenOne-b-wf4y68am0v 30s ease-in-out infinite alternate;
}

.account-orb-two[b-wf4y68am0v] {
    right: -18vw;
    bottom: -18vw;
    width: clamp(620px, 48vw, 860px);
    aspect-ratio: 1.1;
    opacity: .21;
    animation: accountSpecimenTwo-b-wf4y68am0v 38s ease-in-out infinite alternate;
}

.account-grid[b-wf4y68am0v] {
    position: absolute;
    right: 8%;
    bottom: 1%;
    display: block;
    width: min(44vw, 680px);
    height: min(30vw, 480px);
    border-radius: 42% 58% 50% 50% / 48% 44% 56% 52%;
    background: linear-gradient(155deg, rgba(55, 203, 205, .16), rgba(255, 255, 255, .1) 62%, transparent);
    filter: blur(44px);
    opacity: .78;
    animation: accountDepthWash-b-wf4y68am0v 26s ease-in-out infinite alternate;
}

.account-content[b-wf4y68am0v] {
    position: relative;
    z-index: 2;
    display: grid;
    min-height: 100dvh;
    place-items: center;
    padding: 34px 20px;
}

.account-content[b-wf4y68am0v]  .account-card {
    display: flex;
    width: min(460px, 100%);
    flex-direction: column;
    gap: 20px;
    padding: 28px;
    border: 1px solid rgba(44, 122, 188, .22);
    border-radius: 14px;
    color: #09233f;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 24px 70px rgba(13, 72, 118, .18);
    backdrop-filter: blur(18px);
}

.account-content[b-wf4y68am0v]  .account-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-content[b-wf4y68am0v]  .account-brand img {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

.account-content[b-wf4y68am0v]  .account-brand div,
.account-content[b-wf4y68am0v]  .account-heading,
.account-content[b-wf4y68am0v]  .account-form,
.account-content[b-wf4y68am0v]  .account-field,
.account-content[b-wf4y68am0v]  .account-message {
    display: flex;
    flex-direction: column;
}

.account-content[b-wf4y68am0v]  .account-brand strong {
    font-size: 15px;
    font-weight: 900;
}

.account-content[b-wf4y68am0v]  .account-brand span,
.account-content[b-wf4y68am0v]  .account-heading p {
    color: #49647f;
    font-size: 12px;
}

.account-content[b-wf4y68am0v]  .account-heading {
    gap: 6px;
}

.account-content[b-wf4y68am0v]  .account-heading > span {
    color: #1769dc;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-content[b-wf4y68am0v]  .account-heading h1 {
    margin: 0;
    font-size: 28px;
    font-weight: 950;
}

.account-content[b-wf4y68am0v]  .account-heading p {
    margin: 0;
    line-height: 1.5;
}

.account-content[b-wf4y68am0v]  .account-form {
    gap: 14px;
}

.account-content[b-wf4y68am0v]  .account-field {
    gap: 7px;
    font-size: 12px;
    font-weight: 850;
}

.account-content[b-wf4y68am0v]  .account-input {
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(44, 122, 188, .28);
    border-radius: 9px;
    outline: none;
    color: #09233f;
    background: #f8fbff;
    font: inherit;
}

.account-content[b-wf4y68am0v]  .account-input:focus {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, .14);
}

.account-content[b-wf4y68am0v]  .account-validation {
    color: #bd3548;
    font-size: 11px;
}

.account-content[b-wf4y68am0v]  .account-submit {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #1f7df2, #0f5bd0);
    box-shadow: 0 14px 24px rgba(23, 105, 220, .24);
    font: inherit;
    font-size: 13px;
    font-weight: 900;
    text-decoration: none;
    cursor: pointer;
}

.account-content[b-wf4y68am0v]  .account-message {
    gap: 6px;
    padding: 12px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.45;
}

.account-content[b-wf4y68am0v]  .account-message.success {
    border: 1px solid rgba(34, 151, 101, .38);
    color: #176143;
    background: #e4f7ee;
}

.account-content[b-wf4y68am0v]  .account-message.warning {
    border: 1px solid rgba(214, 154, 36, .42);
    color: #73510d;
    background: #fff5dc;
}

.account-content[b-wf4y68am0v]  .account-message.error {
    border: 1px solid rgba(189, 53, 72, .38);
    color: #8b2d37;
    background: #fde9eb;
}

.account-content[b-wf4y68am0v]  .account-message a {
    overflow-wrap: anywhere;
    color: #1769dc;
}

.account-content[b-wf4y68am0v]  .account-secondary-link {
    align-self: center;
    color: #1769dc;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

.account-content[b-wf4y68am0v]  .account-secondary-link:hover {
    text-decoration: underline;
}

@keyframes accountBackgroundBreath-b-wf4y68am0v {
    from {
        transform: scale(1.08) translate3d(-1%, -.5%, 0);
    }

    to {
        transform: scale(1.16) translate3d(1.5%, 1%, 0);
    }
}

@keyframes accountGridDrift-b-wf4y68am0v {
    from {
        background-position: 0 0, 0 0, center;
    }

    to {
        background-position: 52px 52px, 52px 52px, center;
    }
}

@keyframes accountSpecimenOne-b-wf4y68am0v {
    from {
        transform: translate3d(0, 0, 0) rotate(-9deg) scale(1);
    }

    to {
        transform: translate3d(44px, 38px, 0) rotate(5deg) scale(1.05);
    }
}

@keyframes accountSpecimenTwo-b-wf4y68am0v {
    from {
        transform: translate3d(0, 0, 0) rotate(-9deg) scale(1);
    }

    to {
        transform: translate3d(-70px, -42px, 0) rotate(7deg) scale(1.06);
    }
}

@keyframes accountDepthWash-b-wf4y68am0v {
    from {
        transform: translate3d(24px, 16px, 0) rotate(5deg);
    }

    to {
        transform: translate3d(-46px, -22px, 0) rotate(-8deg);
    }
}

@media (max-width: 620px) {
    .account-content[b-wf4y68am0v] {
        padding: 18px 10px;
    }

    .account-orb[b-wf4y68am0v] {
        opacity: .1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .account-shell[b-wf4y68am0v]::before,
    .account-shell[b-wf4y68am0v]::after,
    .account-orb-one[b-wf4y68am0v],
    .account-orb-two[b-wf4y68am0v],
    .account-grid[b-wf4y68am0v] {
        animation: none;
    }
}

/* =====================================================================
   MOBILE: flat white shell.

   This layout wraps every /Account/* page, so it - not Login.razor.css -
   is what paints the blue blurred field visible around the login card on
   a phone. Three separate sources stack up here:
     .account-shell            4-layer blue gradient
     .account-shell::before    bio-microorganism-field.png, blur(16px),
                               position: fixed, animated 30s
     .account-orb x2           the same PNG again, blur(10px), animated
     .account-grid             blur(44px), animated
   On mobile all of it is removed and the shell is plain white.

   .account-content also has `place-items: center`, which makes its grid
   item shrink to content width - that is why the login container stopped
   filling the screen once it became a normal in-flow element. Mobile
   stretches it instead.
   ===================================================================== */
@media (max-width: 768px), (pointer: coarse) {

    .account-shell[b-wf4y68am0v] {
        display: block;
        width: 100%;
        height: auto;
        min-height: 100vh;
        min-height: 100svh;
        overflow-x: hidden;
        overflow-y: visible;
        touch-action: pan-y;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        background-position: initial !important;
        background-size: auto !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
        filter: none !important;
        backdrop-filter: none !important;
        mix-blend-mode: normal !important;
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .account-shell[b-wf4y68am0v]::before,
    .account-shell[b-wf4y68am0v]::after,
    .account-background[b-wf4y68am0v],
    .account-orb[b-wf4y68am0v],
    .account-orb-one[b-wf4y68am0v],
    .account-orb-two[b-wf4y68am0v],
    .account-grid[b-wf4y68am0v] {
        display: none !important;
        content: none !important;
        background: none !important;
        background-image: none !important;
        animation: none !important;
        filter: none !important;
        transform: none !important;
        will-change: auto !important;
    }

    .account-content[b-wf4y68am0v] {
        display: block;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        place-items: stretch;
        background: #ffffff !important;
        background-image: none !important;
    }

    /* Shared Account pages (Forgot/Reset/Confirm etc.) are rendered from
       another scoped component. ::deep is required so their cards receive
       border-box sizing instead of becoming 100% wide PLUS their padding. */
    .account-content[b-wf4y68am0v]  .account-card {
        box-sizing: border-box;
        width: min(calc(100% - 24px), 460px);
        max-width: 460px;
        min-width: 0;
        margin: clamp(16px, 6vh, 52px) auto 24px;
        padding: 24px 18px;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .account-content[b-wf4y68am0v]  .account-brand,
    .account-content[b-wf4y68am0v]  .account-brand > div,
    .account-content[b-wf4y68am0v]  .account-heading,
    .account-content[b-wf4y68am0v]  .account-form,
    .account-content[b-wf4y68am0v]  .account-field,
    .account-content[b-wf4y68am0v]  .account-message {
        min-width: 0;
        max-width: 100%;
    }

    .account-content[b-wf4y68am0v]  .account-input,
    .account-content[b-wf4y68am0v]  .account-submit {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
.app-shell[b-36b2wzwsbg] {
    /* .topbar renders at a flat 64px (border-box: min-height 64px already
       includes its padding and 1px bottom border/separator). Floating
       panels such as ChatPanel read this instead of duplicating the number
       so they never render underneath the global header. */
    --app-header-height: 64px;
    --brand-navy: #1f345f;
    --brand-blue: #1769dc;
    --brand-teal: #6fc7c7;
    --brand-red: #d84c5f;
    --brand-green: #35c99a;
    --sidebar-background: linear-gradient(180deg, #fbfdff 0%, #f0f5fc 100%);
    --sidebar-border: #d8e2ee;
    --sidebar-text: #172033;
    --sidebar-muted: #667085;
    --sidebar-hover: rgba(31, 52, 95, 0.06);
    --sidebar-hover-text: #172033;
    --sidebar-active: linear-gradient(135deg, #1f5ec6 0%, #1769dc 62%, #5faebd 100%);
    --sidebar-active-text: #ffffff;
    --page-background: #f3f6fb;
    --panel-background: #ffffff;
    --border-color: #dfe6ef;
    --primary-text: #172033;
    --secondary-text: #667085;
    --button-background: #ffffff;
    --button-hover: #eef3fa;
    --shadow-color: rgba(15, 23, 42, 0.08);
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-columns: 288px minmax(0, 1fr);
    overflow: hidden;
    color: var(--primary-text);
    background: var(--page-background);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    transition: grid-template-columns 180ms ease;
}

.app-shell[b-36b2wzwsbg],
.app-shell *[b-36b2wzwsbg] {
    box-sizing: border-box;
}

.app-shell.theme-dark[b-36b2wzwsbg] {
    --sidebar-background: linear-gradient(180deg, #08111d 0%, #0d1727 100%);
    --sidebar-border: #1d2d44;
    --sidebar-text: #e5edf8;
    --sidebar-muted: #91a0b5;
    --sidebar-hover: rgba(111, 199, 199, 0.08);
    --sidebar-hover-text: #ffffff;
    --sidebar-active: linear-gradient(135deg, #214f9a 0%, #2e74da 62%, #4eb0b0 100%);
    --sidebar-active-text: #ffffff;
    --page-background: #101720;
    --panel-background: #18212d;
    --border-color: #2a3747;
    --primary-text: #edf3fa;
    --secondary-text: #a8b4c3;
    --button-background: #1c2734;
    --button-hover: #263446;
    --shadow-color: rgba(0, 0, 0, 0.28);
}

.app-shell.theme-dark .sidebar[b-36b2wzwsbg] {
    background:
        radial-gradient(circle at 18% 12%, rgba(23, 105, 220, 0.08) 0%, rgba(23, 105, 220, 0) 28%),
        radial-gradient(circle at 84% 22%, rgba(88, 172, 192, 0.12) 0%, rgba(88, 172, 192, 0) 30%),
        radial-gradient(circle at 72% 78%, rgba(111, 199, 199, 0.14) 0%, rgba(111, 199, 199, 0) 32%),
        var(--sidebar-background);
    animation: none;
}

.app-shell.sidebar-collapsed[b-36b2wzwsbg] {
    grid-template-columns: 88px minmax(0, 1fr);
}

.sidebar[b-36b2wzwsbg] {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: hidden;
    color: var(--sidebar-text);
    background:
        radial-gradient(circle at 14% 9%, rgba(23, 105, 220, 0.08) 0%, rgba(23, 105, 220, 0) 32%),
        radial-gradient(circle at 88% 22%, rgba(88, 172, 192, 0.12) 0%, rgba(88, 172, 192, 0) 34%),
        radial-gradient(circle at 72% 82%, rgba(111, 199, 199, 0.14) 0%, rgba(111, 199, 199, 0) 36%),
        repeating-linear-gradient(0deg, rgba(31, 52, 95, 0.03) 0 1px, transparent 1px 34px),
        repeating-linear-gradient(90deg, rgba(31, 52, 95, 0.028) 0 1px, transparent 1px 34px),
        var(--sidebar-background);
    background-size: auto, auto, auto, 34px 34px, 34px 34px, auto;
    background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
    border-right: 1px solid var(--sidebar-border);
    box-shadow: 10px 0 30px rgba(15, 23, 42, 0.05);
    animation: lightSidebarAtmosphere-b-36b2wzwsbg 22s ease-in-out infinite alternate;
}

.sidebar > *[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
}

.sidebar[b-36b2wzwsbg]::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background:
        linear-gradient(90deg,
            #1769dc 0%,
            #58d1e4 16.666%,
            #35c99a 33.333%,
            #1769dc 50%,
            #58d1e4 66.666%,
            #35c99a 83.333%,
            #1769dc 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 14px rgba(31, 159, 237, 0.26), 0 0 22px rgba(53, 201, 154, 0.18);
    content: "";
    animation: sidebarAccentShift-b-36b2wzwsbg 7.5s linear infinite;
}

.sidebar[b-36b2wzwsbg]::after {
    position: absolute;
    top: 92px;
    right: -56px;
    width: 190px;
    height: 190px;
    z-index: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(20, 47, 92, 0.16) 0%, rgba(23, 105, 220, 0.12) 34%, rgba(111, 199, 199, 0.06) 52%, rgba(111, 199, 199, 0) 74%);
    content: "";
    pointer-events: none;
    filter: blur(2px);
    animation: sidebarAmbientDrift-b-36b2wzwsbg 16s ease-in-out infinite alternate;
}

@keyframes sidebarAccentShift-b-36b2wzwsbg {
    from {
        background-position: 0% 50%;
    }

    to {
        background-position: -200% 50%;
    }
}

@keyframes lightSidebarAtmosphere-b-36b2wzwsbg {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
        filter: none;
    }

    100% {
        background-position: 18px -14px, -14px 20px, 10px -22px, 0 10px, 10px 0, 0 0;
        filter: none;
    }
}

.brand[b-36b2wzwsbg] {
    position: relative;
    isolation: isolate;
    display: flex;
    min-width: 0;
    min-height: 88px;
    align-items: center;
    gap: 12px;
    padding: 14px 16px 12px;
    overflow: hidden;
    border-bottom: 1px solid rgba(216, 226, 238, 0.72);
}

.app-shell.theme-dark .brand[b-36b2wzwsbg] {
    border-bottom-color: rgba(111, 199, 199, 0.16);
}

.brand[b-36b2wzwsbg]::before {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, rgba(239, 249, 255, 0.36) 100%),
        radial-gradient(circle at 76% 32%, rgba(23, 105, 220, 0.10) 0%, rgba(23, 105, 220, 0) 38%),
        radial-gradient(circle at 92% 72%, rgba(111, 199, 199, 0.12) 0%, rgba(111, 199, 199, 0) 36%);
    opacity: 0.86;
    content: "";
    pointer-events: none;
    animation: none;
}

.app-shell.theme-dark .brand[b-36b2wzwsbg]::before {
    background:
        radial-gradient(circle at 82% 34%, rgba(31, 159, 237, 0.10) 0%, rgba(31, 159, 237, 0) 38%),
        radial-gradient(circle at 92% 72%, rgba(53, 201, 154, 0.08) 0%, rgba(53, 201, 154, 0) 36%),
        linear-gradient(180deg, rgba(8, 20, 34, 0.82) 0%, rgba(12, 28, 46, 0.62) 100%);
    opacity: 1;
    animation: none;
}

.brand[b-36b2wzwsbg]::after {
    position: absolute;
    right: 16px;
    bottom: 13px;
    left: 16px;
    height: 1px;
    background: linear-gradient(90deg, rgba(23, 105, 220, 0.16) 0%, rgba(88, 209, 228, 0.24) 52%, rgba(53, 201, 154, 0.18) 100%);
    content: "";
}

.app-shell.theme-dark .brand[b-36b2wzwsbg]::after {
    height: 2px;
    background: linear-gradient(90deg,
        rgba(88, 209, 228, 0.18) 0%,
        rgba(88, 209, 228, 0.74) 16.666%,
        rgba(53, 201, 154, 0.62) 33.333%,
        rgba(23, 105, 220, 0.28) 50%,
        rgba(88, 209, 228, 0.74) 66.666%,
        rgba(53, 201, 154, 0.62) 83.333%,
        rgba(88, 209, 228, 0.18) 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 16px rgba(88, 209, 228, 0.32);
    opacity: 0.74;
    animation: brandUnderlineFlow-b-36b2wzwsbg 8s linear infinite;
}

.brand-logo-image[b-36b2wzwsbg] {
    display: block;
    width: 92px;
    min-width: 92px;
    height: 50px;
    object-fit: contain;
    object-position: center;
}

.app-shell.theme-dark .brand-logo-image[b-36b2wzwsbg] {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    filter:
        brightness(1.18)
        contrast(1.08)
        saturate(1.08)
        drop-shadow(0 0 10px rgba(88, 209, 228, 0.24))
        drop-shadow(0 8px 16px rgba(0, 0, 0, 0.34));
}

.brand-copy[b-36b2wzwsbg] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    padding-top: 1px;
    padding-right: 12px;
    transform: translateY(-2px);
    text-align: center;
    white-space: nowrap;
}

.brand-copy strong[b-36b2wzwsbg] {
    overflow: visible;
    padding-bottom: 2px;
    color: var(--brand-navy);
    font-size: 18px;
    font-weight: 780;
    letter-spacing: -0.35px;
    line-height: 1.28;
    text-overflow: clip;
    text-shadow: 0 0 16px rgba(23, 105, 220, 0.08);
}

.app-shell.theme-dark .brand-copy strong[b-36b2wzwsbg] {
    color: #ffffff;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.28), 0 0 18px rgba(111, 199, 199, 0.18);
}

.brand-copy span[b-36b2wzwsbg] {
    overflow: hidden;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 650;
    letter-spacing: 0.14px;
    line-height: 1.2;
    text-overflow: ellipsis;
}

.app-shell.theme-dark .brand-copy span[b-36b2wzwsbg] {
    color: #b9c9dc;
    font-weight: 760;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.22);
}

@keyframes brandUnderlineFlow-b-36b2wzwsbg {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: -200% 0;
    }
}

@keyframes sidebarAmbientDrift-b-36b2wzwsbg {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.52;
    }

    100% {
        transform: translate3d(-18px, 42px, 0) scale(1.08);
        opacity: 0.92;
    }
}

.sidebar-nav[b-36b2wzwsbg] {
    display: flex;
    min-width: 0;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 14px 12px;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 200ms ease;
}

.sidebar-nav:hover[b-36b2wzwsbg] {
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
}

.sidebar-nav[b-36b2wzwsbg]::-webkit-scrollbar {
    width: 8px;
}

.sidebar-nav[b-36b2wzwsbg]::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar-nav[b-36b2wzwsbg]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: transparent;
    background-clip: padding-box;
    transition: background-color 200ms ease;
}

.sidebar-nav:hover[b-36b2wzwsbg]::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.45);
}

.sidebar-nav[b-36b2wzwsbg]::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.7);
}

.sidebar-nav[b-36b2wzwsbg]::before {
    position: absolute;
    top: 110px;
    left: -42px;
    width: 220px;
    height: 360px;
    z-index: 0;
    background:
        radial-gradient(circle at 30% 30%, rgba(18, 40, 82, 0.12) 0%, rgba(29, 92, 177, 0.08) 38%, rgba(29, 92, 177, 0) 68%),
        radial-gradient(circle at 76% 70%, rgba(88, 172, 192, 0.10) 0%, rgba(88, 172, 192, 0) 60%);
    content: "";
    pointer-events: none;
    filter: blur(10px);
    animation: sidebarNavGlowSweep-b-36b2wzwsbg 18s ease-in-out infinite alternate;
}

@keyframes sidebarNavGlowSweep-b-36b2wzwsbg {
    0% {
        transform: translate3d(0, -10px, 0);
        opacity: 0.34;
    }

    100% {
        transform: translate3d(34px, 56px, 0);
        opacity: 0.66;
    }
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item,
.sidebar-nav button.nav-item[b-36b2wzwsbg] {
    position: relative;
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    flex-shrink: 0;
    align-items: center;
    gap: 13px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--sidebar-text);
    background: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 620;
    text-align: left;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease, filter 140ms ease;
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item:hover,
.sidebar-nav button.nav-item:hover[b-36b2wzwsbg] {
    color: var(--sidebar-hover-text);
    background: var(--sidebar-hover);
    border-color: rgba(31, 52, 95, 0.12);
    box-shadow: 0 8px 20px rgba(31, 52, 95, 0.08);
    transform: translateX(1px) translateY(-1px);
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item.active {
    color: var(--sidebar-active-text);
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    border-color: transparent;
    box-shadow: 0 14px 30px rgba(23, 105, 220, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.12) inset, 0 0 22px rgba(95, 174, 189, 0.16);
    transform: translateX(2px) translateY(-1px);
    filter: saturate(1.08);
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item.active::before {
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.60), 0 0 18px rgba(111, 199, 199, 0.34);
    content: "";
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item.active::after {
    position: absolute;
    inset: 1px;
    z-index: 0;
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 11px;
    background:
        linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 38%, rgba(255,255,255,0) 64%),
        radial-gradient(circle at 18% 50%, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 82% 50%, rgba(111, 199, 199, 0.14) 0%, rgba(111, 199, 199, 0) 38%);
    background-size: 210% 100%, auto, auto;
    content: "";
    pointer-events: none;
    animation: activeNavPulse-b-36b2wzwsbg 4.2s ease-in-out infinite, activeNavSheen-b-36b2wzwsbg 5.6s ease-in-out infinite;
}

@keyframes activeNavPulse-b-36b2wzwsbg {
    0%, 100% {
        opacity: 0.36;
        transform: scale(0.997);
    }

    50% {
        opacity: 0.64;
        transform: scale(1);
    }
}

@keyframes activeNavSheen-b-36b2wzwsbg {
    0%, 100% {
        background-position: -160% 0, 0 0, 0 0;
    }

    45% {
        background-position: 145% 0, 0 0, 0 0;
    }
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item:hover .nav-icon,
.sidebar-nav button.nav-item:hover .nav-icon[b-36b2wzwsbg] {
    transform: scale(1.08);
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item.active .nav-icon,
.sidebar-nav button.nav-item.active .nav-icon[b-36b2wzwsbg] {
    transform: scale(1.1);
    text-shadow: 0 0 18px rgba(255, 255, 255, 0.44), 0 0 12px rgba(111, 199, 199, 0.28);
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item.agency-nav-block-flash {
    color: #ffffff;
    border-color: rgba(255, 63, 87, 0.76);
    background:
        linear-gradient(135deg, rgba(255, 63, 87, 0.94) 0%, rgba(210, 37, 58, 0.88) 58%, rgba(128, 22, 38, 0.86) 100%);
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.12) inset,
        0 0 18px rgba(255, 63, 87, 0.52),
        0 12px 26px rgba(128, 22, 38, 0.28);
    animation: agencyNavBlockFlash-b-36b2wzwsbg 0.5s ease-in-out 6;
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item.agency-nav-block-flash .nav-icon,
.sidebar-nav[b-36b2wzwsbg]  .nav-item.agency-nav-block-flash .nav-label {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.42), 0 0 18px rgba(255, 63, 87, 0.72);
}

@keyframes agencyNavBlockFlash-b-36b2wzwsbg {
    0%, 100% {
        transform: translateX(0);
        filter: saturate(1);
    }

    50% {
        transform: translateX(3px);
        filter: saturate(1.42);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.16) inset,
            0 0 24px rgba(255, 63, 87, 0.72),
            0 14px 30px rgba(128, 22, 38, 0.38);
    }
}

.nav-icon[b-36b2wzwsbg],
.nav-label[b-36b2wzwsbg] {
    position: relative;
    z-index: 2;
}

.nav-icon[b-36b2wzwsbg] {
    display: inline-flex;
    width: 24px;
    min-width: 24px;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: transform 140ms ease, text-shadow 140ms ease;
}

.dashboard-icon svg[b-36b2wzwsbg] {
    display: block;
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.weekly-manning-icon svg[b-36b2wzwsbg] {
    display: block;
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-label[b-36b2wzwsbg] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-section-label[b-36b2wzwsbg] {
    margin: 18px 13px 6px;
    overflow: hidden;
    color: var(--sidebar-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.collapse-button[b-36b2wzwsbg] {
    display: flex;
    width: calc(100% - 24px);
    min-width: 0;
    min-height: 46px;
    flex-shrink: 0;
    align-items: center;
    gap: 13px;
    margin: 8px 12px 16px;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid var(--sidebar-border);
    border-radius: 14px;
    color: var(--sidebar-text);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(239, 245, 255, 0.72) 100%);
    box-shadow: 0 10px 18px rgba(17, 31, 58, 0.08), inset 0 1px 0 rgba(255,255,255,0.7);
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.collapse-button:hover[b-36b2wzwsbg] {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.74) 0%, rgba(228, 239, 255, 0.9) 100%);
    border-color: rgba(23, 105, 220, 0.16);
    box-shadow: 0 12px 22px rgba(23, 105, 220, 0.10), inset 0 1px 0 rgba(255,255,255,0.75);
    transform: translateY(-1px);
}

.collapse-button:active[b-36b2wzwsbg] {
    transform: translateY(1px) scale(0.985);
}

.collapse-button .nav-icon[b-36b2wzwsbg] {
    width: 28px;
    min-width: 28px;
    height: 28px;
    border-radius: 999px;
    color: #1769dc;
    background: linear-gradient(135deg, rgba(23, 105, 220, 0.12) 0%, rgba(88, 172, 192, 0.20) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.55);
    font-size: 17px;
}

.app-shell:not(.theme-dark) .sidebar[b-36b2wzwsbg]::after {
    top: 108px;
    right: -64px;
    width: 230px;
    height: 230px;
    background:
        radial-gradient(circle, rgba(111, 199, 199, 0.17) 0%, rgba(23, 105, 220, 0.07) 40%, rgba(111, 199, 199, 0) 74%);
    animation: lightSidebarOrb-b-36b2wzwsbg 12s ease-in-out infinite alternate;
}

@keyframes lightSidebarOrb-b-36b2wzwsbg {
    0% {
        transform: translate3d(0, 0, 0);
        opacity: 0.50;
    }

    100% {
        transform: translate3d(-10px, 12px, 0);
        opacity: 1;
    }
}

.app-shell:not(.theme-dark) .sidebar-nav[b-36b2wzwsbg]  .nav-item,
.app-shell:not(.theme-dark) .sidebar-nav button.nav-item[b-36b2wzwsbg] {
    background: rgba(255, 255, 255, 0.08);
}

.app-shell:not(.theme-dark) .sidebar-nav[b-36b2wzwsbg]  .nav-item:hover,
.app-shell:not(.theme-dark) .sidebar-nav button.nav-item:hover[b-36b2wzwsbg] {
    background: linear-gradient(135deg, rgba(31, 94, 198, 0.08) 0%, rgba(95, 174, 189, 0.10) 100%);
    border-color: rgba(23, 105, 220, 0.16);
}

.app-shell:not(.theme-dark) .sidebar-nav[b-36b2wzwsbg]  .nav-item.active,
.app-shell:not(.theme-dark) .sidebar-nav button.nav-item.active[b-36b2wzwsbg] {
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(23, 105, 220, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.10) inset, 0 0 16px rgba(95, 174, 189, 0.10);
}

.app-shell:not(.theme-dark) .sidebar-nav[b-36b2wzwsbg]  .nav-item.active::after,
.app-shell:not(.theme-dark) .sidebar-nav button.nav-item.active[b-36b2wzwsbg]::after {
    border-color: rgba(255, 255, 255, 0.14);
    background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.12) 42%, rgba(255,255,255,0) 68%);
    background-size: 210% 100%;
    opacity: 0.55;
    animation: activeNavSheen-b-36b2wzwsbg 5.8s ease-in-out infinite;
}

.app-shell:not(.theme-dark) .sidebar-nav[b-36b2wzwsbg]  .nav-item.active .nav-icon,
.app-shell:not(.theme-dark) .sidebar-nav button.nav-item.active .nav-icon[b-36b2wzwsbg],
.app-shell:not(.theme-dark) .sidebar-nav[b-36b2wzwsbg]  .nav-item.active .nav-label,
.app-shell:not(.theme-dark) .sidebar-nav button.nav-item.active .nav-label[b-36b2wzwsbg] {
    color: #ffffff;
}

.sidebar-collapsed .brand[b-36b2wzwsbg] {
    justify-content: center;
    padding-inline: 10px;
}

.sidebar-collapsed .brand[b-36b2wzwsbg]::after {
    left: 10px;
    right: 10px;
}

.sidebar-collapsed .brand-logo-image[b-36b2wzwsbg] {
    width: 58px;
    min-width: 58px;
    height: 44px;
}

.app-shell.theme-dark.sidebar-collapsed .brand-logo-image[b-36b2wzwsbg] {
    width: 64px;
    min-width: 64px;
    height: 46px;
    padding: 0;
}

.sidebar-collapsed .brand-copy[b-36b2wzwsbg],
.sidebar-collapsed .nav-label[b-36b2wzwsbg],
.sidebar-collapsed .nav-section-label[b-36b2wzwsbg] {
    display: none;
}

.sidebar-collapsed .sidebar-nav[b-36b2wzwsbg]  .nav-item,
.sidebar-collapsed .sidebar-nav button.nav-item[b-36b2wzwsbg],
.sidebar-collapsed .collapse-button[b-36b2wzwsbg] {
    justify-content: center;
    padding-inline: 0;
}

.main-panel[b-36b2wzwsbg] {
    display: grid;
    min-width: 0;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    background: var(--page-background);
}

.topbar[b-36b2wzwsbg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 20px;
    min-height: 64px;
    padding: 8px 20px;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid var(--border-color);
    box-shadow: 0 2px 10px var(--shadow-color);
    backdrop-filter: blur(14px);
    z-index: 5;
}

.app-shell.theme-dark .topbar[b-36b2wzwsbg] {
    background: rgba(24, 33, 45, 0.92);
}

.topbar-left[b-36b2wzwsbg] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 12px;
}

.mobile-menu-button[b-36b2wzwsbg] {
    display: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 18px;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.page-heading[b-36b2wzwsbg] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.page-heading.category-only[b-36b2wzwsbg] {
    justify-content: center;
}

.page-heading strong[b-36b2wzwsbg] {
    overflow: hidden;
    color: var(--brand-navy);
    font-size: 22px;
    font-weight: 760;
    letter-spacing: -0.55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-shell.theme-dark .page-heading strong[b-36b2wzwsbg] {
    color: #f4f8fd;
}

.page-eyebrow[b-36b2wzwsbg] {
    color: var(--brand-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.page-heading.category-only .page-eyebrow[b-36b2wzwsbg] {
    font-size: 13px;
    font-weight: 850;
    letter-spacing: 0.9px;
}

.week-navigation[b-36b2wzwsbg] {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-self: center;
}

.week-button[b-36b2wzwsbg],
.current-week-button[b-36b2wzwsbg],
.theme-button[b-36b2wzwsbg] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
    cursor: pointer;
}

.week-button[b-36b2wzwsbg] {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    font-size: 24px;
    line-height: 1;
}

.week-button:hover[b-36b2wzwsbg],
.current-week-button:hover[b-36b2wzwsbg],
.theme-button:hover[b-36b2wzwsbg] {
    background: var(--button-hover);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.08);
}

.week-button:active[b-36b2wzwsbg],
.current-week-button:active[b-36b2wzwsbg],
.theme-button:active[b-36b2wzwsbg] {
    transform: translateY(1px) scale(0.97);
}

.week-display[b-36b2wzwsbg] {
    display: flex;
    min-width: 190px;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.week-display span[b-36b2wzwsbg] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.week-display strong[b-36b2wzwsbg] {
    font-size: 14px;
    white-space: nowrap;
}

.current-week-button[b-36b2wzwsbg] {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
}

.topbar-actions[b-36b2wzwsbg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}

.theme-button[b-36b2wzwsbg] {
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 8px;
    padding: 0 13px;
    border-radius: 10px;
    font-family: inherit;
    font-weight: 700;
}

.user-menu[b-36b2wzwsbg] {
    position: relative;
    z-index: 500;
    display: inline-flex;
}

.user-profile-button[b-36b2wzwsbg] {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 10px;
    padding: 3px 8px 3px 4px;
    border: 1px solid transparent;
    border-radius: 999px;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    transition: background 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.user-profile-button:hover[b-36b2wzwsbg],
.user-profile-button[aria-expanded="true"][b-36b2wzwsbg] {
    background: rgba(255, 255, 255, 0.68);
    border-color: rgba(23, 105, 220, 0.14);
    box-shadow: 0 10px 20px rgba(23, 105, 220, 0.08);
}

.user-avatar[b-36b2wzwsbg] {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #1f345f 0%, #1769dc 72%);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0;
    box-shadow: 0 8px 16px rgba(23, 105, 220, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.user-avatar-status-wrap[b-36b2wzwsbg] {
    position: relative;
    display: inline-flex;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
}

.user-presence-dot[b-36b2wzwsbg] {
    display: inline-block;
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #8a97a8;
}

.user-avatar-status-wrap > .user-presence-dot[b-36b2wzwsbg] {
    position: absolute;
    z-index: 6;
    right: -1px;
    bottom: 1px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--panel-background);
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.28);
}

.user-presence-dot.is-available[b-36b2wzwsbg] {
    background: #25bd78;
}

.user-presence-dot.is-brb[b-36b2wzwsbg] {
    background: #d99322;
}

.user-presence-dot.is-dnd[b-36b2wzwsbg] {
    background: #e5484d;
}

.user-presence-dot.is-offline[b-36b2wzwsbg] {
    background: #8a97a8;
}

.user-details[b-36b2wzwsbg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: left;
    white-space: nowrap;
}

.user-details strong[b-36b2wzwsbg] {
    font-size: 13px;
}

.user-details span[b-36b2wzwsbg] {
    color: var(--secondary-text);
    font-size: 11px;
}

.user-menu-chevron[b-36b2wzwsbg] {
    display: inline-flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: var(--secondary-text);
    font-size: 15px;
    transform: translateY(-1px);
    transition: transform 140ms ease;
}

.user-profile-button[aria-expanded="true"] .user-menu-chevron[b-36b2wzwsbg] {
    transform: translateY(1px) rotate(180deg);
}

.user-menu-panel[b-36b2wzwsbg] {
    position: absolute;
    z-index: 520;
    top: calc(100% + 10px);
    right: 0;
    width: 292px;
    max-height: calc(100vh - var(--app-header-height, 64px) - 22px);
    overflow-y: auto;
    display: grid;
    gap: 6px;
    padding: 10px;
    border: 1px solid rgba(214, 226, 238, 0.86);
    border-radius: 18px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 250, 255, 0.94)),
        radial-gradient(circle at 16% 18%, rgba(31, 159, 237, 0.12), transparent 40%);
    box-shadow: 0 22px 58px rgba(15, 45, 74, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(18px) saturate(1.12);
    animation: userMenuIn-b-36b2wzwsbg 160ms ease-out both;
}

.user-menu-summary[b-36b2wzwsbg] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 8px 10px;
    border-bottom: 1px solid rgba(216, 226, 238, 0.74);
}

.user-menu-summary div[b-36b2wzwsbg] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.user-menu-summary strong[b-36b2wzwsbg],
.user-menu-summary span[b-36b2wzwsbg] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-summary strong[b-36b2wzwsbg] {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 820;
}

.user-menu-summary div span[b-36b2wzwsbg] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
}

.user-presence-section[b-36b2wzwsbg],
.user-account-actions[b-36b2wzwsbg] {
    display: grid;
    gap: 3px;
}

.user-presence-section[b-36b2wzwsbg] {
    padding: 1px 0;
}

.user-presence-option[b-36b2wzwsbg] {
    display: flex;
    width: 100%;
    min-height: 36px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #153458;
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 730;
    text-align: left;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}

.user-presence-option:hover[b-36b2wzwsbg] {
    color: #075fba;
    background: rgba(23, 105, 220, 0.07);
    border-color: rgba(23, 105, 220, 0.09);
}

.user-presence-option.is-selected[b-36b2wzwsbg] {
    color: #103a6d;
    background: #e8f1ff;
    border-color: #cbdcf7;
}

.user-presence-check[b-36b2wzwsbg] {
    min-width: 14px;
    margin-left: auto;
    color: #1769dc;
    font-size: 13px;
    font-weight: 900;
    text-align: center;
}

.user-menu-separator[b-36b2wzwsbg] {
    height: 1px;
    margin: 3px 6px;
    background: rgba(180, 196, 214, 0.72);
}

.user-presence-error[b-36b2wzwsbg] {
    margin: 3px 6px 1px;
    padding: 7px 9px;
    border: 1px solid rgba(229, 72, 77, 0.28);
    border-radius: 9px;
    color: #a4313d;
    background: rgba(255, 236, 238, 0.78);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.3;
}

.user-menu-item[b-36b2wzwsbg] {
    display: flex;
    width: 100%;
    min-height: 40px;
    align-items: center;
    gap: 10px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #153458;
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 760;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background 130ms ease, border-color 130ms ease, color 130ms ease, transform 130ms ease;
}

.user-menu-item:hover[b-36b2wzwsbg] {
    color: #075fba;
    background: rgba(23, 105, 220, 0.08);
    border-color: rgba(23, 105, 220, 0.10);
    transform: translateY(-1px);
}

.user-profile-button:focus-visible[b-36b2wzwsbg],
.user-presence-option:focus-visible[b-36b2wzwsbg],
.user-menu-item:focus-visible[b-36b2wzwsbg] {
    outline: 2px solid #1769dc;
    outline-offset: 2px;
}

.user-menu-item.danger:hover[b-36b2wzwsbg] {
    color: #a4313d;
    background: rgba(255, 227, 231, 0.76);
    border-color: rgba(211, 107, 119, 0.22);
}

.user-menu-sign-out-form[b-36b2wzwsbg] {
    display: block;
    margin: 0;
}

@keyframes userMenuIn-b-36b2wzwsbg {
    from {
        opacity: 0;
        transform: translateY(-6px) scale(0.985);
    }

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

.content-area[b-36b2wzwsbg] {
    position: relative;
    min-width: 0;
    overflow: auto;
    padding: 14px 22px 18px;
    color: var(--primary-text);
    background: var(--page-background);
}

.sidebar-collapse-toggle[b-36b2wzwsbg] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid color-mix(in srgb, #1769dc 40%, var(--border-color) 60%);
    border-radius: 9px;
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 12%, var(--button-background) 88%);
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.sidebar-collapse-toggle svg[b-36b2wzwsbg] {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sidebar-collapse-toggle:hover[b-36b2wzwsbg] {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.28);
}

.sidebar-collapse-toggle:active[b-36b2wzwsbg] {
    transform: scale(0.94);
}

@media (max-width: 1150px) {
    .topbar[b-36b2wzwsbg] {
        grid-template-columns: minmax(180px, 1fr) auto;
    }

    .week-navigation[b-36b2wzwsbg] {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: center;
        padding-top: 8px;
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 820px) {
    .app-shell[b-36b2wzwsbg] {
        grid-template-columns: 88px minmax(0, 1fr);
    }

    .brand[b-36b2wzwsbg] {
        justify-content: center;
        padding-inline: 10px;
    }

    .brand-logo-image[b-36b2wzwsbg] {
        width: 58px;
        min-width: 58px;
        height: 44px;
    }

    .brand-copy[b-36b2wzwsbg],
    .nav-label[b-36b2wzwsbg],
    .nav-section-label[b-36b2wzwsbg] {
        display: none;
    }

    .sidebar-nav[b-36b2wzwsbg]  .nav-item,
    .sidebar-nav button.nav-item[b-36b2wzwsbg],
    .collapse-button[b-36b2wzwsbg] {
        justify-content: center;
        padding-inline: 0;
    }

    .topbar[b-36b2wzwsbg] {
        grid-template-columns: minmax(0, 1fr) auto;
        padding-inline: 14px;
    }

    .page-heading strong[b-36b2wzwsbg] {
        font-size: 21px;
    }

    .user-details[b-36b2wzwsbg],
    .theme-button span:last-child[b-36b2wzwsbg] {
        display: none;
    }

    .topbar-actions[b-36b2wzwsbg] {
        gap: 8px;
    }

    .theme-button[b-36b2wzwsbg] {
        width: 40px;
        justify-content: center;
        padding: 0;
    }

    .user-profile-button[b-36b2wzwsbg] {
        padding: 2px;
    }

    .user-menu-chevron[b-36b2wzwsbg],
    .sign-out-form[b-36b2wzwsbg] {
        display: none;
    }

    .content-area[b-36b2wzwsbg] {
        padding: 14px;
    }
}

@media (max-width: 600px) {
    .app-shell[b-36b2wzwsbg],
    .app-shell.sidebar-collapsed[b-36b2wzwsbg] {
        grid-template-columns: 1fr;
    }

    .sidebar[b-36b2wzwsbg] {
        display: none;
    }

    .mobile-menu-button[b-36b2wzwsbg] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-collapse-toggle[b-36b2wzwsbg] {
        display: none;
    }

    .topbar[b-36b2wzwsbg] {
        grid-template-columns: minmax(0, 1fr) auto;
    }

    .week-navigation[b-36b2wzwsbg] {
        overflow-x: auto;
        justify-content: flex-start;
    }

    .week-display[b-36b2wzwsbg] {
        min-width: 160px;
    }

    .current-week-button[b-36b2wzwsbg] {
        white-space: nowrap;
    }

    .user-menu-panel[b-36b2wzwsbg] {
        right: -6px;
        width: min(292px, calc(100vw - 24px));
    }
}

.topbar[b-36b2wzwsbg] {
    position: relative;
    isolation: isolate;
    overflow: visible;
    z-index: 2000;
    background:
        radial-gradient(circle at 20% 26%, rgba(31, 159, 237, 0.10) 0%, rgba(31, 159, 237, 0) 30%),
        radial-gradient(circle at 52% 14%, rgba(23, 105, 220, 0.10) 0%, rgba(23, 105, 220, 0) 34%),
        radial-gradient(circle at 86% 34%, rgba(53, 201, 154, 0.09) 0%, rgba(53, 201, 154, 0) 30%),
        rgba(255, 255, 255, 0.92);
}

.app-shell.theme-dark .topbar[b-36b2wzwsbg] {
    background:
        radial-gradient(circle at 16% 26%, rgba(31, 159, 237, 0.08) 0%, rgba(31, 159, 237, 0) 30%),
        radial-gradient(circle at 52% 14%, rgba(23, 105, 220, 0.10) 0%, rgba(23, 105, 220, 0) 34%),
        radial-gradient(circle at 86% 34%, rgba(53, 201, 154, 0.08) 0%, rgba(53, 201, 154, 0) 30%),
        rgba(24, 33, 45, 0.92);
}

.topbar[b-36b2wzwsbg]::before {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 48%, rgba(31, 159, 237, 0.14) 0%, rgba(31, 159, 237, 0) 27%),
        radial-gradient(circle at 52% 42%, rgba(23, 105, 220, 0.13) 0%, rgba(23, 105, 220, 0) 31%),
        radial-gradient(circle at 82% 54%, rgba(53, 201, 154, 0.11) 0%, rgba(53, 201, 154, 0) 27%);
    content: "";
    pointer-events: none;
    animation: topbarAuroraDrift-b-36b2wzwsbg 18s ease-in-out infinite alternate;
}

.topbar[b-36b2wzwsbg]::after {
    position: absolute;
    top: 0;
    left: -22%;
    width: 28%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0) 100%);
    transform: rotate(8deg);
    content: "";
    pointer-events: none;
    animation: topbarSoftSheen-b-36b2wzwsbg 20s ease-in-out infinite;
}

@keyframes topbarAuroraDrift-b-36b2wzwsbg {
    0% {
        transform: translate3d(-1%, 0, 0) scale(1);
        opacity: 0.74;
    }

    100% {
        transform: translate3d(2%, 1%, 0) scale(1.03);
        opacity: 1;
    }
}

@keyframes topbarSoftSheen-b-36b2wzwsbg {
    0%, 100% {
        transform: translateX(-20%) rotate(8deg);
        opacity: 0;
    }

    12% {
        opacity: 0.22;
    }

    38% {
        transform: translateX(520%) rotate(8deg);
        opacity: 0;
    }
}

.page-heading strong[b-36b2wzwsbg],
.week-display strong[b-36b2wzwsbg],
.theme-button[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
}

.sidebar[b-36b2wzwsbg]::before {
    z-index: 3;
}

.sidebar[b-36b2wzwsbg]::after {
    z-index: 0;
}

.brand[b-36b2wzwsbg],
.sidebar-nav[b-36b2wzwsbg],
.collapse-button[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
}

.brand-logo-image[b-36b2wzwsbg],
.brand-copy[b-36b2wzwsbg] {
    position: relative;
    z-index: 2;
}

.sidebar-nav[b-36b2wzwsbg]  .nav-item,
.sidebar-nav button.nav-item[b-36b2wzwsbg] {
    isolation: isolate;
}

.topbar > *[b-36b2wzwsbg] {
    position: relative;
    z-index: 2;
}

.topbar-actions[b-36b2wzwsbg] {
    position: relative;
    z-index: 10;
    justify-self: end;
}

/*
   The chat backdrop normally sits below the topbar so the system controls,
   Messages and the profile remain available. This extension covers the
   header content to their left and fades out immediately before the action
   group instead of ending with a hard vertical edge.
*/
.topbar.chat-open .topbar-actions[b-36b2wzwsbg]::before {
    position: absolute;
    top: -12px;
    right: 100%;
    bottom: -12px;
    width: 100vw;
    z-index: -1;
    background: rgba(10, 24, 46, 0.34);
    content: "";
    pointer-events: auto;
    backdrop-filter: blur(3px) saturate(0.95);
    -webkit-mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 84px),
        rgba(0, 0, 0, 0.82) calc(100% - 58px),
        rgba(0, 0, 0, 0.34) calc(100% - 24px),
        transparent 100%);
    mask-image: linear-gradient(
        to right,
        #000 0,
        #000 calc(100% - 84px),
        rgba(0, 0, 0, 0.82) calc(100% - 58px),
        rgba(0, 0, 0, 0.34) calc(100% - 24px),
        transparent 100%);
    animation: chat-topbar-backdrop-in-b-36b2wzwsbg 180ms ease both;
}

.app-shell.theme-dark .topbar.chat-open .topbar-actions[b-36b2wzwsbg]::before {
    background: rgba(4, 10, 20, 0.52);
}

.topbar.chat-open .topbar-left[b-36b2wzwsbg],
.topbar.chat-open .week-navigation[b-36b2wzwsbg] {
    pointer-events: none;
}

@keyframes chat-topbar-backdrop-in-b-36b2wzwsbg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar.chat-open .topbar-actions[b-36b2wzwsbg]::before {
        animation: none;
    }
}

.user-menu[b-36b2wzwsbg] {
    position: relative;
    z-index: 20;
}

.user-menu-panel[b-36b2wzwsbg] {
    z-index: 30;
}

.topbar[b-36b2wzwsbg]::before,
.topbar[b-36b2wzwsbg]::after {
    z-index: 0;
}

.app-shell.theme-dark .user-profile-button:hover[b-36b2wzwsbg],
.app-shell.theme-dark .user-profile-button[aria-expanded="true"][b-36b2wzwsbg] {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(111, 199, 199, 0.16);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
}

.app-shell.theme-dark .user-menu-panel[b-36b2wzwsbg] {
    border-color: rgba(111, 199, 199, 0.14);
    background:
        linear-gradient(180deg, rgba(24, 33, 45, 0.96), rgba(17, 27, 40, 0.95)),
        radial-gradient(circle at 16% 18%, rgba(31, 159, 237, 0.14), transparent 40%);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-shell.theme-dark .user-menu-summary[b-36b2wzwsbg] {
    border-bottom-color: rgba(111, 199, 199, 0.12);
}

.app-shell.theme-dark .user-avatar-status-wrap > .user-presence-dot[b-36b2wzwsbg] {
    border-color: #18212d;
}

.app-shell.theme-dark .user-presence-option[b-36b2wzwsbg] {
    color: #e8f2ff;
}

.app-shell.theme-dark .user-presence-option:hover[b-36b2wzwsbg] {
    color: #b9f2f8;
    background: rgba(111, 199, 199, 0.09);
    border-color: rgba(111, 199, 199, 0.12);
}

.app-shell.theme-dark .user-presence-option.is-selected[b-36b2wzwsbg] {
    color: #f4fbff;
    background: #173553;
    border-color: #2d5c7b;
}

.app-shell.theme-dark .user-presence-check[b-36b2wzwsbg] {
    color: #8ee5ef;
}

.app-shell.theme-dark .user-menu-separator[b-36b2wzwsbg] {
    background: rgba(111, 199, 199, 0.16);
}

.app-shell.theme-dark .user-presence-error[b-36b2wzwsbg] {
    color: #ffd7dc;
    background: rgba(224, 92, 105, 0.12);
    border-color: rgba(224, 92, 105, 0.22);
}

.app-shell.theme-dark .user-menu-item[b-36b2wzwsbg] {
    color: #e8f2ff;
}

.app-shell.theme-dark .user-menu-item:hover[b-36b2wzwsbg] {
    color: #9fe7f0;
    background: rgba(111, 199, 199, 0.10);
    border-color: rgba(111, 199, 199, 0.12);
}

.app-shell.theme-dark .user-menu-item.danger:hover[b-36b2wzwsbg] {
    color: #ffd7dc;
    background: rgba(224, 92, 105, 0.14);
    border-color: rgba(224, 92, 105, 0.20);
}


.app-shell.theme-dark .collapse-button[b-36b2wzwsbg] {
    color: #f4f8fd;
    border-color: rgba(111, 199, 199, 0.12);
    background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.06) 100%);
    box-shadow: 0 10px 18px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.05);
}

.app-shell.theme-dark .collapse-button:hover[b-36b2wzwsbg] {
    background: linear-gradient(180deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.08) 100%);
    border-color: rgba(111, 199, 199, 0.18);
    box-shadow: 0 12px 22px rgba(0,0,0,0.24), 0 0 16px rgba(111, 199, 199, 0.08);
}

.app-shell.theme-dark .collapse-button .nav-icon[b-36b2wzwsbg] {
    color: #8fd8e2;
    background: linear-gradient(135deg, rgba(23, 105, 220, 0.22) 0%, rgba(88, 172, 192, 0.26) 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 0 12px rgba(111,199,199,0.10);
}

.app-shell[b-36b2wzwsbg] {
    user-select: none;
    -webkit-user-select: none;
}

.app-shell input[b-36b2wzwsbg],
.app-shell textarea[b-36b2wzwsbg],
.app-shell select[b-36b2wzwsbg],
.app-shell option[b-36b2wzwsbg],
.app-shell [contenteditable="true"][b-36b2wzwsbg],
.app-shell .allow-text-selection[b-36b2wzwsbg] {
    user-select: text;
    -webkit-user-select: text;
}

.app-shell button[b-36b2wzwsbg],
.app-shell a[b-36b2wzwsbg],
.app-shell [role="button"][b-36b2wzwsbg],
.app-shell [role="tab"][b-36b2wzwsbg],
.app-shell [role="menuitem"][b-36b2wzwsbg] {
    -webkit-tap-highlight-color: transparent;
}

.tips-toggle-button[b-36b2wzwsbg] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border: 1px solid rgba(76, 139, 224, 0.45);
    border-radius: 10px;
    color: #1554ad;
    background: linear-gradient(180deg, #f8fbff 0%, #dceaff 56%, #c5daf8 100%);
    box-shadow: 0 6px 13px rgba(43, 98, 173, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -2px 0 rgba(53, 111, 190, 0.16);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease, opacity 140ms ease;
}

.tips-toggle-button:hover[b-36b2wzwsbg] {
    transform: translateY(-1px);
    box-shadow: 0 9px 18px rgba(43, 98, 173, 0.21), inset 0 1px 0 rgba(255, 255, 255, 0.96), inset 0 -2px 0 rgba(53, 111, 190, 0.18);
    filter: saturate(1.06);
}

.tips-toggle-button:active[b-36b2wzwsbg] {
    transform: translateY(1px) scale(0.98);
}

.tips-toggle-button.disabled[b-36b2wzwsbg] {
    color: var(--secondary-text);
    border-color: var(--border-color);
    background: linear-gradient(180deg, var(--button-background) 0%, var(--button-hover) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
    opacity: 0.78;
}

.tips-toggle-icon[b-36b2wzwsbg] {
    font-size: 14px;
    line-height: 1;
}

.app-shell.theme-dark .tips-toggle-button.enabled[b-36b2wzwsbg] {
    color: #dceaff;
    border-color: rgba(112, 166, 236, 0.5);
    background: linear-gradient(180deg, #294b77 0%, #203d65 58%, #193451 100%);
    box-shadow: 0 7px 16px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

#blazor-error-ui[b-36b2wzwsbg] {
    position: fixed;
    right: 22px;
    bottom: 22px;
    left: auto;
    z-index: 7000;
    display: none;
    width: min(440px, calc(100vw - 28px));
    min-height: 76px;
    align-items: center;
    gap: 12px;
    padding: 16px 52px 16px 18px;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 20px;
    color: #08223f;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(238, 249, 255, 0.82)),
        radial-gradient(circle at 12% 26%, rgba(88, 209, 228, 0.18), transparent 44%);
    box-shadow: 0 24px 68px rgba(5, 43, 76, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.98);
    font-size: 13px;
    font-weight: 760;
    line-height: 1.35;
    backdrop-filter: blur(18px) saturate(1.16);
}

#blazor-error-ui[b-36b2wzwsbg]::before {
    display: grid;
    width: 34px;
    height: 34px;
    min-width: 34px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ca424e, #0878d7);
    box-shadow: 0 10px 24px rgba(8, 120, 215, 0.20);
    content: "!";
    font-size: 18px;
    font-weight: 900;
}

#blazor-error-ui a.reload[b-36b2wzwsbg] {
    margin-left: auto;
    color: #075fba;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

#blazor-error-ui a.reload:hover[b-36b2wzwsbg] {
    text-decoration: underline;
}

#blazor-error-ui .dismiss[b-36b2wzwsbg] {
    position: absolute;
    top: 12px;
    right: 14px;
    color: #5b7894;
    font-size: 18px;
    font-weight: 800;
    cursor: pointer;
}

.app-shell.theme-dark #blazor-error-ui[b-36b2wzwsbg] {
    color: #e8f2ff;
    border-color: rgba(111, 199, 199, 0.16);
    background:
        linear-gradient(145deg, rgba(24, 33, 45, 0.96), rgba(17, 27, 40, 0.94)),
        radial-gradient(circle at 12% 26%, rgba(88, 209, 228, 0.14), transparent 44%);
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.sign-out-form[b-36b2wzwsbg] {
    display: inline-flex;
    margin: 0;
}

.sign-out-button[b-36b2wzwsbg] {
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: transform 130ms ease, border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.sign-out-button svg[b-36b2wzwsbg] {
    display: block;
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sign-out-button:hover[b-36b2wzwsbg] {
    transform: translateY(-1px);
    border-color: #d36b77;
    color: #a4313d;
    background: color-mix(in srgb, var(--button-background) 84%, #ffe3e7 16%);
    box-shadow: 0 8px 16px rgba(164, 49, 61, 0.10);
}

.sign-out-button:active[b-36b2wzwsbg] {
    transform: translateY(0) scale(0.98);
}

@media (max-width: 1280px) {
    .sign-out-button[b-36b2wzwsbg] {
        width: 38px;
        padding: 0;
        overflow: hidden;
    }

    .sign-out-button span[b-36b2wzwsbg] {
        display: none;
    }
}


.database-reconnect-overlay[b-36b2wzwsbg] {
    position: fixed;
    z-index: 5000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 28px;
    background:
        radial-gradient(ellipse at 30% 18%, rgba(255, 255, 255, .38), transparent 44%),
        radial-gradient(ellipse at 78% 82%, rgba(88, 209, 228, .18), transparent 42%),
        rgba(10, 34, 58, .34);
    backdrop-filter: blur(7px) saturate(.9);
    -webkit-user-select: none;
    user-select: none;
    cursor: wait;
    animation: databaseReconnectOverlayIn-b-36b2wzwsbg 220ms ease-out both;
}

.database-reconnect-card[b-36b2wzwsbg] {
    position: relative;
    display: grid;
    width: min(520px, calc(100vw - 38px));
    min-height: 360px;
    justify-items: center;
    gap: 22px;
    padding: 48px 42px 34px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 30px;
    color: #06223f;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .84), rgba(238, 249, 255, .66)),
        linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, .16));
    box-shadow:
        0 44px 120px rgba(5, 43, 76, .28),
        0 14px 36px rgba(20, 126, 196, .13),
        inset 0 1px 0 rgba(255, 255, 255, .98),
        inset 0 0 0 1px rgba(87, 168, 220, .08);
    backdrop-filter: blur(28px) saturate(1.2);
    text-align: center;
    animation: databaseReconnectCardIn-b-36b2wzwsbg 420ms cubic-bezier(.22, 1, .36, 1) both;
}

.database-reconnect-card[b-36b2wzwsbg]::before,
.database-reconnect-card[b-36b2wzwsbg]::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.database-reconnect-card[b-36b2wzwsbg]::before {
    inset: -30%;
    background:
        radial-gradient(circle at 50% 14%, rgba(88, 209, 228, .22), transparent 30%),
        url("/images/login/bio-microorganism-field.png");
    background-position: center;
    background-size: cover;
    opacity: .08;
    filter: blur(10px) saturate(.9);
    animation: databaseReconnectMicrobes-b-36b2wzwsbg 18s ease-in-out infinite alternate;
}

.database-reconnect-card[b-36b2wzwsbg]::after {
    top: -42%;
    left: -58%;
    width: 92%;
    height: 34%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
    filter: blur(10px);
    transform: rotate(18deg);
    animation: databaseReconnectSheen-b-36b2wzwsbg 7s ease-in-out infinite;
}

.database-reconnect-card > *[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
}

.database-reconnect-orbit[b-36b2wzwsbg] {
    position: relative;
    display: grid;
    width: 110px;
    height: 110px;
    place-items: center;
}

.database-reconnect-orbit span[b-36b2wzwsbg] {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.database-reconnect-orbit span:first-child[b-36b2wzwsbg] {
    inset: 0;
    border: 2px solid rgba(8, 120, 215, .16);
    border-top-color: #0878d7;
    border-right-color: #58d1e4;
    box-shadow: 0 0 34px rgba(31, 159, 237, .18);
    animation: databaseReconnectSpin-b-36b2wzwsbg 1.35s linear infinite;
}

.database-reconnect-orbit span:last-child[b-36b2wzwsbg] {
    inset: 12px;
    border: 1px solid rgba(53, 201, 154, .18);
    border-bottom-color: rgba(53, 201, 154, .6);
    animation: databaseReconnectSpin-b-36b2wzwsbg 2.1s linear infinite reverse;
}

.database-reconnect-orbit[b-36b2wzwsbg]::after {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(88, 209, 228, .18);
    border-radius: 50%;
    content: "";
    animation: databaseReconnectPulse-b-36b2wzwsbg 2.4s ease-out infinite;
}

.database-reconnect-orbit strong[b-36b2wzwsbg] {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid rgba(8, 120, 215, .38);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #1f9fed, #075fba);
    box-shadow: 0 16px 34px rgba(8, 120, 215, .24), inset 0 1px 0 rgba(255, 255, 255, .28);
    font-size: 22px;
    font-weight: 850;
    line-height: 1;
    animation: databaseReconnectNumberPulse-b-36b2wzwsbg 1.9s ease-in-out infinite;
}

.database-reconnect-copy[b-36b2wzwsbg] {
    display: grid;
    gap: 8px;
    max-width: 390px;
}

.database-reconnect-copy span[b-36b2wzwsbg] {
    color: #ca424e;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.database-reconnect-copy strong[b-36b2wzwsbg] {
    color: #082f5d;
    font-size: clamp(30px, 2.8vw, 42px);
    font-weight: 820;
    letter-spacing: 0;
    line-height: 1.05;
}

.database-reconnect-copy p[b-36b2wzwsbg] {
    margin: 0;
    color: #315b7e;
    font-size: 15px;
    font-weight: 630;
    line-height: 1.45;
}

.database-reconnect-progress[b-36b2wzwsbg] {
    width: min(330px, 88%);
    height: 8px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(78, 136, 184, .16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .72);
}

.database-reconnect-progress span[b-36b2wzwsbg] {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #0878d7, #1f9fed, #58d1e4, #35c99a);
    box-shadow: 0 0 18px rgba(31, 159, 237, .34);
    transform: scaleX(var(--offline-progress, 0));
    transform-origin: left;
    transition: transform 240ms linear;
}

.database-reconnect-card small[b-36b2wzwsbg] {
    max-width: 390px;
    color: rgba(25, 78, 120, .66);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.45;
}

@keyframes databaseReconnectOverlayIn-b-36b2wzwsbg {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes databaseReconnectCardIn-b-36b2wzwsbg {
    from {
        opacity: 0;
        transform: translateY(14px) scale(.982);
    }

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

@keyframes databaseReconnectMicrobes-b-36b2wzwsbg {
    from {
        transform: translate3d(-18px, 10px, 0) scale(1.04);
    }

    to {
        transform: translate3d(20px, -16px, 0) scale(1.12);
    }
}

@keyframes databaseReconnectSheen-b-36b2wzwsbg {
    0%, 16% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(18deg);
    }

    34% {
        opacity: .86;
    }

    64%, 100% {
        opacity: 0;
        transform: translate3d(190%, 620%, 0) rotate(18deg);
    }
}

@keyframes databaseReconnectSpin-b-36b2wzwsbg {
    to {
        transform: rotate(360deg);
    }
}

@keyframes databaseReconnectPulse-b-36b2wzwsbg {
    from {
        opacity: .58;
        transform: scale(.82);
    }

    to {
        opacity: 0;
        transform: scale(1.28);
    }
}

@keyframes databaseReconnectNumberPulse-b-36b2wzwsbg {
    0%, 100% {
        transform: scale(.96);
    }

    50% {
        transform: scale(1.04);
    }
}

@media (max-width: 620px) {
    .database-reconnect-overlay[b-36b2wzwsbg] {
        padding: 10px;
    }

    .database-reconnect-card[b-36b2wzwsbg] {
        min-height: 340px;
        padding: 36px 22px 28px;
        border-radius: 24px;
    }

    .database-reconnect-copy strong[b-36b2wzwsbg] {
        font-size: 30px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .database-reconnect-overlay[b-36b2wzwsbg],
    .database-reconnect-card[b-36b2wzwsbg],
    .database-reconnect-card[b-36b2wzwsbg]::before,
    .database-reconnect-card[b-36b2wzwsbg]::after,
    .database-reconnect-orbit span[b-36b2wzwsbg],
    .database-reconnect-orbit[b-36b2wzwsbg]::after,
    .database-reconnect-orbit strong[b-36b2wzwsbg] {
        animation: none;
    }
}

/* Header cleanup patch
   The theme switch remains available in the user profile menu.
   The duplicated topbar theme button is hidden to keep the header cleaner.
*/
.topbar-actions > .theme-button[b-36b2wzwsbg] {
    display: none !important;
}

/* === Messages launcher (topbar) === */
.chat-launcher-button[b-36b2wzwsbg] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(23, 105, 220, 0.2);
    border-radius: 10px;
    color: var(--secondary-text);
    background: var(--panel-background, #ffffff);
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.chat-launcher-button svg[b-36b2wzwsbg] {
    width: 19px;
    height: 19px;
}

.chat-launcher-button:hover[b-36b2wzwsbg] {
    color: #1769dc;
    background: rgba(23, 105, 220, 0.08);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.14);
    transform: translateY(-1px);
}

.chat-launcher-badge[b-36b2wzwsbg] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--panel-background, #ffffff);
    color: #ffffff;
    background: #e2543b;
    font-size: 9.5px;
    font-weight: 800;
    line-height: 1;
}

.app-shell.theme-dark .chat-launcher-button[b-36b2wzwsbg] {
    border-color: rgba(120, 170, 235, 0.24);
    background: transparent;
}

/* ============================================================
   Topbar profile patch
   1. The standalone Sign Out button is gone from the header
      (sign out now lives only inside the profile menu).
   2. The profile chip (initials + name) is pushed to the far
      right edge of the header, into the space that button used.
   3. The initials avatar gets an animated aurora glow.
   ============================================================ */

/* Legacy sign-out styles are dead markup now - keep the header clean. */
.topbar-actions > .sign-out-form[b-36b2wzwsbg] {
    display: none !important;
}

.topbar-actions[b-36b2wzwsbg] {
    gap: 10px;
    padding-right: 0;
}

/* Two restrained separators define the three logical header groups. */
.topbar-action-separator[b-36b2wzwsbg] {
    width: 1px;
    height: 26px;
    flex: 0 0 1px;
    margin-inline: 3px;
    background: linear-gradient(180deg, transparent, var(--border-color) 26%, var(--border-color) 74%, transparent);
    opacity: .85;
    pointer-events: none;
}

.app-shell.theme-dark .topbar-action-separator[b-36b2wzwsbg] {
    background: linear-gradient(180deg, transparent, rgba(111, 199, 199, .24) 26%, rgba(111, 199, 199, .24) 74%, transparent);
}

/* Profile chip still hugs the right edge without an extra internal separator. */
.topbar-actions > .user-menu[b-36b2wzwsbg] {
    margin-left: 0;
    margin-right: -4px;
    padding-left: 0;
}

.user-profile-button[b-36b2wzwsbg] {
    padding: 3px 10px 3px 5px;
}

/* --- Animated initials avatar: dark drifting smoke / storm cloud --- */

.user-avatar-live[b-36b2wzwsbg] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(120% 120% at 50% 120%, #3a2350 0%, #1a1030 70%),
        linear-gradient(160deg, #2e1c46 0%, #150c28 100%);
    background-size: 160% 160%, 100% 100%;
    animation: avatarSurfaceDrift-b-36b2wzwsbg 11s ease-in-out infinite;
}

.user-avatar-initials[b-36b2wzwsbg] {
    position: relative;
    z-index: 4;
    display: block;
    line-height: 1;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Smoke layer 1: big, dense dark plumes that roll and twist. Higher-contrast
   billows so the movement reads clearly against the dark disc. */
.user-avatar-live[b-36b2wzwsbg]::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: -55%;
    border-radius: 46%;
    background:
        radial-gradient(38% 34% at 28% 30%, rgba(198, 150, 232, 0.98) 0%, rgba(198, 150, 232, 0) 58%),
        radial-gradient(44% 40% at 70% 34%, rgba(92, 52, 132, 1) 0%, rgba(92, 52, 132, 0) 60%),
        radial-gradient(48% 44% at 44% 74%, rgba(216, 176, 244, 0.85) 0%, rgba(216, 176, 244, 0) 60%),
        radial-gradient(36% 32% at 82% 78%, rgba(58, 30, 88, 1) 0%, rgba(58, 30, 88, 0) 56%);
    filter: blur(1.5px) contrast(1.6) saturate(1.15);
    opacity: 0.98;
    pointer-events: none;
    animation: avatarSmokeRoll-b-36b2wzwsbg 8s ease-in-out infinite;
}

/* Smoke layer 2: a second, lighter set of wisps moving the other way and at a
   different speed, so the plumes constantly cross and never look static. */
.user-avatar-live[b-36b2wzwsbg]::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: -50%;
    border-radius: 44%;
    background:
        radial-gradient(34% 30% at 62% 26%, rgba(224, 190, 248, 0.85) 0%, rgba(224, 190, 248, 0) 56%),
        radial-gradient(42% 38% at 30% 60%, rgba(112, 64, 158, 0.95) 0%, rgba(112, 64, 158, 0) 60%),
        radial-gradient(38% 34% at 78% 62%, rgba(180, 132, 220, 0.8) 0%, rgba(180, 132, 220, 0) 58%);
    filter: blur(2px) contrast(1.5) saturate(1.1);
    opacity: 0.85;
    mix-blend-mode: screen;
    pointer-events: none;
    animation: avatarSmokeRollReverse-b-36b2wzwsbg 11s ease-in-out infinite;
}

.user-profile-button:hover .user-avatar-live[b-36b2wzwsbg],
.user-profile-button[aria-expanded="true"] .user-avatar-live[b-36b2wzwsbg] {
    box-shadow:
        0 10px 22px rgba(10, 18, 32, 0.42),
        0 0 0 2px rgba(120, 150, 198, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

.user-avatar-live[b-36b2wzwsbg] {
    transition: box-shadow 180ms ease, transform 180ms ease;
}

/* NOTE: hover intentionally does NOT change animation-duration. Re-timing a
   running animation makes it jump/restart, which looked like a reset when the
   cursor entered the chip. Keeping the timing constant lets the smoke roll on
   seamlessly; hover only lifts the disc + brightens the ring below. */

/* Softer variant used inside the dropdown summary. */
.user-avatar-soft[b-36b2wzwsbg]::after {
    opacity: 0.55;
    animation-duration: 22s;
}

.user-avatar-soft[b-36b2wzwsbg]::before {
    opacity: 0.8;
    animation-duration: 20s;
}

.app-shell.theme-dark .user-avatar-live[b-36b2wzwsbg] {
    background:
        radial-gradient(120% 120% at 50% 120%, #15243f 0%, #060c16 72%),
        linear-gradient(160deg, #101d33 0%, #070e1a 100%);
    background-size: 160% 160%, 100% 100%;
}

.app-shell.theme-dark .user-avatar-live[b-36b2wzwsbg]::before {
    opacity: 1;
}

@keyframes avatarSurfaceDrift-b-36b2wzwsbg {
    0%, 100% {
        background-position: 0% 50%, 0 0;
    }

    50% {
        background-position: 100% 50%, 0 0;
    }
}

/* Primary plumes: translate + rotate + scale so the dark billows roll like
   smoke, folding into each other without ever repeating a frame mid-cycle. */
@keyframes avatarSmokeRoll-b-36b2wzwsbg {
    0% {
        transform: translate3d(-8%, 4%, 0) rotate(0deg) scale(1);
    }

    30% {
        transform: translate3d(6%, -6%, 0) rotate(28deg) scale(1.14);
    }

    60% {
        transform: translate3d(8%, 6%, 0) rotate(-18deg) scale(1.08);
    }

    100% {
        transform: translate3d(-8%, 4%, 0) rotate(0deg) scale(1);
    }
}

/* Secondary wisps: opposite rotation and drift, different pace. */
@keyframes avatarSmokeRollReverse-b-36b2wzwsbg {
    0% {
        transform: translate3d(7%, -5%, 0) rotate(0deg) scale(1.05);
    }

    35% {
        transform: translate3d(-6%, 6%, 0) rotate(-24deg) scale(1.12);
    }

    65% {
        transform: translate3d(-8%, -4%, 0) rotate(16deg) scale(1.02);
    }

    100% {
        transform: translate3d(7%, -5%, 0) rotate(0deg) scale(1.05);
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-avatar-live[b-36b2wzwsbg],
    .user-avatar-live[b-36b2wzwsbg]::before,
    .user-avatar-live[b-36b2wzwsbg]::after {
        animation: none !important;
    }

    .user-avatar-live[b-36b2wzwsbg]::before {
        opacity: 0.9;
    }
}

@media (max-width: 820px) {
    .topbar-actions > .user-menu[b-36b2wzwsbg] {
        margin-left: 0;
        padding-left: 0;
    }

    .topbar-action-separator[b-36b2wzwsbg] {
        display: none;
    }
}

/* ============================================================
   Messages launcher - refined visibility + calm animation
   (no flashing / sparkle effects, light + dark tuned)
   ============================================================ */

.topbar-actions > .chat-launcher-button[b-36b2wzwsbg] {
    width: 40px;
    height: 40px;
    min-height: 40px;
    border-radius: 12px;
    border: 1px solid rgba(23, 105, 220, 0.30);
    color: #1358bb;
    background:
        linear-gradient(180deg, #ffffff 0%, #eef4ff 100%);
    box-shadow:
        0 6px 14px rgba(23, 105, 220, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 200ms ease, transform 160ms ease;
    overflow: visible;
}

/* Slow "presence" ring - breathes, never blinks. */
.chat-launcher-button[b-36b2wzwsbg]::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1px;
    border-radius: inherit;
    border: 1px solid rgba(23, 105, 220, 0.35);
    opacity: 0;
    pointer-events: none;
    animation: chatPresenceRing-b-36b2wzwsbg 4.8s ease-in-out infinite;
}

.chat-launcher-icon[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.chat-launcher-button svg[b-36b2wzwsbg] {
    width: 20px;
    height: 20px;
    display: block;
}

/* The three dots type in sequence - quiet, continuous, no flicker. */
.chat-launcher-dot[b-36b2wzwsbg] {
    fill: currentColor;
    stroke: none;
    opacity: 0.25;
    transform-box: fill-box;
    transform-origin: center;
    animation: chatDotType-b-36b2wzwsbg 2.4s ease-in-out infinite;
}

.chat-launcher-dot:nth-of-type(2)[b-36b2wzwsbg] {
    animation-delay: 0.22s;
}

.chat-launcher-dot:nth-of-type(3)[b-36b2wzwsbg] {
    animation-delay: 0.44s;
}

.topbar-actions > .chat-launcher-button:hover[b-36b2wzwsbg] {
    color: #0d47a1;
    border-color: rgba(23, 105, 220, 0.55);
    background: linear-gradient(180deg, #ffffff 0%, #e2ecff 100%);
    box-shadow:
        0 10px 22px rgba(23, 105, 220, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.95);
    transform: translateY(-1px);
}

.chat-launcher-button:hover .chat-launcher-icon[b-36b2wzwsbg] {
    transform: scale(1.08) rotate(-4deg);
}

.topbar-actions > .chat-launcher-button:active[b-36b2wzwsbg] {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 10px rgba(23, 105, 220, 0.16);
}

.topbar-actions > .chat-launcher-button:focus-visible[b-36b2wzwsbg] {
    outline: none;
    border-color: rgba(23, 105, 220, 0.7);
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.18);
}

/* --- Unread state ------------------------------------------ */

.topbar-actions > .chat-launcher-button.has-unread[b-36b2wzwsbg] {
    border-color: rgba(226, 84, 59, 0.42);
    color: #1358bb;
    background: linear-gradient(180deg, #ffffff 0%, #fff1ec 100%);
    box-shadow:
        0 8px 18px rgba(226, 84, 59, 0.16),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.chat-launcher-button.has-unread[b-36b2wzwsbg]::before {
    border-color: rgba(226, 84, 59, 0.45);
    animation: chatUnreadRipple-b-36b2wzwsbg 2.6s ease-out infinite;
}

.chat-launcher-button.has-unread .chat-launcher-icon[b-36b2wzwsbg] {
    animation: chatNudge-b-36b2wzwsbg 5.5s ease-in-out infinite;
}

.chat-launcher-badge[b-36b2wzwsbg] {
    z-index: 2;
    box-shadow: 0 3px 8px rgba(226, 84, 59, 0.35);
}

/* --- Dark mode --------------------------------------------- */

.app-shell.theme-dark .topbar-actions > .chat-launcher-button[b-36b2wzwsbg] {
    color: #a9e6f2;
    border-color: rgba(111, 199, 199, 0.28);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .chat-launcher-button[b-36b2wzwsbg]::before {
    border-color: rgba(111, 199, 199, 0.45);
}

.app-shell.theme-dark .topbar-actions > .chat-launcher-button:hover[b-36b2wzwsbg] {
    color: #d5fbff;
    border-color: rgba(111, 199, 199, 0.5);
    background: linear-gradient(180deg, rgba(111, 199, 199, 0.16) 0%, rgba(111, 199, 199, 0.07) 100%);
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.34),
        0 0 18px rgba(111, 199, 199, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.app-shell.theme-dark .topbar-actions > .chat-launcher-button:focus-visible[b-36b2wzwsbg] {
    border-color: rgba(111, 199, 199, 0.75);
    box-shadow: 0 0 0 3px rgba(111, 199, 199, 0.20);
}

.app-shell.theme-dark .topbar-actions > .chat-launcher-button.has-unread[b-36b2wzwsbg] {
    color: #ffd9cf;
    border-color: rgba(226, 84, 59, 0.5);
    background: linear-gradient(180deg, rgba(226, 84, 59, 0.18) 0%, rgba(226, 84, 59, 0.06) 100%);
    box-shadow:
        0 10px 22px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .chat-launcher-button.has-unread[b-36b2wzwsbg]::before {
    border-color: rgba(255, 140, 110, 0.55);
}

.app-shell.theme-dark .chat-launcher-badge[b-36b2wzwsbg] {
    border-color: #16202e;
}

/* --- Keyframes --------------------------------------------- */

@keyframes chatPresenceRing-b-36b2wzwsbg {
    0%, 100% {
        opacity: 0;
        transform: scale(1);
    }

    45% {
        opacity: 0.55;
        transform: scale(1.09);
    }

    75% {
        opacity: 0.12;
        transform: scale(1.14);
    }
}

@keyframes chatUnreadRipple-b-36b2wzwsbg {
    0% {
        opacity: 0.65;
        transform: scale(1);
    }

    70% {
        opacity: 0;
        transform: scale(1.35);
    }

    100% {
        opacity: 0;
        transform: scale(1.35);
    }
}

@keyframes chatDotType-b-36b2wzwsbg {
    0%, 100% {
        opacity: 0.22;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-0.9px);
    }

    60% {
        opacity: 0.22;
        transform: translateY(0);
    }
}

@keyframes chatNudge-b-36b2wzwsbg {
    0%, 86%, 100% {
        transform: rotate(0deg);
    }

    89% {
        transform: rotate(-8deg);
    }

    93% {
        transform: rotate(7deg);
    }

    96% {
        transform: rotate(-3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-launcher-button[b-36b2wzwsbg]::before,
    .chat-launcher-dot[b-36b2wzwsbg],
    .chat-launcher-button.has-unread .chat-launcher-icon[b-36b2wzwsbg] {
        animation: none !important;
    }

    .chat-launcher-dot[b-36b2wzwsbg] {
        opacity: 0.5;
    }
}

/* ============================================================
   Topbar background - v2 "Signal Line"
   Replaces the drifting colour blobs + white sheen with:
     - a clean vertical base gradient
     - a very fine diagonal hairline weave that drifts slowly
     - a soft accent beam that travels along the bottom edge
   Calm, precise, works in both themes.
   ============================================================ */

.topbar[b-36b2wzwsbg] {
    --topbar-weave: rgba(23, 105, 220, 0.055);
    --topbar-beam: rgba(23, 105, 220, 0.55);
    --topbar-beam-soft: rgba(53, 201, 154, 0.30);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(243, 247, 253, 0.97) 100%);
}

.app-shell.theme-dark .topbar[b-36b2wzwsbg] {
    --topbar-weave: rgba(140, 205, 235, 0.055);
    --topbar-beam: rgba(88, 209, 228, 0.62);
    --topbar-beam-soft: rgba(23, 105, 220, 0.40);
    background:
        linear-gradient(180deg, rgba(27, 37, 51, 0.97) 0%, rgba(18, 26, 38, 0.97) 100%);
}

/* Fine diagonal weave - drifts continuously, no blobs, no pulsing. */
.topbar[b-36b2wzwsbg]::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.9;
    background:
        repeating-linear-gradient(115deg,
            var(--topbar-weave) 0px,
            var(--topbar-weave) 1px,
            transparent 1px,
            transparent 9px);
    background-size: 240px 240px;
    -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 42%, rgba(0, 0, 0, 0.15) 58%, rgba(0, 0, 0, 0.85) 100%);
    mask: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 42%, rgba(0, 0, 0, 0.15) 58%, rgba(0, 0, 0, 0.85) 100%);
    animation: topbarWeaveDrift-b-36b2wzwsbg 42s linear infinite;
    transform: none;
}

/* Accent beam gliding along the bottom edge. */
.topbar[b-36b2wzwsbg]::after {
    content: "";
    position: absolute;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: 2px;
    transform: none;
    pointer-events: none;
    opacity: 1;
    background:
        linear-gradient(90deg,
            transparent 0%,
            var(--topbar-beam-soft) 30%,
            var(--topbar-beam) 50%,
            var(--topbar-beam-soft) 70%,
            transparent 100%);
    background-size: 45% 100%;
    background-repeat: no-repeat;
    background-position: -50% 0;
    animation: topbarBeamGlide-b-36b2wzwsbg 11s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

@keyframes topbarWeaveDrift-b-36b2wzwsbg {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 240px 0;
    }
}

@keyframes topbarBeamGlide-b-36b2wzwsbg {
    0% {
        background-position: -50% 0;
        opacity: 0;
    }

    12% {
        opacity: 1;
    }

    88% {
        opacity: 1;
    }

    100% {
        background-position: 150% 0;
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar[b-36b2wzwsbg]::before,
    .topbar[b-36b2wzwsbg]::after {
        animation: none;
    }

    .topbar[b-36b2wzwsbg]::after {
        background-position: 50% 0;
        opacity: 0.55;
    }
}

/* ============================================================
   Topbar "Signal Line" - light mode refinement
   The weave/beam read well on dark, but wash out on white.
   Light mode gets: a slightly deeper base, thicker + denser
   hairlines with more ink, a softer centre mask (so the lines
   carry further across the bar) and a stronger, glowing beam.
   Dark mode is untouched.
   ============================================================ */

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg] {
    --topbar-weave: rgba(23, 105, 220, 0.14);
    --topbar-weave-2: rgba(53, 201, 154, 0.10);
    --topbar-beam: rgba(23, 105, 220, 0.85);
    --topbar-beam-soft: rgba(53, 201, 154, 0.45);
    background:
        linear-gradient(180deg, rgba(252, 253, 255, 0.98) 0%, rgba(235, 242, 251, 0.98) 100%);
}

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::before {
    opacity: 1;
    background:
        repeating-linear-gradient(115deg,
            var(--topbar-weave) 0px,
            var(--topbar-weave) 1.3px,
            transparent 1.3px,
            transparent 8px),
        repeating-linear-gradient(115deg,
            var(--topbar-weave-2) 0px,
            var(--topbar-weave-2) 1.3px,
            transparent 1.3px,
            transparent 32px);
    background-size: 240px 240px, 240px 240px;
    -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 1) 100%);
    mask: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.42) 40%, rgba(0, 0, 0, 0.42) 60%, rgba(0, 0, 0, 1) 100%);
}

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::after {
    height: 2px;
    box-shadow: 0 -1px 10px rgba(23, 105, 220, 0.22);
}

@keyframes topbarWeaveDriftLight-b-36b2wzwsbg {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 240px 0, 240px 0;
    }
}

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::before {
    animation: topbarWeaveDriftLight-b-36b2wzwsbg 42s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::before {
        animation: none;
    }
}

/* ============================================================
   Topbar "Signal Line" v3
     - light mode weave dialled back (was too loud on white)
     - the weave now glides one way, eases to a stop and
       reverses (ping-pong with a soft cubic curve)
     - new .topbar-fx layer: a wide, slow light band sweeping
       across the bar, travelling in the same direction as the
       weave so the whole header breathes as one motion
     - sidebar brand block aligned to the topbar height
   ============================================================ */

/* --- 1. Light mode: quieter weave --------------------------- */

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg] {
    --topbar-weave: rgba(23, 105, 220, 0.085);
    --topbar-weave-2: rgba(53, 201, 154, 0.055);
    --topbar-beam: rgba(23, 105, 220, 0.72);
    --topbar-beam-soft: rgba(53, 201, 154, 0.36);
}

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::before {
    -webkit-mask: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.30) 42%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.92) 100%);
    mask: linear-gradient(90deg, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.30) 42%, rgba(0, 0, 0, 0.30) 58%, rgba(0, 0, 0, 0.92) 100%);
}

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::after {
    box-shadow: 0 -1px 8px rgba(23, 105, 220, 0.16);
}

/* --- 2. Ping-pong drift ------------------------------------- */

.topbar[b-36b2wzwsbg]::before {
    animation: topbarWeaveDrift-b-36b2wzwsbg 30s cubic-bezier(0.62, 0, 0.38, 1) infinite alternate;
}

.app-shell:not(.theme-dark) .topbar[b-36b2wzwsbg]::before {
    animation: topbarWeaveDriftLight-b-36b2wzwsbg 30s cubic-bezier(0.62, 0, 0.38, 1) infinite alternate;
}

/* --- 3. Sweeping light band -------------------------------- */

.topbar > .topbar-fx[b-36b2wzwsbg] {
    position: absolute;
    z-index: 0;
    inset: 0;
    pointer-events: none;
    opacity: 0.75;
    background: linear-gradient(101deg,
        rgba(23, 105, 220, 0) 34%,
        rgba(23, 105, 220, 0.10) 46%,
        rgba(88, 209, 228, 0.14) 50%,
        rgba(53, 201, 154, 0.09) 54%,
        rgba(53, 201, 154, 0) 66%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    background-position: 0% 0;
    animation: topbarBandSweep-b-36b2wzwsbg 30s cubic-bezier(0.62, 0, 0.38, 1) infinite alternate;
}

.app-shell.theme-dark .topbar > .topbar-fx[b-36b2wzwsbg] {
    opacity: 0.9;
    background: linear-gradient(101deg,
        rgba(88, 209, 228, 0) 34%,
        rgba(23, 105, 220, 0.16) 45%,
        rgba(88, 209, 228, 0.20) 50%,
        rgba(53, 201, 154, 0.12) 55%,
        rgba(53, 201, 154, 0) 66%);
    background-size: 260% 100%;
}

@keyframes topbarBandSweep-b-36b2wzwsbg {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: 100% 0;
    }
}

/* --- 4. Brand block aligned with the topbar ----------------- */

.brand[b-36b2wzwsbg] {
    min-height: 64px;
    padding: 7px 16px 8px;
}

.brand-logo-image[b-36b2wzwsbg] {
    width: 84px;
    min-width: 84px;
    height: 44px;
}

.brand-copy[b-36b2wzwsbg] {
    gap: 1px;
    padding-top: 0;
    transform: translateY(-1px);
}

.brand-copy strong[b-36b2wzwsbg] {
    padding-bottom: 0;
    font-size: 16.5px;
    line-height: 1.24;
}

.brand-copy span[b-36b2wzwsbg] {
    font-size: 9.5px;
}

.brand[b-36b2wzwsbg]::after {
    right: 14px;
    bottom: 7px;
    left: 14px;
}

@media (max-width: 820px) {
    .brand-logo-image[b-36b2wzwsbg] {
        width: 56px;
        min-width: 56px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .topbar > .topbar-fx[b-36b2wzwsbg] {
        animation: none;
        background-position: 50% 0;
    }
}

/* ============================================================
   Topbar controls polish
     - week navigation becomes one segmented control
     - Current Week is now the accented primary action
   ============================================================ */

/* --- Week navigation as a single segmented control ---------- */

.week-navigation[b-36b2wzwsbg] {
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--button-background) 70%, transparent);
    box-shadow:
        0 6px 16px rgba(23, 105, 220, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.55);
}

.app-shell.theme-dark .week-navigation[b-36b2wzwsbg] {
    border-color: rgba(111, 199, 199, 0.16);
    background: rgba(255, 255, 255, 0.04);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.week-navigation > .week-button[b-36b2wzwsbg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--secondary-text);
    background: transparent;
    box-shadow: none;
    font-size: 21px;
    font-weight: 700;
    transition: color 150ms ease, background 150ms ease, border-color 150ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.week-navigation > .week-button:hover[b-36b2wzwsbg] {
    color: #1358bb;
    border-color: rgba(23, 105, 220, 0.24);
    background: rgba(23, 105, 220, 0.09);
    box-shadow: none;
}

.week-navigation > .previous-week-button:hover[b-36b2wzwsbg] {
    transform: translateX(-2px);
}

.week-navigation > .next-week-button:hover[b-36b2wzwsbg] {
    transform: translateX(2px);
}

.week-navigation > .week-button:active[b-36b2wzwsbg] {
    transform: scale(0.92);
}

.app-shell.theme-dark .week-navigation > .week-button:hover[b-36b2wzwsbg] {
    color: #a9e6f2;
    border-color: rgba(111, 199, 199, 0.28);
    background: rgba(111, 199, 199, 0.12);
}

.week-navigation > .weekly-manning-undo-button[b-36b2wzwsbg] {
    color: #1769dc;
}

.week-navigation > .weekly-manning-undo-button svg[b-36b2wzwsbg] {
    width: 19px;
    height: 19px;
}

.week-navigation > .weekly-manning-undo-button:hover:not(:disabled)[b-36b2wzwsbg] {
    transform: rotate(-8deg) translateY(-1px);
}

.week-navigation > .weekly-manning-undo-button:active:not(:disabled)[b-36b2wzwsbg] {
    transform: rotate(-4deg) scale(0.9);
}

.week-navigation > .weekly-manning-undo-button:disabled[b-36b2wzwsbg] {
    color: color-mix(in srgb, var(--secondary-text) 46%, transparent);
    border-color: transparent;
    background: transparent;
    cursor: not-allowed;
    opacity: 0.58;
    transform: none;
}

.app-shell.theme-dark .week-navigation > .weekly-manning-undo-button[b-36b2wzwsbg] {
    color: #8edce9;
}

.app-shell.theme-dark .week-navigation > .weekly-manning-undo-button:disabled[b-36b2wzwsbg] {
    color: rgba(169, 230, 242, 0.38);
}

.weekly-manning-undo-spinner[b-36b2wzwsbg] {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: weeklyManningUndoSpin-b-36b2wzwsbg 700ms linear infinite;
}

@keyframes weeklyManningUndoSpin-b-36b2wzwsbg {
    to {
        transform: rotate(360deg);
    }
}

.week-display[b-36b2wzwsbg] {
    padding: 0 6px;
    gap: 1px;
}

.week-display span[b-36b2wzwsbg] {
    font-size: 9.5px;
    letter-spacing: 0.9px;
}

.week-display strong[b-36b2wzwsbg] {
    font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1px;
}

/* Current Week = primary action, so it reads instantly. */
.week-navigation > .current-week-button[b-36b2wzwsbg] {
    position: relative;
    overflow: hidden;
    min-height: 34px;
    padding: 0 14px;
    border: 1px solid rgba(23, 105, 220, 0.42);
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #1f4fae 0%, #1769dc 62%, #2f9fd0 100%);
    font-size: 11.5px;
    font-weight: 780;
    letter-spacing: 0.2px;
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.24);
    transition: transform 170ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 170ms ease, filter 170ms ease;
}

.week-navigation > .current-week-button[b-36b2wzwsbg]::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.42) 50%, transparent 62%);
    background-size: 280% 100%;
    background-position: 150% 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 120ms ease;
}

.week-navigation > .current-week-button:hover[b-36b2wzwsbg] {
    transform: translateY(-1px);
    filter: saturate(1.06);
    background: linear-gradient(135deg, #1f4fae 0%, #1769dc 62%, #2f9fd0 100%);
    box-shadow: 0 12px 24px rgba(23, 105, 220, 0.32);
}

.week-navigation > .current-week-button:hover[b-36b2wzwsbg]::after {
    opacity: 1;
    animation: currentWeekSweep-b-36b2wzwsbg 700ms ease-out;
}

.week-navigation > .current-week-button:active[b-36b2wzwsbg] {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 6px 12px rgba(23, 105, 220, 0.24);
}

.app-shell.theme-dark .week-navigation > .current-week-button[b-36b2wzwsbg] {
    border-color: rgba(111, 199, 199, 0.34);
    background: linear-gradient(135deg, #17539f 0%, #1f7fd0 60%, #3fb6cf 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.34), 0 0 16px rgba(88, 209, 228, 0.14);
}

.week-navigation > .current-week-button:disabled[b-36b2wzwsbg],
.week-navigation > .current-week-button:disabled:hover[b-36b2wzwsbg],
.week-navigation > .current-week-button:disabled:active[b-36b2wzwsbg] {
    color: color-mix(in srgb, var(--secondary-text) 72%, transparent);
    border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    background: color-mix(in srgb, var(--button-background) 88%, var(--page-background) 12%);
    box-shadow: none;
    filter: none;
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.week-navigation > .current-week-button:disabled[b-36b2wzwsbg]::after,
.week-navigation > .current-week-button:disabled:hover[b-36b2wzwsbg]::after {
    display: none;
    animation: none;
    opacity: 0;
}

.app-shell.theme-dark .week-navigation > .current-week-button:disabled[b-36b2wzwsbg],
.app-shell.theme-dark .week-navigation > .current-week-button:disabled:hover[b-36b2wzwsbg],
.app-shell.theme-dark .week-navigation > .current-week-button:disabled:active[b-36b2wzwsbg] {
    color: rgba(185, 200, 219, 0.52);
    border-color: rgba(126, 151, 180, 0.18);
    background: rgba(255, 255, 255, 0.035);
    box-shadow: none;
}

@keyframes currentWeekSweep-b-36b2wzwsbg {
    from {
        background-position: 150% 0;
    }

    to {
        background-position: -50% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .week-navigation > .current-week-button[b-36b2wzwsbg]::after,
    .weekly-manning-undo-spinner[b-36b2wzwsbg] {
        animation: none !important;
    }

    .week-navigation > .weekly-manning-undo-button[b-36b2wzwsbg] {
        transition: none;
    }
}

/* Weekly Manning header actions stay visually separate from week navigation. */
.week-header-left-actions[b-36b2wzwsbg] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    margin-left: auto;
    white-space: nowrap;
}

.week-header-action[b-36b2wzwsbg] {
    position: relative;
    display: inline-flex;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #1769dc 28%, var(--border-color));
    border-radius: 10px;
    color: #1555aa;
    background: color-mix(in srgb, var(--button-background) 92%, #1769dc 8%);
    box-shadow: 0 5px 14px rgba(23, 105, 220, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 780;
    letter-spacing: 0.1px;
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, box-shadow 180ms ease, background 160ms ease;
}

.week-header-action svg[b-36b2wzwsbg] {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 170ms ease, filter 170ms ease;
}

.week-header-action:hover:not(:disabled)[b-36b2wzwsbg] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #1769dc 54%, var(--border-color));
    background: color-mix(in srgb, var(--button-background) 84%, #1769dc 16%);
    box-shadow: 0 9px 20px rgba(23, 105, 220, 0.18), 0 0 14px rgba(23, 105, 220, 0.10);
}

.week-header-action:hover:not(:disabled) svg[b-36b2wzwsbg] {
    transform: translateY(-1px) scale(1.05);
    filter: drop-shadow(0 0 5px rgba(23, 105, 220, 0.28));
}

.week-header-action:active:not(:disabled)[b-36b2wzwsbg] {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 3px 8px rgba(23, 105, 220, 0.14);
}

.week-header-action:disabled[b-36b2wzwsbg] {
    cursor: not-allowed;
    opacity: 0.52;
    box-shadow: none;
}

.app-shell.theme-dark .week-header-action[b-36b2wzwsbg] {
    border-color: rgba(111, 199, 199, 0.24);
    color: #a9e6f2;
    background: rgba(111, 199, 199, 0.08);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.app-shell.theme-dark .week-header-action:hover:not(:disabled)[b-36b2wzwsbg] {
    border-color: rgba(111, 199, 199, 0.46);
    background: rgba(111, 199, 199, 0.14);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28), 0 0 16px rgba(88, 209, 228, 0.13);
}

.week-header-separator[b-36b2wzwsbg] {
    width: 1px;
    height: 28px;
    flex: 0 0 1px;
    background: color-mix(in srgb, var(--border-color) 82%, transparent);
}

.navigation-separator[b-36b2wzwsbg] {
    margin-inline: 1px;
}

.week-header-action-spinner[b-36b2wzwsbg] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: weeklyManningUndoSpin-b-36b2wzwsbg 700ms linear infinite;
}

@media (max-width: 1450px) and (min-width: 1151px) {
    .week-header-left-actions[b-36b2wzwsbg] {
        gap: 6px;
    }

    .week-header-action[b-36b2wzwsbg] {
        width: 38px;
        padding: 0;
    }

    .week-header-action > span:not(.week-header-action-spinner)[b-36b2wzwsbg] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 1150px) {
    .week-header-left-actions[b-36b2wzwsbg] {
        gap: 6px;
    }
}

@media (max-width: 720px) {
    .week-header-action span:not(.week-header-action-spinner)[b-36b2wzwsbg] {
        display: none;
    }

    .week-header-action[b-36b2wzwsbg] {
        width: 38px;
        padding: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .week-header-action[b-36b2wzwsbg],
    .week-header-action svg[b-36b2wzwsbg] {
        transition: none;
    }

    .week-header-action:hover:not(:disabled)[b-36b2wzwsbg],
    .week-header-action:hover:not(:disabled) svg[b-36b2wzwsbg],
    .week-header-action:active:not(:disabled)[b-36b2wzwsbg] {
        transform: none;
    }

    .week-header-action-spinner[b-36b2wzwsbg] {
        animation: none;
    }
}

/* =====================================================================
   Weekly Manning header — zoom-safe responsive layout
   ---------------------------------------------------------------------
   Browser zoom and Windows display scaling reduce the effective CSS
   viewport. Keep the current single-row desktop header untouched on
   wide screens, but switch to a controlled two-row layout before the
   left, centre and right groups can collide.
   ===================================================================== */

@media (max-width: 1680px) and (min-width: 821px) {
    .app-shell[b-36b2wzwsbg] {
        --app-header-height: 112px;
    }

    .topbar[b-36b2wzwsbg] {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
        min-height: 112px;
        column-gap: 14px;
        row-gap: 7px;
        padding: 8px 14px 7px;
    }

    .topbar-left[b-36b2wzwsbg] {
        grid-column: 1;
        grid-row: 1;
        overflow: hidden;
    }

    .topbar-actions[b-36b2wzwsbg] {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
    }

    .week-navigation[b-36b2wzwsbg] {
        grid-column: 1 / -1;
        grid-row: 2;
        width: min(100%, 760px);
        min-width: 0;
        justify-self: center;
        justify-content: center;
        padding-top: 6px;
        border-top: 1px solid var(--border-color);
    }

    .page-heading[b-36b2wzwsbg] {
        min-width: 0;
        flex: 0 1 auto;
    }

    .week-header-left-actions[b-36b2wzwsbg] {
        flex: 0 0 auto;
    }
}

/* Extra compaction only when zoom/scaling leaves very little room.
   The controls stay fully accessible through their title/aria labels. */
@media (max-width: 1100px) and (min-width: 821px) {
    .topbar-actions .user-details[b-36b2wzwsbg] {
        display: none;
    }

    .user-profile-button[b-36b2wzwsbg] {
        padding: 3px 5px;
    }

    .topbar-actions > .user-menu[b-36b2wzwsbg] {
        margin-left: 0;
        padding-left: 9px;
    }
}

/* Existing mobile/tablet header also has a second navigation row.
   Keep the shared floating-panel offset accurate there as well. */
@media (max-width: 820px) {
    .app-shell[b-36b2wzwsbg] {
        --app-header-height: 112px;
    }

    .topbar[b-36b2wzwsbg] {
        min-height: 112px;
    }
}

/* =====================================================================
   Weekly Manning mobile shell
   ===================================================================== */

.weekly-manning-mobile-title-icon[b-36b2wzwsbg],
.current-week-mobile-icon[b-36b2wzwsbg],
.week-range-mobile[b-36b2wzwsbg],
.mobile-navigation-close[b-36b2wzwsbg],
.mobile-navigation-backdrop[b-36b2wzwsbg] {
    display: none;
}

@media (max-width: 820px),
       (max-width: 1024px) and (pointer: coarse),
       (max-width: 900px) and (max-height: 500px) {
    .week-header-left-actions[b-36b2wzwsbg] {
        display: none;
    }
}

@media (max-width: 620px),
       (max-width: 900px) and (max-height: 500px) {
    .app-shell[b-36b2wzwsbg] {
        --app-header-height: 108px;
    }

    .app-shell[b-36b2wzwsbg],
    .app-shell.sidebar-collapsed[b-36b2wzwsbg] {
        grid-template-columns: minmax(0, 1fr);
    }

    .mobile-menu-button[b-36b2wzwsbg] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .sidebar-collapse-toggle[b-36b2wzwsbg] {
        display: none;
    }

    .sidebar[b-36b2wzwsbg],
    .app-shell.sidebar-collapsed .sidebar[b-36b2wzwsbg] {
        position: fixed;
        z-index: 3100;
        inset: 0 auto 0 0;
        display: flex;
        width: min(82vw, 320px);
        min-width: 260px;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
        visibility: hidden;
        pointer-events: none;
        transform: translateX(-104%);
        transition: transform 180ms ease-out, visibility 180ms step-end;
    }

    .app-shell.mobile-navigation-open .sidebar[b-36b2wzwsbg] {
        visibility: visible;
        pointer-events: auto;
        transform: translateX(0);
        transition: transform 180ms ease-out, visibility 0s step-start;
    }

    .mobile-navigation-backdrop[b-36b2wzwsbg] {
        position: fixed;
        z-index: 3000;
        inset: 0;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(7, 15, 28, 0.54);
        backdrop-filter: blur(2px);
    }

    .sidebar .brand[b-36b2wzwsbg],
    .sidebar-collapsed .brand[b-36b2wzwsbg] {
        min-height: 58px;
        justify-content: flex-start;
        gap: 10px;
        padding: 7px 54px 7px 12px;
    }

    .sidebar .brand-logo-image[b-36b2wzwsbg],
    .sidebar-collapsed .brand-logo-image[b-36b2wzwsbg] {
        width: 62px;
        min-width: 62px;
        height: 42px;
        filter: none;
    }

    .app-shell.theme-dark .sidebar .brand-logo-image[b-36b2wzwsbg],
    .app-shell.theme-dark.sidebar-collapsed .brand-logo-image[b-36b2wzwsbg] {
        filter: brightness(0) invert(1);
    }

    .sidebar .brand-copy[b-36b2wzwsbg],
    .sidebar .nav-label[b-36b2wzwsbg],
    .sidebar .nav-section-label[b-36b2wzwsbg],
    .sidebar-collapsed .brand-copy[b-36b2wzwsbg],
    .sidebar-collapsed .nav-label[b-36b2wzwsbg],
    .sidebar-collapsed .nav-section-label[b-36b2wzwsbg] {
        display: flex;
    }

    .sidebar .brand-copy[b-36b2wzwsbg],
    .sidebar-collapsed .brand-copy[b-36b2wzwsbg] {
        min-width: 0;
    }

    .sidebar .nav-label[b-36b2wzwsbg],
    .sidebar-collapsed .nav-label[b-36b2wzwsbg] {
        display: inline;
    }

    .sidebar .nav-section-label[b-36b2wzwsbg],
    .sidebar-collapsed .nav-section-label[b-36b2wzwsbg] {
        display: block;
    }

    .sidebar .sidebar-nav[b-36b2wzwsbg]  .nav-item,
    .sidebar .sidebar-nav button.nav-item[b-36b2wzwsbg],
    .sidebar-collapsed .sidebar-nav[b-36b2wzwsbg]  .nav-item,
    .sidebar-collapsed .sidebar-nav button.nav-item[b-36b2wzwsbg] {
        justify-content: flex-start;
        padding-inline: 12px;
    }

    .mobile-navigation-close[b-36b2wzwsbg] {
        position: absolute;
        top: 8px;
        right: 8px;
        display: inline-flex;
        width: 42px;
        height: 42px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 1px solid var(--sidebar-border);
        border-radius: 10px;
        color: var(--sidebar-text);
        background: color-mix(in srgb, var(--sidebar-hover) 72%, transparent);
        font: inherit;
        font-size: 25px;
        line-height: 1;
        cursor: pointer;
    }

    .mobile-navigation-close:focus-visible[b-36b2wzwsbg] {
        outline: 2px solid #58d1e4;
        outline-offset: 2px;
    }

    .topbar[b-36b2wzwsbg] {
        height: 108px;
        min-height: 108px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 56px 52px;
        column-gap: 4px;
        row-gap: 0;
        padding: 0 6px;
    }

    .topbar-left[b-36b2wzwsbg] {
        grid-column: 1;
        grid-row: 1;
        gap: 4px;
        overflow: hidden;
    }

    .topbar-actions[b-36b2wzwsbg] {
        grid-column: 2;
        grid-row: 1;
        gap: 1px;
    }

    .topbar-actions .topbar-action-separator[b-36b2wzwsbg] {
        display: none;
    }

    .topbar-actions .theme-button[b-36b2wzwsbg] {
        display: none;
    }

    .topbar-actions > .user-menu[b-36b2wzwsbg] {
        margin-left: 0;
        padding-left: 0;
    }

    .topbar-actions .chat-launcher-button[b-36b2wzwsbg],
    .topbar-actions .user-profile-button[b-36b2wzwsbg] {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
        justify-content: center;
        padding: 0;
    }

    .topbar-actions[b-36b2wzwsbg]  .weekly-manning-live-indicator,
    .topbar-actions[b-36b2wzwsbg]  .system-health-button,
    .topbar-actions[b-36b2wzwsbg]  .notification-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .mobile-menu-button[b-36b2wzwsbg] {
        width: 40px;
        min-width: 40px;
        height: 40px;
        padding: 0;
    }

    .page-heading.weekly-manning-heading strong[b-36b2wzwsbg] {
        display: none;
    }

    .weekly-manning-mobile-title-icon[b-36b2wzwsbg] {
        display: inline-flex;
        width: 40px;
        min-width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid color-mix(in srgb, #1769dc 26%, var(--border-color));
        border-radius: 11px;
        color: #1769dc;
        background: color-mix(in srgb, var(--button-background) 91%, #1769dc 9%);
        box-shadow: 0 5px 14px rgba(23, 105, 220, 0.1);
    }

    .weekly-manning-mobile-title-icon svg[b-36b2wzwsbg] {
        width: 22px;
        height: 22px;
    }

    .app-shell.theme-dark .weekly-manning-mobile-title-icon[b-36b2wzwsbg] {
        border-color: rgba(111, 199, 199, 0.28);
        color: #a9e6f2;
        background: rgba(111, 199, 199, 0.09);
    }

    .week-navigation[b-36b2wzwsbg] {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        height: 52px;
        min-height: 52px;
        overflow-x: visible;
        justify-content: center;
        align-self: stretch;
        padding: 4px 0;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    .week-navigation > .week-button[b-36b2wzwsbg],
    .week-navigation > .current-week-button[b-36b2wzwsbg] {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
    }

    .week-navigation .week-display[b-36b2wzwsbg] {
        min-width: 0;
        flex: 1 1 160px;
        gap: 0;
        padding-inline: 2px;
    }

    .week-navigation .week-display > span[b-36b2wzwsbg],
    .week-range-desktop[b-36b2wzwsbg] {
        display: none;
    }

    .week-range-mobile[b-36b2wzwsbg] {
        display: block;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .week-navigation > .current-week-button[b-36b2wzwsbg] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .current-week-label[b-36b2wzwsbg] {
        display: none;
    }

    .current-week-mobile-icon[b-36b2wzwsbg] {
        display: block;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}

@media (min-width: 621px) and (max-width: 820px) and (min-height: 501px) {
    .app-shell[b-36b2wzwsbg] {
        --app-header-height: 108px;
    }

    .topbar[b-36b2wzwsbg] {
        height: 108px;
        min-height: 108px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 56px 52px;
        column-gap: 6px;
        row-gap: 0;
        padding: 0 8px;
    }

    .topbar-left[b-36b2wzwsbg] {
        grid-column: 1;
        grid-row: 1;
        gap: 5px;
        overflow: hidden;
    }

    .topbar-actions[b-36b2wzwsbg] {
        grid-column: 2;
        grid-row: 1;
        gap: 2px;
    }

    .topbar-actions .topbar-action-separator[b-36b2wzwsbg],
    .topbar-actions .theme-button[b-36b2wzwsbg] {
        display: none;
    }

    .topbar-actions > .user-menu[b-36b2wzwsbg] {
        margin-left: 0;
        padding-left: 0;
    }

    .topbar-actions .chat-launcher-button[b-36b2wzwsbg],
    .topbar-actions .user-profile-button[b-36b2wzwsbg],
    .topbar-actions[b-36b2wzwsbg]  .weekly-manning-live-indicator,
    .topbar-actions[b-36b2wzwsbg]  .system-health-button,
    .topbar-actions[b-36b2wzwsbg]  .notification-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .page-heading.weekly-manning-heading strong[b-36b2wzwsbg] {
        display: none;
    }

    .weekly-manning-mobile-title-icon[b-36b2wzwsbg] {
        display: inline-flex;
        width: 40px;
        min-width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        border: 1px solid color-mix(in srgb, #1769dc 26%, var(--border-color));
        border-radius: 11px;
        color: #1769dc;
        background: color-mix(in srgb, var(--button-background) 91%, #1769dc 9%);
        box-shadow: 0 5px 14px rgba(23, 105, 220, 0.1);
    }

    .weekly-manning-mobile-title-icon svg[b-36b2wzwsbg] {
        width: 22px;
        height: 22px;
    }

    .app-shell.theme-dark .weekly-manning-mobile-title-icon[b-36b2wzwsbg] {
        border-color: rgba(111, 199, 199, 0.28);
        color: #a9e6f2;
        background: rgba(111, 199, 199, 0.09);
    }

    .week-navigation[b-36b2wzwsbg] {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        height: 52px;
        min-height: 52px;
        align-self: stretch;
        justify-content: center;
        padding: 4px 0;
        overflow-x: visible;
        border-width: 1px 0 0;
        border-radius: 0;
        box-shadow: none;
    }

    .week-navigation > .week-button[b-36b2wzwsbg],
    .week-navigation > .current-week-button[b-36b2wzwsbg] {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
    }

    .week-navigation .week-display[b-36b2wzwsbg] {
        min-width: 0;
        flex: 1 1 160px;
        gap: 0;
        padding-inline: 2px;
    }

    .week-navigation .week-display > span[b-36b2wzwsbg],
    .week-range-desktop[b-36b2wzwsbg],
    .current-week-label[b-36b2wzwsbg] {
        display: none;
    }

    .week-range-mobile[b-36b2wzwsbg] {
        display: block;
        overflow: hidden;
        font-size: 13px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .week-navigation > .current-week-button[b-36b2wzwsbg] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .current-week-mobile-icon[b-36b2wzwsbg] {
        display: block;
        width: 20px;
        height: 20px;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}

@media (max-width: 390px) {
    .topbar[b-36b2wzwsbg] {
        padding-inline: 4px;
    }

    .topbar-actions[b-36b2wzwsbg] {
        gap: 0;
    }

    .topbar-actions .chat-launcher-button[b-36b2wzwsbg],
    .topbar-actions .user-profile-button[b-36b2wzwsbg],
    .topbar-actions[b-36b2wzwsbg]  .weekly-manning-live-indicator,
    .topbar-actions[b-36b2wzwsbg]  .system-health-button,
    .topbar-actions[b-36b2wzwsbg]  .notification-button {
        width: 38px;
        min-width: 38px;
        height: 40px;
        min-height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar[b-36b2wzwsbg],
    .app-shell.sidebar-collapsed .sidebar[b-36b2wzwsbg] {
        transition: none;
    }
}

/* ============================================================
   IBM Plex typography: Weekly Manning header and section labels
   ============================================================ */

.nav-section-label[b-36b2wzwsbg] {
    font-family: var(--font-manning-mono);
    font-variant-numeric: tabular-nums;
}

.weekly-manning-heading[b-36b2wzwsbg],
.week-navigation[b-36b2wzwsbg],
.week-header-left-actions[b-36b2wzwsbg] {
    font-family: var(--font-manning-sans);
}

.weekly-manning-heading .page-eyebrow[b-36b2wzwsbg],
.week-display[b-36b2wzwsbg] {
    font-family: var(--font-manning-mono);
    font-variant-numeric: tabular-nums;
}
/* /Components/Layout/NotificationsShell.razor.rz.scp.css */
.notifications-shell[b-8xzngjtl9f] {
    position: relative;
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
}

.notification-button[b-8xzngjtl9f] {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 1px solid #c7d4e3;
    border-radius: 11px;
    color: #36536f;
    background: #f8fbfe;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 90%),
        0 4px 12px rgb(32 68 105 / 10%);
    cursor: pointer;
    transition:
        border-color 150ms ease,
        color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        transform 120ms ease;
}

.notification-bell-icon[b-8xzngjtl9f] {
    width: 20px;
    height: 20px;
}

.notification-button:hover[b-8xzngjtl9f] {
    border-color: #91abc6;
    color: #1d5e9b;
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 95%),
        0 7px 16px rgb(32 68 105 / 15%);
}

.notification-button:active[b-8xzngjtl9f] {
    transform: translateY(1px) scale(.98);
}

.notification-button:focus-visible[b-8xzngjtl9f] {
    outline: 2px solid #2a78d0;
    outline-offset: 2px;
    border-color: #5f96d1;
}

/* Inactive extension hooks for a future notification state. */
.notification-button.has-unread[b-8xzngjtl9f]::after {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 7px;
    height: 7px;
    border: 2px solid #f8fbfe;
    border-radius: 50%;
    background: #2c78c8;
    content: "";
}

.notification-button.has-unread.notification-bell-motion .notification-bell-icon[b-8xzngjtl9f] {
    animation: notification-bell-short-movement-b-8xzngjtl9f 420ms ease-out 1;
}

.notification-button.is-urgent[b-8xzngjtl9f]::after {
    background: #c54858;
}

.notifications-popover[b-8xzngjtl9f] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 45;
    width: min(304px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #c7d3e1;
    border-radius: 14px;
    color: #192c40;
    background: #ffffff;
    box-shadow:
        0 18px 44px rgb(18 42 67 / 20%),
        0 3px 10px rgb(18 42 67 / 10%);
    animation: notifications-popover-in-b-8xzngjtl9f 140ms ease-out both;
}

.notifications-popover-header[b-8xzngjtl9f] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e2e8ef;
    background: #f7fafd;
}

.notifications-popover-header span[b-8xzngjtl9f] {
    color: #667b91;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.notifications-popover-header strong[b-8xzngjtl9f] {
    color: #173755;
    font-size: 15px;
    font-weight: 780;
}

.notification-tabs[b-8xzngjtl9f] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 8px 12px;
    border-bottom: 1px solid #e2e8ef;
    background: #fbfcfe;
}

.notification-tabs button[b-8xzngjtl9f] {
    min-height: 32px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #667b91;
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 780;
    cursor: pointer;
}

.notification-tabs button:hover[b-8xzngjtl9f] {
    color: #244f78;
    background: #edf3f9;
}

.notification-tabs button.is-active[b-8xzngjtl9f] {
    border-color: #ccd9e7;
    color: #1e4f7a;
    background: #ffffff;
    box-shadow: 0 2px 7px rgb(35 74 112 / 9%);
}

.notification-tabs button:focus-visible[b-8xzngjtl9f] {
    outline: 2px solid #2a78d0;
    outline-offset: 1px;
}

.notifications-empty-state[b-8xzngjtl9f] {
    display: flex;
    min-height: 190px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 20px 28px;
    text-align: center;
}

.notifications-empty-icon[b-8xzngjtl9f] {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 2px;
    place-items: center;
    border: 1px solid #d5e0eb;
    border-radius: 12px;
    color: #69839d;
    background: #f5f8fb;
}

.notifications-empty-icon svg[b-8xzngjtl9f] {
    width: 21px;
    height: 21px;
}

.notifications-empty-state strong[b-8xzngjtl9f] {
    color: #263e55;
    font-size: 13px;
    font-weight: 780;
}

.notifications-empty-state p[b-8xzngjtl9f] {
    max-width: 224px;
    margin: 0;
    color: #708294;
    font-size: 11px;
    line-height: 1.45;
}

.theme-dark .notification-button[b-8xzngjtl9f] {
    border-color: #354d69;
    color: #a9c3dd;
    background: #11243a;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 6%),
        0 6px 16px rgb(0 7 17 / 28%);
}

.theme-dark .notification-button:hover[b-8xzngjtl9f] {
    border-color: #4f7194;
    color: #d3e8fb;
    background: #152b44;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 8%),
        0 8px 20px rgb(0 7 17 / 34%);
}

.theme-dark .notification-button:focus-visible[b-8xzngjtl9f] {
    outline-color: #65a8ef;
    border-color: #5f8fbd;
}

.theme-dark .notification-button.has-unread[b-8xzngjtl9f]::after {
    border-color: #11243a;
    background: #5ca3eb;
}

.theme-dark .notification-button.is-urgent[b-8xzngjtl9f]::after {
    background: #ed7180;
}

.theme-dark .notifications-popover[b-8xzngjtl9f] {
    border-color: #354b65;
    color: #e8f0f8;
    background: #102238;
    box-shadow:
        0 22px 52px rgb(0 5 14 / 48%),
        0 4px 12px rgb(0 5 14 / 28%);
}

.theme-dark .notifications-popover-header[b-8xzngjtl9f] {
    border-color: #2a4058;
    background: #142a42;
}

.theme-dark .notifications-popover-header span[b-8xzngjtl9f] {
    color: #8da5bc;
}

.theme-dark .notifications-popover-header strong[b-8xzngjtl9f] {
    color: #f0f6fc;
}

.theme-dark .notification-tabs[b-8xzngjtl9f] {
    border-color: #2a4058;
    background: #0d1e32;
}

.theme-dark .notification-tabs button[b-8xzngjtl9f] {
    color: #91a8bf;
}

.theme-dark .notification-tabs button:hover[b-8xzngjtl9f] {
    color: #d6e7f7;
    background: #1a3149;
}

.theme-dark .notification-tabs button.is-active[b-8xzngjtl9f] {
    border-color: #3c5772;
    color: #e6f0f9;
    background: #172d45;
    box-shadow: 0 3px 9px rgb(0 6 16 / 22%);
}

.theme-dark .notification-tabs button:focus-visible[b-8xzngjtl9f] {
    outline-color: #65a8ef;
}

.theme-dark .notifications-empty-icon[b-8xzngjtl9f] {
    border-color: #344c65;
    color: #8daac5;
    background: #142940;
}

.theme-dark .notifications-empty-state strong[b-8xzngjtl9f] {
    color: #dce8f3;
}

.theme-dark .notifications-empty-state p[b-8xzngjtl9f] {
    color: #91a6ba;
}

@keyframes notification-bell-short-movement-b-8xzngjtl9f {
    0%, 100% {
        transform: rotate(0);
    }

    35% {
        transform: rotate(8deg);
    }

    70% {
        transform: rotate(-6deg);
    }
}

@keyframes notifications-popover-in-b-8xzngjtl9f {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

@media (max-width: 600px) {
    .notifications-popover[b-8xzngjtl9f] {
        position: fixed;
        top: calc(var(--app-header-height, 112px) + 8px);
        right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .notification-button[b-8xzngjtl9f],
    .notification-bell-icon[b-8xzngjtl9f],
    .notifications-popover[b-8xzngjtl9f] {
        animation: none !important;
        transition: none !important;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-hfwz7e32am],
.components-reconnect-repeated-attempt-visible[b-hfwz7e32am],
.components-reconnect-failed-visible[b-hfwz7e32am],
.components-pause-visible[b-hfwz7e32am],
.components-resume-failed-visible[b-hfwz7e32am],
.components-rejoining-animation[b-hfwz7e32am] {
    display: none;
}

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


#components-reconnect-modal[b-hfwz7e32am] {
    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-hfwz7e32am 0.5s both;
    &[open]

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

@keyframes components-rejoining-animation-b-hfwz7e32am {
    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/Layout/SystemHealthControl.razor.rz.scp.css */
.system-health-control[b-y7912as9qt] {
    position: relative;
    display: inline-flex;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
}

.system-health-button[b-y7912as9qt] {
    position: relative;
    display: inline-grid;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    padding: 0;
    border: 1px solid #c7d4e3;
    border-radius: 11px;
    color: #31506f;
    background: #f8fbfe;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 90%),
        0 4px 12px rgb(32 68 105 / 10%);
    cursor: pointer;
    transition:
        border-color 150ms ease,
        background-color 150ms ease,
        box-shadow 150ms ease,
        transform 120ms ease;
}

.system-health-button:hover[b-y7912as9qt] {
    border-color: #91abc6;
    background: #ffffff;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 95%),
        0 7px 16px rgb(32 68 105 / 15%);
}

.system-health-button:active[b-y7912as9qt] {
    transform: translateY(1px) scale(.98);
}

.system-health-button:focus-visible[b-y7912as9qt] {
    outline: 2px solid #2a78d0;
    outline-offset: 2px;
    border-color: #5f96d1;
}

.system-health-orb[b-y7912as9qt] {
    position: relative;
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
}

.system-health-outer-ring[b-y7912as9qt] {
    position: absolute;
    inset: 1px;
    overflow: hidden;
    border: 2px solid #63a57f;
    border-radius: 50%;
    box-shadow: 0 0 7px rgb(47 143 94 / 13%);
}

.system-health-outer-ring[b-y7912as9qt]::after {
    position: absolute;
    inset: -2px;
    border: 2px solid transparent;
    border-top-color: rgb(41 156 111 / 58%);
    border-right-color: rgb(44 142 174 / 18%);
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
}

.system-health-inner-point[b-y7912as9qt] {
    position: relative;
    z-index: 1;
    width: 8px;
    height: 8px;
    border: 1px solid rgb(255 255 255 / 76%);
    border-radius: 50%;
    background: #2ca268;
    box-shadow:
        0 0 0 3px rgb(44 162 104 / 11%),
        0 0 7px rgb(44 162 104 / 28%);
}

.system-health-button.connection-checking .system-health-outer-ring[b-y7912as9qt] {
    border-color: #91a5bb;
    border-top-color: #337cbd;
    animation: system-health-ring-rotation-b-y7912as9qt 1.7s linear infinite;
}

.system-health-button.connection-degraded .system-health-outer-ring[b-y7912as9qt] {
    border-color: #c88a2d;
    box-shadow: 0 0 7px rgb(200 138 45 / 16%);
}

.system-health-button.connection-unavailable .system-health-outer-ring[b-y7912as9qt] {
    border-color: #c55261;
    box-shadow: 0 0 7px rgb(197 82 97 / 14%);
}

.system-health-button.health-online.connection-connected .system-health-outer-ring[b-y7912as9qt]::after {
    opacity: .7;
    animation: system-health-ring-sweep-b-y7912as9qt 7.2s linear infinite;
}

.system-health-button.health-online .system-health-inner-point[b-y7912as9qt] {
    animation: system-health-breathe-b-y7912as9qt 4s ease-in-out infinite;
}

.system-health-button.health-checking .system-health-outer-ring[b-y7912as9qt] {
    border-color: #91a5bb;
    border-top-color: #337cbd;
    box-shadow: 0 0 6px rgb(51 124 189 / 12%);
    animation: system-health-ring-rotation-b-y7912as9qt 1.7s linear infinite;
}

.system-health-button.health-checking .system-health-inner-point[b-y7912as9qt] {
    border-color: rgb(255 255 255 / 64%);
    background: #718ba5;
    box-shadow: 0 0 0 3px rgb(76 111 145 / 10%);
    opacity: .76;
}

.system-health-button.health-offline .system-health-inner-point[b-y7912as9qt] {
    background: #c74656;
    box-shadow:
        0 0 0 3px rgb(199 70 86 / 12%),
        0 0 8px rgb(199 70 86 / 26%);
}

.system-health-button.health-offline.has-error-transition .system-health-inner-point[b-y7912as9qt] {
    animation: system-health-error-transition-b-y7912as9qt 620ms ease-out 1;
}

.system-health-button.health-maintenance .system-health-inner-point[b-y7912as9qt] {
    background: #7867c6;
    box-shadow:
        0 0 0 3px rgb(120 103 198 / 12%),
        0 0 8px rgb(120 103 198 / 25%);
    animation: system-health-maintenance-pulse-b-y7912as9qt 6.4s ease-in-out infinite;
}

.system-health-popover[b-y7912as9qt] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 45;
    width: min(304px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid #c7d3e1;
    border-radius: 14px;
    color: #192c40;
    background: #ffffff;
    box-shadow:
        0 18px 44px rgb(18 42 67 / 20%),
        0 3px 10px rgb(18 42 67 / 10%);
    animation: system-health-popover-in-b-y7912as9qt 140ms ease-out both;
}

.system-health-popover-header[b-y7912as9qt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid #e2e8ef;
    background: #f7fafd;
}

.system-health-popover-header span[b-y7912as9qt] {
    color: #667b91;
    font-size: 9.5px;
    font-weight: 850;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.system-health-popover-header strong[b-y7912as9qt] {
    color: #173755;
    font-size: 15px;
    font-weight: 780;
}

.system-health-status-list[b-y7912as9qt] {
    display: grid;
    gap: 0;
    padding: 4px 16px;
}

.system-health-status-row[b-y7912as9qt] {
    display: flex;
    min-height: 58px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-bottom: 1px solid #e8edf3;
}

.system-health-status-row:last-child[b-y7912as9qt] {
    border-bottom: 0;
}

.system-health-status-row > div[b-y7912as9qt] {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.system-health-status-row > div > span[b-y7912as9qt],
.system-health-popover-footer span[b-y7912as9qt] {
    color: #6b7e91;
    font-size: 10.5px;
    font-weight: 690;
}

.system-health-status-row > div > strong[b-y7912as9qt] {
    overflow: hidden;
    color: #20384f;
    font-size: 12.5px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.system-health-status-value[b-y7912as9qt] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
    color: #66788c;
    font-size: 10.5px;
    font-weight: 800;
}

.system-health-status-value[b-y7912as9qt]::before {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    content: "";
}

.system-health-status-value.is-healthy[b-y7912as9qt] {
    color: #218557;
}

.system-health-status-value.is-degraded[b-y7912as9qt] {
    color: #a66b16;
}

.system-health-status-value.is-unavailable[b-y7912as9qt] {
    color: #b03f4d;
}

.system-health-status-value.is-maintenance[b-y7912as9qt] {
    color: #6d5ab8;
}

.system-health-status-value.is-checking[b-y7912as9qt] {
    color: #637f9d;
}

.system-health-popover-footer[b-y7912as9qt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 16px 12px;
    border-top: 1px solid #e2e8ef;
    background: #f8fafc;
}

.system-health-popover-footer strong[b-y7912as9qt] {
    color: #425b73;
    font-size: 10.5px;
    font-weight: 780;
}

.theme-dark .system-health-button[b-y7912as9qt] {
    border-color: #354d69;
    color: #a9c3dd;
    background: #11243a;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 6%),
        0 6px 16px rgb(0 7 17 / 28%);
}

.theme-dark .system-health-button:hover[b-y7912as9qt] {
    border-color: #4f7194;
    background: #152b44;
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 8%),
        0 8px 20px rgb(0 7 17 / 34%);
}

.theme-dark .system-health-button:focus-visible[b-y7912as9qt] {
    outline-color: #65a8ef;
    border-color: #5f8fbd;
}

.theme-dark .system-health-outer-ring[b-y7912as9qt] {
    border-color: #52b27f;
    box-shadow: 0 0 8px rgb(74 190 126 / 16%);
}

.theme-dark .system-health-button.health-online .system-health-inner-point[b-y7912as9qt] {
    background: #43b87d;
    box-shadow:
        0 0 0 3px rgb(67 184 125 / 10%),
        0 0 8px rgb(67 184 125 / 26%);
}

.theme-dark .system-health-button.health-online.connection-connected .system-health-outer-ring[b-y7912as9qt]::after {
    border-top-color: rgb(111 226 169 / 68%);
    border-right-color: rgb(92 196 218 / 22%);
    opacity: .66;
}

.theme-dark .system-health-popover[b-y7912as9qt] {
    border-color: #354b65;
    color: #e8f0f8;
    background: #102238;
    box-shadow:
        0 22px 52px rgb(0 5 14 / 48%),
        0 4px 12px rgb(0 5 14 / 28%);
}

.theme-dark .system-health-popover-header[b-y7912as9qt] {
    border-color: #2a4058;
    background: #142a42;
}

.theme-dark .system-health-popover-header span[b-y7912as9qt],
.theme-dark .system-health-status-row > div > span[b-y7912as9qt],
.theme-dark .system-health-popover-footer span[b-y7912as9qt] {
    color: #8da5bc;
}

.theme-dark .system-health-popover-header strong[b-y7912as9qt] {
    color: #f0f6fc;
}

.theme-dark .system-health-status-row[b-y7912as9qt] {
    border-color: #263b51;
}

.theme-dark .system-health-status-row > div > strong[b-y7912as9qt] {
    color: #dce8f3;
}

.theme-dark .system-health-status-value.is-healthy[b-y7912as9qt] {
    color: #69cea0;
}

.theme-dark .system-health-status-value.is-degraded[b-y7912as9qt] {
    color: #e0a956;
}

.theme-dark .system-health-status-value.is-unavailable[b-y7912as9qt] {
    color: #ee7c8a;
}

.theme-dark .system-health-status-value.is-maintenance[b-y7912as9qt] {
    color: #afa0f1;
}

.theme-dark .system-health-status-value.is-checking[b-y7912as9qt] {
    color: #90aac4;
}

.theme-dark .system-health-popover-footer[b-y7912as9qt] {
    border-color: #2a4058;
    background: #0d1e32;
}

.theme-dark .system-health-popover-footer strong[b-y7912as9qt] {
    color: #aec1d3;
}

.visually-hidden[b-y7912as9qt] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

@keyframes system-health-ring-rotation-b-y7912as9qt {
    to {
        transform: rotate(360deg);
    }
}

@keyframes system-health-ring-sweep-b-y7912as9qt {
    to {
        transform: rotate(360deg);
    }
}

@keyframes system-health-breathe-b-y7912as9qt {
    0%, 100% {
        opacity: .88;
        box-shadow:
            0 0 0 3px rgb(44 162 104 / 10%),
            0 0 6px rgb(44 162 104 / 24%);
        transform: scale(.97);
    }

    50% {
        opacity: 1;
        box-shadow:
            0 0 0 4px rgb(44 162 104 / 6%),
            0 0 9px rgb(44 162 104 / 29%);
        transform: scale(1.04);
    }
}

@keyframes system-health-error-transition-b-y7912as9qt {
    0%, 100% {
        transform: scale(1);
    }

    40% {
        box-shadow:
            0 0 0 7px rgb(199 70 86 / 10%),
            0 0 12px rgb(199 70 86 / 34%);
        transform: scale(1.12);
    }
}

@keyframes system-health-maintenance-pulse-b-y7912as9qt {
    0%, 100% {
        opacity: 1;
        transform: scale(.99);
    }

    50% {
        opacity: .82;
        transform: scale(1.03);
    }
}

@keyframes system-health-popover-in-b-y7912as9qt {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

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

@media (max-width: 600px) {
    .system-health-popover[b-y7912as9qt] {
        position: fixed;
        top: calc(var(--app-header-height, 112px) + 8px);
        right: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .system-health-button[b-y7912as9qt],
    .system-health-outer-ring[b-y7912as9qt],
    .system-health-outer-ring[b-y7912as9qt]::after,
    .system-health-inner-point[b-y7912as9qt],
    .system-health-popover[b-y7912as9qt] {
        animation: none !important;
        transition: none !important;
    }

    .system-health-outer-ring[b-y7912as9qt]::after {
        opacity: 0 !important;
    }
}
/* /Components/Pages/Agencies.razor.rz.scp.css */
.agencies-page[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    font-size: 14px;
}

.agencies-header[b-2aelabn609] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 4px 2px 0;
}

.agencies-header > div:first-child[b-2aelabn609] {
    width: min(620px, 100%);
}

.agencies-header h1[b-2aelabn609] {
    margin: 5px 0;
    color: var(--primary-text);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.45px;
}

.agencies-header p[b-2aelabn609] {
    max-width: 760px;
    margin: 0;
    color: var(--secondary-text);
    font-size: 14px;
    line-height: 1.5;
}

.page-eyebrow[b-2aelabn609] {
    color: #1769dc;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.primary-action[b-2aelabn609],
.secondary-action[b-2aelabn609],
.save-action[b-2aelabn609],
.danger-action[b-2aelabn609],
.confirm-delete-action[b-2aelabn609],
.refresh-button[b-2aelabn609] {
    font-family: inherit;
    cursor: pointer;
}

.primary-action[b-2aelabn609] {
    display: inline-flex;
    min-height: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid #1769dc;
    border-radius: 9px;
    color: #ffffff;
    background: #1769dc;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.2);
}

.primary-action:hover:not(:disabled)[b-2aelabn609] {
    background: #125dbf;
}

.primary-action span[b-2aelabn609] {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.agencies-workspace[b-2aelabn609] {
    display: grid;
    min-width: 0;
    min-height: 610px;
    grid-template-columns: minmax(310px, 390px) minmax(520px, 1fr);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--panel-background);
    box-shadow: 0 4px 14px var(--shadow-color);
}

.agency-list-panel[b-2aelabn609],
.agency-editor-panel[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.agency-list-panel[b-2aelabn609] {
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--panel-background) 94%, var(--button-hover) 6%);
}

.panel-heading[b-2aelabn609],
.editor-heading[b-2aelabn609] {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
}

.panel-heading[b-2aelabn609] {
    padding: 14px 17px;
}

.editor-heading[b-2aelabn609] {
    padding: 16px 42px;
}

.panel-heading > div[b-2aelabn609],
.editor-heading > div[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.panel-heading span[b-2aelabn609],
.editor-heading span[b-2aelabn609] {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 700;
}

.panel-heading small[b-2aelabn609],
.editor-heading small[b-2aelabn609] {
    color: var(--secondary-text);
    font-size: 11px;
}

.refresh-button[b-2aelabn609] {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 19px;
}

.refresh-button:hover:not(:disabled)[b-2aelabn609] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.agency-list[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 12px;
}

.agency-list-item[b-2aelabn609] {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 68px;
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.agency-list-item:hover:not(:disabled)[b-2aelabn609] {
    border-color: var(--border-color);
    background: var(--button-hover);
}

.agency-list-item.selected[b-2aelabn609] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 84%, #1769dc 16%);
    box-shadow: 0 3px 9px rgba(23, 105, 220, 0.12);
}

.draggable-tile[b-2aelabn609] {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    transition:
        border-color 130ms ease,
        background 130ms ease,
        box-shadow 130ms ease,
        opacity 130ms ease,
        transform 130ms ease;
}

.draggable-tile:active[b-2aelabn609] {
    cursor: grabbing;
}

.draggable-tile.dragging[b-2aelabn609] {
    opacity: 0.42;
    transform: scale(0.985);
}

.draggable-tile.drag-over[b-2aelabn609] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    box-shadow: 0 0 0 2px rgba(23, 105, 220, 0.14);
}

.sortable-list.is-sorting[b-2aelabn609] {
    overflow: hidden;
}

.sortable-drag-ghost[b-2aelabn609] {
    border-color: #1769dc;
    background: var(--panel-background);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
}

.draggable-tile .item-order[b-2aelabn609] {
    touch-action: none;
}

.draggable-tile .item-order[b-2aelabn609]::before {
    margin-right: 2px;
    color: color-mix(in srgb, #1769dc 72%, var(--secondary-text) 28%);
    content: "⋮";
    font-size: 13px;
    line-height: 1;
}

.item-order[b-2aelabn609] {
    display: grid;
    width: 38px;
    height: 32px;
    place-items: center;
    grid-auto-flow: column;
    justify-content: center;
    border-radius: 8px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    font-size: 12px;
    font-weight: 750;
}

.item-copy[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.item-copy strong[b-2aelabn609],
.item-copy small[b-2aelabn609] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-copy strong[b-2aelabn609] {
    font-size: 13.5px;
    font-weight: 650;
}

.item-copy small[b-2aelabn609] {
    color: var(--secondary-text);
    font-size: 10.5px;
    letter-spacing: 0.2px;
}

.agency-badge[b-2aelabn609],
.item-status[b-2aelabn609] {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 750;
    white-space: nowrap;
}

.agency-badge[b-2aelabn609] {
    color: #2d2a22;
    border: 1px solid color-mix(in srgb, var(--agency-colour, #f2c94c) 70%, #5d5540 30%);
    background: var(--agency-colour, #f2c94c);
}

.item-status.active[b-2aelabn609] {
    color: #166543;
    border: 1px solid #86cfaf;
    background: #dcf4e9;
}

.item-status.inactive[b-2aelabn609] {
    color: #6f3e45;
    border: 1px solid #df9298;
    background: #fde5e7;
}

.panel-state[b-2aelabn609] {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 26px;
    color: var(--secondary-text);
    font-size: 13px;
    text-align: center;
}

.panel-state strong[b-2aelabn609] {
    color: var(--primary-text);
    font-size: 14px;
}

.panel-state span[b-2aelabn609] {
    max-width: 250px;
    line-height: 1.5;
}

.loading-indicator[b-2aelabn609],
.button-spinner[b-2aelabn609] {
    display: inline-block;
    border: 2px solid var(--border-color);
    border-top-color: #1769dc;
    border-radius: 50%;
    animation: agency-spin-b-2aelabn609 700ms linear infinite;
}

.loading-indicator[b-2aelabn609] {
    width: 26px;
    height: 26px;
}

.editor-empty-state[b-2aelabn609] {
    display: flex;
    min-height: 520px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--secondary-text);
    text-align: center;
}

.editor-empty-state strong[b-2aelabn609] {
    color: var(--primary-text);
    font-size: 16px;
}

.editor-empty-state span[b-2aelabn609] {
    font-size: 13px;
}

.editor-empty-icon[b-2aelabn609] {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: #1769dc;
    background: var(--button-hover);
    font-size: 23px;
}

.agency-editor-panel[b-2aelabn609]  form.editor-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 32px 42px 38px;
}

.form-grid[b-2aelabn609] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 28px;
}

.form-field[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.form-field.full-width[b-2aelabn609] {
    grid-column: 1 / -1;
}

.form-field label[b-2aelabn609],
.status-field label[b-2aelabn609] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
}

.form-field > small[b-2aelabn609],
.status-field small[b-2aelabn609] {
    color: var(--secondary-text);
    font-size: 10.5px;
    line-height: 1.45;
}

.form-input[b-2aelabn609] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 14px;
    font-weight: 550;
}

.form-input:focus[b-2aelabn609] {
    outline: 2px solid rgba(23, 105, 220, 0.16);
    border-color: #1769dc;
}

.code-input[b-2aelabn609] {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}

.badge-input[b-2aelabn609] {
    text-transform: uppercase;
}

.colour-control[b-2aelabn609] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 10px;
}

.colour-picker[b-2aelabn609] {
    width: 52px;
    height: 44px;
    padding: 4px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--button-background);
    cursor: pointer;
}

.badge-preview-card[b-2aelabn609] {
    display: flex;
    min-height: 44px;
    align-items: center;
    gap: 12px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 94%, var(--button-hover) 6%);
    font-size: 13px;
    font-weight: 650;
}

.preview-badge[b-2aelabn609] {
    min-height: 26px;
    font-size: 10px;
}

.order-field[b-2aelabn609] {
    width: 150px;
    max-width: 100%;
}

.order-field .form-input[b-2aelabn609] {
    width: 120px;
}

.status-field[b-2aelabn609] {
    display: flex;
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--button-hover);
}

.status-field > div[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.status-switch[b-2aelabn609] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.status-switch input[b-2aelabn609] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.switch-track[b-2aelabn609] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #aeb8c5;
    transition: background 140ms ease;
}

.switch-track[b-2aelabn609]::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    transition: transform 140ms ease;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
}

.status-switch input:checked + .switch-track[b-2aelabn609] {
    background: #249363;
}

.status-switch input:checked + .switch-track[b-2aelabn609]::after {
    transform: translateX(18px);
}

[b-2aelabn609] .validation-message,
[b-2aelabn609] .validation-summary {
    color: #c33a45;
    font-size: 11px;
}

[b-2aelabn609] .validation-summary {
    margin-top: 16px;
}

[b-2aelabn609] .validation-summary:empty {
    display: none;
}

.editor-actions[b-2aelabn609] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.editor-actions-left[b-2aelabn609] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.secondary-action[b-2aelabn609],
.save-action[b-2aelabn609],
.danger-action[b-2aelabn609],
.confirm-delete-action[b-2aelabn609] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
}

.secondary-action[b-2aelabn609] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
}

.secondary-action:hover:not(:disabled)[b-2aelabn609] {
    background: var(--button-hover);
}

.save-action[b-2aelabn609] {
    display: inline-flex;
    min-width: 142px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #1769dc;
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 5px 12px rgba(23, 105, 220, 0.18);
}

.save-action:hover:not(:disabled)[b-2aelabn609] {
    background: #125dbf;
}

.save-action:disabled[b-2aelabn609] {
    border-color: var(--border-color);
    color: var(--secondary-text);
    background: var(--button-background);
    box-shadow: none;
}

.button-spinner[b-2aelabn609] {
    width: 15px;
    height: 15px;
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
}

.danger-action[b-2aelabn609] {
    border: 1px solid #df9298;
    color: #a72834;
    background: color-mix(in srgb, var(--panel-background) 72%, #fde5e7 28%);
}

.danger-action:hover:not(:disabled)[b-2aelabn609] {
    color: #8e1f2a;
    border-color: #c94f5a;
    background: #fde5e7;
}

.delete-confirmation[b-2aelabn609] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    padding: 13px 14px;
    border: 1px solid #df9298;
    border-radius: 10px;
    color: #762b33;
    background: color-mix(in srgb, var(--panel-background) 72%, #fde5e7 28%);
}

.delete-confirmation > div:first-child[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.delete-confirmation strong[b-2aelabn609] {
    font-size: 13px;
    font-weight: 750;
}

.delete-confirmation span[b-2aelabn609] {
    font-size: 11px;
    line-height: 1.45;
}

.delete-confirmation-actions[b-2aelabn609] {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 8px;
}

.confirm-delete-action[b-2aelabn609] {
    border: 1px solid #c33a45;
    color: #ffffff;
    background: #c33a45;
}

.confirm-delete-action:hover:not(:disabled)[b-2aelabn609] {
    background: #a92d37;
}

.configuration-toast[b-2aelabn609] {
    position: fixed;
    top: 106px;
    left: 50%;
    z-index: 1200;
    display: flex;
    min-width: 260px;
    max-width: min(420px, calc(100vw - 40px));
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #86cfaf;
    border-radius: 10px;
    color: #166543;
    background: color-mix(in srgb, var(--panel-background) 78%, #dcf4e9 22%);
    font-size: 12px;
    font-weight: 650;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    transform: translateX(-50%);
    animation: agency-toast-in-b-2aelabn609 180ms ease-out;
}

.configuration-toast-icon[b-2aelabn609] {
    display: grid;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #249363;
    font-size: 13px;
    font-weight: 800;
}

.feedback-message[b-2aelabn609] {
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
}

.error-message[b-2aelabn609] {
    color: #762b33;
    border: 1px solid #df9298;
    background: #fde5e7;
}

button:disabled[b-2aelabn609] {
    opacity: 0.52;
    cursor: not-allowed;
}

@keyframes agency-spin-b-2aelabn609 {
    to {
        transform: rotate(360deg);
    }
}

@keyframes agency-toast-in-b-2aelabn609 {
    from {
        opacity: 0;
        transform: translate(-50%, -8px) scale(0.98);
    }

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

@media (max-width: 1200px) {
    .agencies-workspace[b-2aelabn609] {
        grid-template-columns: minmax(290px, 360px) minmax(460px, 1fr);
    }

    .agency-list-item[b-2aelabn609] {
        grid-template-columns: 42px minmax(0, 1fr) auto;
    }

    .agency-list-item .item-status[b-2aelabn609] {
        display: none;
    }
}

@media (max-width: 900px) {
    .agencies-workspace[b-2aelabn609] {
        grid-template-columns: 1fr;
    }

    .agency-list-panel[b-2aelabn609] {
        max-height: 380px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }
}

@media (max-width: 700px) {
    .agencies-header[b-2aelabn609] {
        align-items: stretch;
        flex-direction: column;
    }

    .agencies-header > div:first-child[b-2aelabn609] {
        width: 100%;
    }

    .primary-action[b-2aelabn609] {
        width: 100%;
    }

    .editor-heading[b-2aelabn609],
    .agency-editor-panel[b-2aelabn609]  form.editor-form {
        padding-right: 22px;
        padding-left: 22px;
    }

    .form-grid[b-2aelabn609] {
        grid-template-columns: 1fr;
    }

    .form-field.full-width[b-2aelabn609] {
        grid-column: auto;
    }

    .status-field[b-2aelabn609],
    .editor-actions[b-2aelabn609],
    .delete-confirmation[b-2aelabn609] {
        align-items: stretch;
        flex-direction: column;
    }

    .editor-actions-left[b-2aelabn609],
    .delete-confirmation-actions[b-2aelabn609] {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .danger-action[b-2aelabn609],
    .secondary-action[b-2aelabn609],
    .save-action[b-2aelabn609],
    .confirm-delete-action[b-2aelabn609] {
        width: 100%;
    }
}

.agencies-header[b-2aelabn609] {
    gap: 20px;
    padding-top: 0;
}

.agencies-header h1[b-2aelabn609] {
    margin-bottom: 4px;
    font-size: 26px;
}

.primary-action[b-2aelabn609],
.secondary-action[b-2aelabn609],
.save-action[b-2aelabn609],
.danger-action[b-2aelabn609],
.confirm-delete-action[b-2aelabn609],
.agency-list-item[b-2aelabn609] {
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.primary-action:hover:not(:disabled)[b-2aelabn609],
.secondary-action:hover:not(:disabled)[b-2aelabn609],
.save-action:hover:not(:disabled)[b-2aelabn609],
.danger-action:hover:not(:disabled)[b-2aelabn609],
.confirm-delete-action:hover:not(:disabled)[b-2aelabn609],
.agency-list-item:hover:not(:disabled)[b-2aelabn609] {
    transform: translateY(-1px);
}

.agency-list-item.selected[b-2aelabn609] {
    animation: adminSelectionPulse-b-2aelabn609 180ms ease-out;
}

@keyframes adminSelectionPulse-b-2aelabn609 {
    0% { transform: scale(0.992); }
    100% { transform: scale(1); }
}

.panel-heading-actions[b-2aelabn609] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.panel-add-text-button[b-2aelabn609] {
    display: inline-flex;
    width: auto;
    min-width: 104px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #6ea7e8;
    border-radius: 9px;
    color: #0d5dcc;
    background: linear-gradient(180deg, #eef6ff 0%, #dbeafa 52%, #c7dcf5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -2px 3px rgba(42, 105, 180, 0.12),
        0 3px 7px rgba(31, 94, 167, 0.18);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, filter 140ms ease;
}

.panel-add-text-button span:first-child[b-2aelabn609] {
    font-size: 17px;
    line-height: 1;
}

.panel-add-text-button:hover:not(:disabled)[b-2aelabn609] {
    transform: translateY(-1px);
    border-color: #4f91dd;
    background: linear-gradient(180deg, #e7f2ff 0%, #d1e4f9 52%, #bdd5f1 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -2px 3px rgba(42, 105, 180, 0.16),
        0 6px 12px rgba(31, 94, 167, 0.22);
}

.panel-add-text-button:active:not(:disabled)[b-2aelabn609] {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        inset 0 2px 4px rgba(42, 105, 180, 0.16),
        0 1px 3px rgba(31, 94, 167, 0.14);
}

.agency-panel-heading[b-2aelabn609] {
    position: relative;
    display: grid;
    min-height: 84px;
    grid-template-columns: 42px minmax(150px, 1fr) minmax(150px, 1fr);
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
}

.agency-panel-refresh[b-2aelabn609] {
    justify-self: start;
}

.agency-panel-title[b-2aelabn609] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.agency-panel-add[b-2aelabn609] {
    justify-self: center;
}

.agency-editor-panel[b-2aelabn609]  form.editor-form {
    max-width: 860px;
    padding: 26px 32px 32px;
}

.editor-heading[b-2aelabn609] {
    padding-right: 32px;
    padding-left: 32px;
}

.form-grid[b-2aelabn609] {
    grid-template-columns: minmax(220px, 320px) minmax(170px, 190px);
    justify-content: start;
    column-gap: 18px;
    row-gap: 22px;
}

.form-field.full-width[b-2aelabn609] {
    width: min(100%, 528px);
}

.form-field:not(.full-width)[b-2aelabn609],
.colour-field[b-2aelabn609],
.preview-field[b-2aelabn609] {
    max-width: 320px;
}

.colour-control[b-2aelabn609] {
    grid-template-columns: 52px minmax(0, 200px);
}

.badge-preview-card[b-2aelabn609] {
    width: min(100%, 190px);
    gap: 8px;
    padding-right: 10px;
    padding-left: 10px;
}

.status-field[b-2aelabn609] {
    width: min(100%, 190px);
    min-height: 74px;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px 12px;
}

.editor-actions[b-2aelabn609],
.delete-confirmation[b-2aelabn609] {
    width: min(100%, 528px);
}

.agency-context-dismiss-layer[b-2aelabn609] {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: transparent;
}

.agency-context-menu[b-2aelabn609] {
    position: fixed;
    z-index: 1910;
    width: min(310px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--primary-text);
    background: var(--panel-background);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
    animation: agencyContextOpen-b-2aelabn609 140ms ease-out;
}

.agency-context-menu-heading[b-2aelabn609] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--button-hover);
}

.agency-context-menu-heading strong[b-2aelabn609] {
    font-size: 12.5px;
}

.agency-context-menu-heading span[b-2aelabn609] {
    color: var(--secondary-text);
    font-size: 10px;
}

.agency-context-menu button[b-2aelabn609] {
    display: grid;
    width: 100%;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 0;
    color: #a8323f;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.agency-context-menu button:hover[b-2aelabn609] {
    background: color-mix(in srgb, var(--panel-background) 82%, #fde5e7 18%);
}

.agency-context-menu button > span:last-child[b-2aelabn609] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agency-context-menu button strong[b-2aelabn609] {
    font-size: 12px;
}

.agency-context-menu button small[b-2aelabn609] {
    color: var(--secondary-text);
    font-size: 9.5px;
}

.context-menu-icon[b-2aelabn609] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    color: #c14450;
    background: #fde5e7;
    font-size: 17px;
    font-weight: 800;
}

@keyframes agencyContextOpen-b-2aelabn609 {
    0% { transform: translateY(-3px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 640px) {
    .agency-panel-heading[b-2aelabn609] {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .agency-panel-add[b-2aelabn609] {
        grid-column: 1 / -1;
        width: 100%;
    }

    .form-grid[b-2aelabn609] {
        grid-template-columns: 1fr;
    }

    .form-field.full-width[b-2aelabn609],
    .form-field:not(.full-width)[b-2aelabn609],
    .colour-field[b-2aelabn609],
    .preview-field[b-2aelabn609],
    .badge-preview-card[b-2aelabn609],
    .status-field[b-2aelabn609],
    .editor-actions[b-2aelabn609],
    .delete-confirmation[b-2aelabn609] {
        width: 100%;
        max-width: none;
    }
}

.agency-panel-heading[b-2aelabn609] {
    position: relative;
    display: flex;
    min-height: 84px;
    justify-content: flex-start;
    padding: 12px 176px 12px 64px;
}

.agency-panel-refresh[b-2aelabn609] {
    position: absolute;
    top: 14px;
    left: 14px;
}

.agency-panel-title[b-2aelabn609] {
    max-width: 190px;
}

.agency-panel-add[b-2aelabn609] {
    position: absolute;
    top: 50%;
    right: 16px;
    left: auto;
    translate: 0 -50%;
}

.agency-panel-add:hover:not(:disabled)[b-2aelabn609] {
    translate: 0 calc(-50% - 1px);
}

@media (max-width: 640px) {
    .agency-panel-heading[b-2aelabn609] {
        min-height: 128px;
        padding: 52px 14px 12px;
        align-items: flex-start;
    }

    .agency-panel-refresh[b-2aelabn609] {
        top: 10px;
        left: 12px;
    }

    .agency-panel-add[b-2aelabn609] {
        top: 10px;
        right: 12px;
        left: auto;
        translate: 0 0;
    }

    .agency-panel-add:hover:not(:disabled)[b-2aelabn609] {
        translate: 0 -1px;
    }
}

/* Agencies list readability patch
   Show full agency names, hide the technical code in the tile,
   and give the list panel more width on desktop screens.
*/
@media (min-width: 901px) {
    .agencies-workspace[b-2aelabn609] {
        grid-template-columns: minmax(480px, 560px) minmax(520px, 1fr) !important;
    }
}

.agency-list-item[b-2aelabn609] {
    min-height: 72px !important;
    grid-template-columns: 42px minmax(0, 1fr) auto auto !important;
    align-items: center !important;
}

.item-copy[b-2aelabn609] {
    min-width: 0 !important;
    padding-right: 8px !important;
}

.item-copy strong[b-2aelabn609] {
    display: block !important;
    overflow: visible !important;
    color: var(--primary-text) !important;
    font-size: 14px !important;
    line-height: 1.22 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

.item-copy small[b-2aelabn609] {
    display: none !important;
}

@media (max-width: 1200px) and (min-width: 901px) {
    .agencies-workspace[b-2aelabn609] {
        grid-template-columns: minmax(430px, 500px) minmax(460px, 1fr) !important;
    }

    .agency-list-item[b-2aelabn609] {
        grid-template-columns: 42px minmax(0, 1fr) auto !important;
    }
}
/* /Components/Pages/AuditLog.razor.rz.scp.css */
.audit-page[b-uxef4lxr4n] {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.audit-error[b-uxef4lxr4n] {
    padding: 12px 14px;
    border: 1px solid rgba(202, 66, 78, 0.24);
    border-radius: 12px;
    color: #842f39;
    background: rgba(255, 238, 240, 0.86);
    font-size: 13px;
    font-weight: 720;
}

.audit-toolbar[b-uxef4lxr4n] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 180px 230px auto;
    gap: 10px;
    align-items: end;
}

.audit-search[b-uxef4lxr4n],
.audit-select[b-uxef4lxr4n] {
    display: grid;
    gap: 6px;
}

.audit-search span[b-uxef4lxr4n],
.audit-select span[b-uxef4lxr4n] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 820;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.audit-search input[b-uxef4lxr4n],
.audit-select select[b-uxef4lxr4n] {
    min-height: 40px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    outline: none;
}

.audit-search input[b-uxef4lxr4n] {
    padding: 0 13px;
}

.audit-select select[b-uxef4lxr4n] {
    padding: 0 10px;
}

.audit-search input:focus[b-uxef4lxr4n],
.audit-select select:focus[b-uxef4lxr4n] {
    border-color: rgba(23, 105, 220, 0.40);
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.10);
}

.audit-refresh-button[b-uxef4lxr4n] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    border: 1px solid rgba(23, 105, 220, 0.28);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #1f9fed, #075fba);
    box-shadow: 0 10px 22px rgba(8, 120, 215, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    font-family: inherit;
    font-size: 12px;
    font-weight: 820;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, opacity 140ms ease;
}

.audit-refresh-button:hover:not(:disabled)[b-uxef4lxr4n] {
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(8, 120, 215, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.audit-refresh-button:disabled[b-uxef4lxr4n] {
    cursor: wait;
    opacity: 0.68;
}

.audit-summary[b-uxef4lxr4n] {
    display: inline-flex;
    width: fit-content;
    align-items: baseline;
    gap: 6px;
    padding: 8px 12px;
    border: 1px solid rgba(78, 136, 184, 0.14);
    border-radius: 999px;
    color: #315b7e;
    background: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 720;
}

.audit-summary strong[b-uxef4lxr4n] {
    color: #075fba;
    font-size: 14px;
    font-weight: 860;
}

.audit-table-shell[b-uxef4lxr4n] {
    min-width: 0;
    overflow: auto;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--panel-background);
    box-shadow: 0 12px 30px var(--shadow-color);
}

.audit-content[b-uxef4lxr4n] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
    gap: 14px;
    align-items: start;
    min-width: 0;
}

.audit-table[b-uxef4lxr4n] {
    width: 100%;
    min-width: 960px;
    border-collapse: collapse;
}

.audit-table th[b-uxef4lxr4n],
.audit-table td[b-uxef4lxr4n] {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    text-align: left;
    vertical-align: top;
}

.audit-table th[b-uxef4lxr4n] {
    position: sticky;
    top: 0;
    z-index: 1;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 92%, #dfefff 8%);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.audit-table td[b-uxef4lxr4n] {
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.4;
}

.audit-table tr:last-child td[b-uxef4lxr4n] {
    border-bottom: 0;
}

.audit-table tr:hover td[b-uxef4lxr4n] {
    background: color-mix(in srgb, var(--button-hover) 58%, transparent 42%);
}

.audit-row[b-uxef4lxr4n] {
    cursor: pointer;
    outline: none;
}

.audit-row:focus-visible td[b-uxef4lxr4n] {
    box-shadow: inset 0 0 0 2px rgba(23, 105, 220, 0.34);
}

.audit-row.selected td[b-uxef4lxr4n] {
    background: rgba(224, 242, 255, 0.78);
}

.audit-table time[b-uxef4lxr4n] {
    white-space: nowrap;
}

.audit-table small[b-uxef4lxr4n] {
    display: block;
    margin-top: 2px;
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 680;
}

.audit-action-badge[b-uxef4lxr4n] {
    display: inline-flex;
    max-width: 220px;
    align-items: center;
    padding: 5px 8px;
    border: 1px solid rgba(23, 105, 220, 0.16);
    border-radius: 999px;
    color: #075fba;
    background: rgba(234, 246, 255, 0.76);
    font-size: 11px;
    font-weight: 820;
}

.audit-state-cell[b-uxef4lxr4n] {
    height: 140px;
    color: var(--secondary-text) !important;
    text-align: center !important;
    vertical-align: middle !important;
}

.audit-detail-panel[b-uxef4lxr4n],
.audit-detail-empty[b-uxef4lxr4n] {
    position: sticky;
    top: 10px;
    display: grid;
    gap: 14px;
    min-width: 0;
    max-height: calc(100vh - 150px);
    overflow: auto;
    border: 1px solid rgba(78, 136, 184, 0.16);
    border-radius: 16px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.92), rgba(240, 249, 255, 0.74));
    box-shadow:
        0 18px 42px rgba(31, 78, 121, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.audit-detail-panel[b-uxef4lxr4n] {
    padding: 16px;
}

.audit-detail-empty[b-uxef4lxr4n] {
    min-height: 220px;
    align-content: center;
    justify-items: center;
    padding: 24px;
    color: var(--secondary-text);
    text-align: center;
}

.audit-detail-empty span[b-uxef4lxr4n] {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 850;
}

.audit-detail-empty p[b-uxef4lxr4n] {
    max-width: 240px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}

.audit-detail-header[b-uxef4lxr4n] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.audit-detail-header span[b-uxef4lxr4n],
.audit-detail-summary span[b-uxef4lxr4n],
.audit-json-card h3[b-uxef4lxr4n],
.audit-detail-grid dt[b-uxef4lxr4n] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.audit-detail-header h2[b-uxef4lxr4n] {
    margin: 3px 0 0;
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 880;
    line-height: 1.2;
}

.audit-detail-close[b-uxef4lxr4n] {
    display: inline-grid;
    width: 32px;
    height: 32px;
    place-items: center;
    border: 1px solid rgba(78, 136, 184, 0.18);
    border-radius: 10px;
    color: var(--secondary-text);
    background: rgba(255, 255, 255, 0.68);
    font-family: inherit;
    font-size: 18px;
    font-weight: 760;
    cursor: pointer;
}

.audit-detail-close:hover[b-uxef4lxr4n] {
    color: #075fba;
    border-color: rgba(23, 105, 220, 0.22);
}

.audit-detail-grid[b-uxef4lxr4n] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 0;
}

.audit-detail-grid div[b-uxef4lxr4n],
.audit-detail-summary[b-uxef4lxr4n],
.audit-json-card[b-uxef4lxr4n] {
    min-width: 0;
    border: 1px solid rgba(78, 136, 184, 0.12);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.54);
}

.audit-detail-grid div[b-uxef4lxr4n] {
    padding: 10px;
}

.audit-detail-grid dd[b-uxef4lxr4n] {
    margin: 4px 0 0;
    overflow-wrap: anywhere;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 760;
    line-height: 1.4;
}

.audit-detail-grid dd span[b-uxef4lxr4n] {
    color: var(--secondary-text);
}

.audit-detail-summary[b-uxef4lxr4n] {
    padding: 12px;
}

.audit-detail-summary p[b-uxef4lxr4n] {
    margin: 5px 0 0;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 720;
    line-height: 1.5;
}

.audit-json-grid[b-uxef4lxr4n] {
    display: grid;
    gap: 10px;
}

.audit-json-card[b-uxef4lxr4n] {
    display: grid;
    gap: 8px;
    padding: 12px;
}

.audit-json-card h3[b-uxef4lxr4n] {
    margin: 0;
}

.audit-json-card pre[b-uxef4lxr4n] {
    max-height: 240px;
    margin: 0;
    overflow: auto;
    padding: 12px;
    border: 1px solid rgba(30, 85, 130, 0.11);
    border-radius: 10px;
    color: #12344f;
    background: rgba(244, 250, 255, 0.82);
    font-family: Consolas, "Cascadia Mono", monospace;
    font-size: 11px;
    font-weight: 620;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.app-shell.theme-dark .audit-error[b-uxef4lxr4n] {
    color: #ffd7dc;
    border-color: rgba(224, 92, 105, 0.22);
    background: rgba(224, 92, 105, 0.10);
}

.app-shell.theme-dark .audit-summary[b-uxef4lxr4n] {
    color: #b9c9dc;
    border-color: rgba(111, 199, 199, 0.12);
    background: rgba(255, 255, 255, 0.05);
}

.app-shell.theme-dark .audit-summary strong[b-uxef4lxr4n],
.app-shell.theme-dark .audit-action-badge[b-uxef4lxr4n] {
    color: #9fe7f0;
}

.app-shell.theme-dark .audit-action-badge[b-uxef4lxr4n] {
    border-color: rgba(111, 199, 199, 0.14);
    background: rgba(111, 199, 199, 0.08);
}

.app-shell.theme-dark .audit-row.selected td[b-uxef4lxr4n] {
    background: rgba(42, 132, 194, 0.22);
}

.app-shell.theme-dark .audit-detail-panel[b-uxef4lxr4n],
.app-shell.theme-dark .audit-detail-empty[b-uxef4lxr4n] {
    border-color: rgba(111, 199, 199, 0.14);
    background:
        linear-gradient(145deg, rgba(18, 37, 59, 0.96), rgba(10, 28, 45, 0.86));
    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.app-shell.theme-dark .audit-detail-grid div[b-uxef4lxr4n],
.app-shell.theme-dark .audit-detail-summary[b-uxef4lxr4n],
.app-shell.theme-dark .audit-json-card[b-uxef4lxr4n] {
    border-color: rgba(111, 199, 199, 0.10);
    background: rgba(255, 255, 255, 0.04);
}

.app-shell.theme-dark .audit-detail-close[b-uxef4lxr4n] {
    color: #b9c9dc;
    border-color: rgba(111, 199, 199, 0.12);
    background: rgba(255, 255, 255, 0.04);
}

.app-shell.theme-dark .audit-json-card pre[b-uxef4lxr4n] {
    color: #d9eef8;
    border-color: rgba(111, 199, 199, 0.10);
    background: rgba(3, 14, 24, 0.50);
}

@media (max-width: 1360px) {
    .audit-content[b-uxef4lxr4n] {
        grid-template-columns: 1fr;
    }

    .audit-detail-panel[b-uxef4lxr4n],
    .audit-detail-empty[b-uxef4lxr4n] {
        position: static;
        max-height: none;
    }
}

@media (max-width: 1120px) {
    .audit-toolbar[b-uxef4lxr4n] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 680px) {
    .audit-toolbar[b-uxef4lxr4n] {
        grid-template-columns: 1fr;
    }

    .audit-detail-grid[b-uxef4lxr4n] {
        grid-template-columns: 1fr;
    }
}

/* === Readable "What changed" table (replaces raw JSON dump) === */
.audit-changes[b-uxef4lxr4n] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audit-changes h3[b-uxef4lxr4n] {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.audit-changes-empty[b-uxef4lxr4n] {
    margin: 0;
    padding: 11px 13px;
    border-radius: 9px;
    background: rgba(23, 105, 220, 0.05);
    color: var(--secondary-text);
    font-size: 12px;
}

.audit-changes-table[b-uxef4lxr4n] {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
}

.audit-changes-table th[b-uxef4lxr4n] {
    padding: 7px 9px;
    text-align: left;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--secondary-text);
    text-transform: uppercase;
    border-bottom: 1px solid rgba(23, 105, 220, 0.16);
}

.audit-changes-table td[b-uxef4lxr4n] {
    padding: 7px 9px;
    color: var(--primary-text);
    border-bottom: 1px solid rgba(23, 105, 220, 0.08);
    vertical-align: top;
    word-break: break-word;
}

.audit-changes-table td:first-child[b-uxef4lxr4n] {
    font-weight: 700;
    color: var(--secondary-text);
    white-space: nowrap;
}

.audit-changes-table tr.changed td[b-uxef4lxr4n] {
    background: rgba(217, 155, 35, 0.07);
}

.audit-changes-table tr.changed td:last-child[b-uxef4lxr4n] {
    color: #1769dc;
    font-weight: 700;
}
/* /Components/Pages/Employees.razor.rz.scp.css */
.employees-page[b-h82phsqwyd] {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    font-size: 14px;
}

.employees-header[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding: 4px 2px 0;
}

.employees-header > div:first-child[b-h82phsqwyd] {
    width: min(620px, 100%);
}

.employees-header h1[b-h82phsqwyd] {
    margin: 5px 0;
    color: var(--primary-text);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.45px;
}

.employees-header p[b-h82phsqwyd] {
    max-width: 760px;
    margin: 0;
    color: var(--secondary-text);
    font-size: 14px;
    line-height: 1.5;
}

.page-eyebrow[b-h82phsqwyd] {
    color: #1769dc;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.primary-action[b-h82phsqwyd],
.secondary-action[b-h82phsqwyd],
.save-action[b-h82phsqwyd],
.refresh-button[b-h82phsqwyd],
.filter-button[b-h82phsqwyd] {
    font-family: inherit;
    cursor: pointer;
}

.primary-action[b-h82phsqwyd] {
    display: inline-flex;
    min-height: 44px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border: 1px solid #1769dc;
    border-radius: 9px;
    color: #ffffff;
    background: #1769dc;
    font-size: 13px;
    font-weight: 650;
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.2);
}

.primary-action:hover:not(:disabled)[b-h82phsqwyd] {
    background: #125dbf;
}

.primary-action span[b-h82phsqwyd] {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.employees-workspace[b-h82phsqwyd] {
    display: grid;
    min-width: 0;
    min-height: 620px;
    grid-template-columns: minmax(390px, 470px) minmax(560px, 1fr);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--panel-background);
    box-shadow: 0 4px 14px var(--shadow-color);
}

.employee-list-panel[b-h82phsqwyd],
.employee-editor-panel[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.employee-list-panel[b-h82phsqwyd] {
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--panel-background) 94%, var(--button-hover) 6%);
}

.panel-heading[b-h82phsqwyd],
.editor-heading[b-h82phsqwyd] {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--border-color);
}

.panel-heading[b-h82phsqwyd] {
    padding: 14px 17px;
}

.editor-heading[b-h82phsqwyd] {
    padding: 16px 42px;
}

.panel-heading > div[b-h82phsqwyd],
.editor-heading > div[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.panel-heading span[b-h82phsqwyd],
.editor-heading span[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 700;
}

.panel-heading small[b-h82phsqwyd],
.editor-heading small[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 11px;
}

.refresh-button[b-h82phsqwyd] {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 19px;
}

.refresh-button:hover:not(:disabled)[b-h82phsqwyd] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.employee-list-tools[b-h82phsqwyd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border-bottom: 1px solid var(--border-color);
}

.search-field[b-h82phsqwyd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
}

.search-field input[b-h82phsqwyd] {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 12.5px;
}

.search-field input:focus[b-h82phsqwyd] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.12);
}

.employee-filters[b-h82phsqwyd] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--button-hover);
}

.filter-button[b-h82phsqwyd] {
    min-height: 31px;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 11px;
    font-weight: 700;
}

.filter-button:hover[b-h82phsqwyd],
.filter-button.active[b-h82phsqwyd] {
    color: var(--primary-text);
    background: var(--panel-background);
    box-shadow: 0 2px 6px var(--shadow-color);
}

.filter-button.active[b-h82phsqwyd] {
    color: #1769dc;
}

.employee-list[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    padding: 12px;
}

.employee-list-item[b-h82phsqwyd] {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 38px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.employee-list-item:hover:not(:disabled)[b-h82phsqwyd] {
    border-color: var(--border-color);
    background: var(--button-hover);
}

.employee-list-item.selected[b-h82phsqwyd] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 84%, #1769dc 16%);
    box-shadow: 0 3px 9px rgba(23, 105, 220, 0.12);
}

.employee-avatar[b-h82phsqwyd] {
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border-radius: 9px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 76%, #1769dc 24%);
    font-size: 11px;
    font-weight: 800;
}

.item-copy[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.item-copy strong[b-h82phsqwyd],
.item-copy small[b-h82phsqwyd] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-copy strong[b-h82phsqwyd] {
    font-size: 13px;
    font-weight: 650;
}

.item-copy small[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 10px;
    letter-spacing: 0.2px;
}

.employee-tags[b-h82phsqwyd] {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
}

.employment-type[b-h82phsqwyd],
.agency-badge[b-h82phsqwyd],
.item-status[b-h82phsqwyd] {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.employment-type.permanent[b-h82phsqwyd] {
    color: #234f85;
    border: 1px solid #9bbde5;
    background: #e4f0ff;
}

.employment-type.agency[b-h82phsqwyd] {
    color: #6b5511;
    border: 1px solid #d8c166;
    background: #fff3bf;
}

.agency-badge[b-h82phsqwyd] {
    color: #2d2a22;
    border: 1px solid color-mix(in srgb, var(--agency-colour, #f2c94c) 70%, #5d5540 30%);
    background: var(--agency-colour, #f2c94c);
}

.item-status.active[b-h82phsqwyd] {
    color: #166543;
    border: 1px solid #86cfaf;
    background: #dcf4e9;
}

.item-status.inactive[b-h82phsqwyd] {
    color: #6f3e45;
    border: 1px solid #df9298;
    background: #fde5e7;
}

.panel-state[b-h82phsqwyd] {
    display: flex;
    min-height: 300px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 26px;
    color: var(--secondary-text);
    font-size: 13px;
    text-align: center;
}

.panel-state strong[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 14px;
}

.panel-state span[b-h82phsqwyd] {
    max-width: 260px;
    line-height: 1.5;
}

.loading-indicator[b-h82phsqwyd],
.button-spinner[b-h82phsqwyd] {
    display: inline-block;
    border: 2px solid var(--border-color);
    border-top-color: #1769dc;
    border-radius: 50%;
    animation: employee-spin-b-h82phsqwyd 700ms linear infinite;
}

.loading-indicator[b-h82phsqwyd] {
    width: 26px;
    height: 26px;
}

.editor-empty-state[b-h82phsqwyd] {
    display: flex;
    min-height: 520px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--secondary-text);
    text-align: center;
}

.editor-empty-state strong[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 16px;
}

.editor-empty-state span[b-h82phsqwyd] {
    font-size: 13px;
}

.editor-empty-icon[b-h82phsqwyd] {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: #1769dc;
    background: var(--button-hover);
    font-size: 23px;
}

.employee-editor-panel[b-h82phsqwyd]  form.editor-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 28px 42px 34px;
}

.form-grid[b-h82phsqwyd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(220px, 280px));
    justify-content: start;
    column-gap: 22px;
    row-gap: 22px;
}

.form-field[b-h82phsqwyd],
.status-field[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.form-field.full-width[b-h82phsqwyd],
.status-field.full-width[b-h82phsqwyd] {
    grid-column: 1 / -1;
}

.form-field label[b-h82phsqwyd],
.status-field label[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
}

.form-field > small[b-h82phsqwyd],
.status-field small[b-h82phsqwyd],
.permanent-info-card span[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 10.5px;
    line-height: 1.45;
}

.form-input[b-h82phsqwyd] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    outline: none;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 13px;
    transition: border-color 130ms ease, box-shadow 130ms ease;
}

.form-input:focus[b-h82phsqwyd] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.12);
}

.code-input[b-h82phsqwyd] {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.2px;
}

.compact-name-field[b-h82phsqwyd] {
    max-width: 260px;
}

.employee-code-field[b-h82phsqwyd] {
    max-width: 300px;
}

.employment-field[b-h82phsqwyd],
.agency-field[b-h82phsqwyd],
.position-field[b-h82phsqwyd] {
    max-width: 280px;
}

.permanent-info-card[b-h82phsqwyd] {
    display: flex;
    min-height: 72px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    width: min(100%, 582px);
    padding: 12px 14px;
    border: 1px solid #a9c8ee;
    border-radius: 9px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 83%, #dcecff 17%);
}

.permanent-info-card strong[b-h82phsqwyd] {
    font-size: 12px;
}

.field-warning[b-h82phsqwyd] {
    color: #a14a24 !important;
    font-weight: 650;
}

.status-field[b-h82phsqwyd] {
    display: flex;
    width: min(100%, 582px);
    min-height: 78px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 28px;
    padding: 13px 15px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--button-hover);
}

.status-field > div[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.status-switch[b-h82phsqwyd] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    cursor: pointer;
}

.status-switch input[b-h82phsqwyd] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.switch-track[b-h82phsqwyd] {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #aeb8c4;
    transition: background 140ms ease;
}

.switch-track[b-h82phsqwyd]::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.25);
    content: "";
    transition: transform 140ms ease;
}

.status-switch input:checked + .switch-track[b-h82phsqwyd] {
    background: #1769dc;
}

.status-switch input:checked + .switch-track[b-h82phsqwyd]::after {
    transform: translateX(18px);
}

.validation-summary[b-h82phsqwyd] {
    margin-top: 20px;
    color: #a72d38;
    font-size: 12px;
}

.validation-message[b-h82phsqwyd] {
    color: #a72d38;
    font-size: 10.5px;
}

.employee-note[b-h82phsqwyd] {
    display: flex;
    width: min(100%, 582px);
    margin-top: 20px;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    border: 1px solid #a9c8ee;
    border-radius: 8px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 84%, #dcecff 16%);
}

.employee-note strong[b-h82phsqwyd] {
    font-size: 11px;
}

.employee-note span[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 10.5px;
}

.editor-actions[b-h82phsqwyd] {
    display: flex;
    margin-top: auto;
    padding-top: 28px;
    align-items: center;
    gap: 10px;
}

.secondary-action[b-h82phsqwyd],
.save-action[b-h82phsqwyd] {
    display: inline-flex;
    min-width: 118px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
}

.secondary-action[b-h82phsqwyd] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
}

.secondary-action:hover:not(:disabled)[b-h82phsqwyd] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.save-action[b-h82phsqwyd] {
    border: 1px solid #1769dc;
    color: #ffffff;
    background: #1769dc;
}

.save-action:hover:not(:disabled)[b-h82phsqwyd] {
    background: #125dbf;
}

button:disabled[b-h82phsqwyd] {
    cursor: not-allowed;
    opacity: 0.5;
}

.button-spinner[b-h82phsqwyd] {
    width: 14px;
    height: 14px;
    border-color: rgba(255, 255, 255, 0.42);
    border-top-color: #ffffff;
}

.feedback-message[b-h82phsqwyd] {
    padding: 11px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 650;
}

.error-message[b-h82phsqwyd] {
    border: 1px solid #df9298;
    color: #7b2831;
    background: #fde5e7;
}

.configuration-toast[b-h82phsqwyd] {
    position: fixed;
    top: 82px;
    left: 50%;
    z-index: 1000;
    display: inline-flex;
    max-width: min(480px, calc(100vw - 32px));
    align-items: center;
    gap: 9px;
    padding: 11px 16px;
    transform: translateX(-50%);
    border: 1px solid #86cfaf;
    border-radius: 9px;
    color: #165f40;
    background: #e2f7ed;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.18);
    font-size: 12px;
    font-weight: 700;
}

.configuration-toast-icon[b-h82phsqwyd] {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #269663;
    font-size: 12px;
}

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

@media (max-width: 1180px) {
    .employees-workspace[b-h82phsqwyd] {
        grid-template-columns: minmax(340px, 410px) minmax(480px, 1fr);
    }

    .employee-list-item[b-h82phsqwyd] {
        grid-template-columns: 38px minmax(0, 1fr) auto;
    }

    .employee-tags .agency-badge[b-h82phsqwyd] {
        display: none;
    }
}

@media (max-width: 900px) {
    .employees-workspace[b-h82phsqwyd] {
        grid-template-columns: 1fr;
        overflow: visible;
    }

    .employee-list-panel[b-h82phsqwyd] {
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .employee-list[b-h82phsqwyd] {
        max-height: 430px;
    }
}

@media (max-width: 640px) {
    .employees-header[b-h82phsqwyd] {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

    .employees-header > div:first-child[b-h82phsqwyd] {
        width: 100%;
    }

    .primary-action[b-h82phsqwyd] {
        width: 100%;
    }

    .editor-heading[b-h82phsqwyd],
    .employee-editor-panel[b-h82phsqwyd]  form.editor-form {
        padding-right: 18px;
        padding-left: 18px;
    }

    .form-grid[b-h82phsqwyd] {
        grid-template-columns: 1fr;
        row-gap: 22px;
    }

    .form-field.full-width[b-h82phsqwyd],
    .status-field.full-width[b-h82phsqwyd] {
        grid-column: auto;
    }

    .status-field[b-h82phsqwyd] {
        align-items: flex-start;
        flex-direction: column;
    }

    .editor-actions[b-h82phsqwyd] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-action[b-h82phsqwyd],
    .save-action[b-h82phsqwyd] {
        width: 100%;
    }
}

.panel-heading-actions[b-h82phsqwyd] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.toolbar-action[b-h82phsqwyd] {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid #1769dc;
    border-radius: 8px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
    font-family: inherit;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.toolbar-action:hover:not(:disabled)[b-h82phsqwyd],
.primary-action:hover:not(:disabled)[b-h82phsqwyd],
.secondary-action:hover:not(:disabled)[b-h82phsqwyd],
.save-action:hover:not(:disabled)[b-h82phsqwyd],
.danger-action:hover:not(:disabled)[b-h82phsqwyd],
.confirm-delete-action:hover:not(:disabled)[b-h82phsqwyd],
.employee-list-item:hover:not(:disabled)[b-h82phsqwyd] {
    transform: translateY(-1px);
}

.toolbar-action:hover:not(:disabled)[b-h82phsqwyd] {
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.14);
    border-color: #125dbf;
    background: color-mix(in srgb, var(--panel-background) 86%, #1769dc 14%);
}

.filter-button[b-h82phsqwyd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.filter-button span[b-h82phsqwyd] {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    background: rgba(23, 105, 220, 0.08);
    font-size: 10px;
}

.filter-button.active span[b-h82phsqwyd] {
    background: rgba(23, 105, 220, 0.12);
}

.filter-select[b-h82phsqwyd] {
    width: 100%;
    min-height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 12.5px;
}

.filter-select:focus[b-h82phsqwyd] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.12);
}

.employee-summary-strip[b-h82phsqwyd] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.summary-chip[b-h82phsqwyd] {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 750;
}

.summary-chip.permanent[b-h82phsqwyd] {
    color: #234f85;
    border: 1px solid #9bbde5;
    background: #e4f0ff;
}

.summary-chip.agency[b-h82phsqwyd] {
    color: #6b5511;
    border: 1px solid #d8c166;
    background: #fff3bf;
}

.summary-chip.neutral[b-h82phsqwyd] {
    color: var(--primary-text);
    border: 1px solid var(--border-color);
    background: var(--panel-background);
}

.employee-position[b-h82phsqwyd] {
    color: #1769dc !important;
    font-weight: 700;
}

.employee-list-item[b-h82phsqwyd] {
    transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.employee-list-item.selected[b-h82phsqwyd] {
    animation: employeeSelectPulse-b-h82phsqwyd 180ms ease-out;
}

@keyframes employeeSelectPulse-b-h82phsqwyd {
    0% {
        transform: scale(0.992);
    }

    100% {
        transform: scale(1);
    }
}

.danger-action[b-h82phsqwyd],
.confirm-delete-action[b-h82phsqwyd] {
    display: inline-flex;
    min-width: 118px;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.danger-action[b-h82phsqwyd] {
    margin-right: auto;
    border: 1px solid #e2a1a8;
    color: #8b2d37;
    background: #fff4f5;
}

.danger-action:hover:not(:disabled)[b-h82phsqwyd],
.confirm-delete-action:hover:not(:disabled)[b-h82phsqwyd] {
    border-color: #cb5d68;
}

.confirm-delete-action[b-h82phsqwyd] {
    border: 1px solid #cb5d68;
    color: #ffffff;
    background: #cb5d68;
}

.delete-confirmation[b-h82phsqwyd] {
    display: flex;
    width: min(100%, 582px);
    margin-top: 18px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 15px;
    border: 1px solid #e5aab1;
    border-radius: 10px;
    background: #fff4f5;
}

.delete-confirmation > div:first-child[b-h82phsqwyd] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delete-confirmation strong[b-h82phsqwyd] {
    color: #7f2630;
    font-size: 12px;
}

.delete-confirmation span[b-h82phsqwyd] {
    color: #8b5560;
    font-size: 10.5px;
    line-height: 1.45;
}

.delete-confirmation-actions[b-h82phsqwyd] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
}

.employees-header[b-h82phsqwyd] {
    gap: 20px;
    padding-top: 0;
}

.employees-header h1[b-h82phsqwyd] {
    margin-bottom: 4px;
    font-size: 26px;
}

.primary-action[b-h82phsqwyd] {
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.primary-action:hover:not(:disabled)[b-h82phsqwyd] {
    box-shadow: 0 10px 18px rgba(23, 105, 220, 0.24);
}

@media (max-width: 640px) {
    .delete-confirmation[b-h82phsqwyd] {
        flex-direction: column;
        align-items: stretch;
    }

    .delete-confirmation-actions[b-h82phsqwyd] {
        flex-direction: column;
    }

    .danger-action[b-h82phsqwyd],
    .secondary-action[b-h82phsqwyd],
    .save-action[b-h82phsqwyd],
    .confirm-delete-action[b-h82phsqwyd] {
        width: 100%;
        margin-right: 0;
    }
}

.panel-add-text-button[b-h82phsqwyd] {
    display: inline-flex;
    width: auto;
    min-width: 104px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #6ea7e8;
    border-radius: 9px;
    color: #0d5dcc;
    background: linear-gradient(180deg, #eef6ff 0%, #dbeafa 52%, #c7dcf5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -2px 3px rgba(42, 105, 180, 0.12),
        0 3px 7px rgba(31, 94, 167, 0.18);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, filter 140ms ease;
}

.panel-add-text-button span:first-child[b-h82phsqwyd] {
    font-size: 17px;
    line-height: 1;
}

.panel-add-text-button:hover:not(:disabled)[b-h82phsqwyd] {
    transform: translateY(-1px);
    border-color: #4f91dd;
    background: linear-gradient(180deg, #e7f2ff 0%, #d1e4f9 52%, #bdd5f1 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -2px 3px rgba(42, 105, 180, 0.16),
        0 6px 12px rgba(31, 94, 167, 0.22);
}

.panel-add-text-button:active:not(:disabled)[b-h82phsqwyd] {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        inset 0 2px 4px rgba(42, 105, 180, 0.16),
        0 1px 3px rgba(31, 94, 167, 0.14);
}

.employee-agency-name[b-h82phsqwyd],
.employee-department[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 10.5px;
}

.employee-editor-panel[b-h82phsqwyd]  form.editor-form {
    max-width: 760px;
    padding: 24px 28px 28px;
}

.editor-heading[b-h82phsqwyd] {
    padding: 14px 28px;
}

.form-grid[b-h82phsqwyd] {
    grid-template-columns: repeat(2, minmax(210px, 270px));
    row-gap: 18px;
}

.department-field[b-h82phsqwyd],
.position-field[b-h82phsqwyd],
.agency-field[b-h82phsqwyd],
.employment-field[b-h82phsqwyd] {
    max-width: 270px;
}

.status-field[b-h82phsqwyd],
.employee-note[b-h82phsqwyd],
.delete-confirmation[b-h82phsqwyd],
.editor-actions[b-h82phsqwyd],
.permanent-info-card[b-h82phsqwyd] {
    width: min(100%, 560px);
}

.employee-note[b-h82phsqwyd],
.delete-confirmation[b-h82phsqwyd],
.editor-actions[b-h82phsqwyd] {
    margin-top: 16px;
}

.editor-actions[b-h82phsqwyd] {
    margin-top: 16px;
    padding-top: 0;
    justify-content: flex-start;
    gap: 10px;
}

.danger-action[b-h82phsqwyd] {
    margin-right: 0;
    order: 3;
}

.secondary-action[b-h82phsqwyd] {
    order: 1;
}

.save-action[b-h82phsqwyd] {
    order: 2;
}

.employee-panel-heading[b-h82phsqwyd] {
    display: grid;
    min-height: 112px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 38px auto;
    align-items: end;
    column-gap: 12px;
    row-gap: 10px;
    padding: 12px 16px 14px;
}

.employee-refresh-button[b-h82phsqwyd] {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    justify-self: start;
}

.employee-panel-title[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    flex-direction: column;
    gap: 4px;
}

.employee-add-button[b-h82phsqwyd] {
    grid-column: 2;
    grid-row: 2;
    align-self: center;
    justify-self: end;
}

@media (max-width: 430px) {
    .employee-panel-heading[b-h82phsqwyd] {
        grid-template-columns: 1fr;
        grid-template-rows: 38px auto auto;
    }

    .employee-panel-title[b-h82phsqwyd] {
        grid-column: 1;
        grid-row: 2;
    }

    .employee-add-button[b-h82phsqwyd] {
        width: 100%;
        grid-column: 1;
        grid-row: 3;
        justify-self: stretch;
    }
}

.employee-context-dismiss-layer[b-h82phsqwyd] {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: transparent;
}

.employee-context-menu[b-h82phsqwyd] {
    position: fixed;
    z-index: 1601;
    width: 270px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.24);
    animation: employeeContextMenuOpen-b-h82phsqwyd 150ms ease-out;
}

.employee-context-menu-heading[b-h82phsqwyd] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
}

.employee-context-menu-heading strong[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 12px;
}

.employee-context-menu-heading span[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 10px;
}

.employee-context-menu button[b-h82phsqwyd] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border: 0;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease, transform 120ms ease;
}

.employee-context-menu button:hover[b-h82phsqwyd] {
    background: var(--button-hover);
}

.employee-context-menu button:active[b-h82phsqwyd] {
    transform: scale(0.985);
}

.employee-context-menu button > span:last-child[b-h82phsqwyd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.employee-context-menu button strong[b-h82phsqwyd] {
    font-size: 12px;
}

.employee-context-menu button small[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-size: 9.5px;
}

.context-menu-icon[b-h82phsqwyd] {
    display: grid;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 8px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    font-size: 16px;
    font-weight: 800;
}

.employee-context-menu .context-danger-item[b-h82phsqwyd] {
    color: #a8323f;
    border-top: 1px solid color-mix(in srgb, #d66c76 30%, var(--border-color) 70%);
}

.employee-context-menu .context-danger-item:hover[b-h82phsqwyd] {
    color: #8f2631;
    background: color-mix(in srgb, var(--panel-background) 82%, #fde5e7 18%);
}

.employee-context-menu .context-danger-item .context-menu-icon[b-h82phsqwyd] {
    color: #c14450;
    background: color-mix(in srgb, var(--panel-background) 78%, #fde5e7 22%);
}

@keyframes employeeContextMenuOpen-b-h82phsqwyd {
    0% {
        transform: translateY(-4px) scale(0.98);
        opacity: 0;
    }

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

.conversion-backdrop[b-h82phsqwyd] {
    position: fixed;
    inset: 0;
    z-index: 1700;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.48);
    backdrop-filter: blur(5px);
}

.conversion-dialog[b-h82phsqwyd] {
    width: min(620px, 100%);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 16px;
    background: var(--panel-background);
    box-shadow: 0 28px 70px rgba(15, 23, 42, 0.3);
    animation: conversionDialogOpen-b-h82phsqwyd 180ms ease-out;
}

.conversion-header[b-h82phsqwyd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 90% 0%, rgba(111, 199, 199, 0.16), transparent 38%),
        color-mix(in srgb, var(--panel-background) 93%, #1769dc 7%);
}

.conversion-header h2[b-h82phsqwyd] {
    margin: 3px 0 5px;
    color: var(--primary-text);
    font-size: 21px;
    letter-spacing: -0.35px;
}

.conversion-header p[b-h82phsqwyd] {
    margin: 0;
    color: var(--secondary-text);
    font-size: 11.5px;
    line-height: 1.5;
}

.conversion-eyebrow[b-h82phsqwyd] {
    color: #1769dc;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.conversion-close-button[b-h82phsqwyd] {
    display: grid;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 20px;
    cursor: pointer;
    transition: border-color 140ms ease, color 140ms ease, background 140ms ease, transform 120ms ease;
}

.conversion-close-button:hover[b-h82phsqwyd] {
    border-color: #1769dc;
    color: #1769dc;
    background: var(--button-hover);
}

.conversion-close-button:active[b-h82phsqwyd] {
    transform: scale(0.94);
}

.conversion-source-card[b-h82phsqwyd] {
    display: flex;
    margin: 18px 22px 0;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border: 1px solid #d9c263;
    border-radius: 10px;
    background: #fff7d6;
}

.conversion-source-card span[b-h82phsqwyd] {
    color: #765f16;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.conversion-source-card strong[b-h82phsqwyd] {
    color: #4f4218;
    font-size: 13px;
}

.conversion-source-card small[b-h82phsqwyd] {
    color: #7b6c38;
    font-size: 10px;
}

.conversion-form-grid[b-h82phsqwyd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 18px 22px;
}

.conversion-actions[b-h82phsqwyd] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 0 22px 22px;
}

@keyframes conversionDialogOpen-b-h82phsqwyd {
    0% {
        transform: translateY(10px) scale(0.985);
        opacity: 0;
    }

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

.app-shell.theme-dark .conversion-source-card[b-h82phsqwyd] {
    border-color: rgba(217, 194, 99, 0.28);
    background: rgba(118, 95, 22, 0.16);
}

.app-shell.theme-dark .conversion-source-card span[b-h82phsqwyd],
.app-shell.theme-dark .conversion-source-card strong[b-h82phsqwyd],
.app-shell.theme-dark .conversion-source-card small[b-h82phsqwyd] {
    color: #f4e6a7;
}

@media (max-width: 640px) {
    .conversion-form-grid[b-h82phsqwyd] {
        grid-template-columns: 1fr;
    }

    .conversion-actions[b-h82phsqwyd] {
        flex-direction: column;
    }
}

/* Employees independent list scroll patch
   Keeps the employee editor visible while the employee list scrolls independently.
   Desktop uses a fixed workspace height based on the current viewport.
   Mobile/tablet keeps the normal stacked page scroll.
*/
@media (min-width: 901px) {
    .employees-page[b-h82phsqwyd] {
        height: calc(100dvh - 96px);
        min-height: 0;
        overflow: hidden;
    }

    .employees-workspace[b-h82phsqwyd] {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
        overflow: hidden;
    }

    .employee-list-panel[b-h82phsqwyd],
    .employee-editor-panel[b-h82phsqwyd] {
        min-height: 0;
        overflow: hidden;
    }

    .employee-list-tools[b-h82phsqwyd],
    .employee-panel-heading[b-h82phsqwyd],
    .editor-heading[b-h82phsqwyd] {
        flex: 0 0 auto;
    }

    .employee-list[b-h82phsqwyd] {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .employee-editor-panel[b-h82phsqwyd]  form.editor-form {
        flex: 1 1 auto;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }

    .editor-empty-state[b-h82phsqwyd] {
        flex: 1 1 auto;
        min-height: 0;
    }
}

@media (max-width: 900px) {
    .employees-page[b-h82phsqwyd] {
        height: auto;
        min-height: 0;
        overflow: visible;
    }

    .employees-workspace[b-h82phsqwyd] {
        height: auto;
        overflow: visible;
    }

    .employee-list-panel[b-h82phsqwyd],
    .employee-editor-panel[b-h82phsqwyd],
    .employee-editor-panel[b-h82phsqwyd]  form.editor-form {
        overflow: visible;
    }
}

/* =====================================================
   Redesign: header stat cards + editor identity header
   ===================================================== */
.employees-header[b-h82phsqwyd] {
    align-items: stretch;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.employees-header-copy[b-h82phsqwyd] {
    min-width: 0;
    width: auto;
    flex: 1 1 320px;
    max-width: 620px;
}

.employee-stat-cards[b-h82phsqwyd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 12px;
    flex: 2 1 560px;
}

.employee-stat-card[b-h82phsqwyd] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--panel-background);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--shadow-color) 60%, transparent);
}

.employee-stat-icon[b-h82phsqwyd] {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
}

.employee-stat-icon svg[b-h82phsqwyd] {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-stat-icon.total[b-h82phsqwyd] { color: #2f7de1; background: color-mix(in srgb, #2f7de1 15%, transparent); }
.employee-stat-icon.permanent[b-h82phsqwyd] { color: #23a06b; background: color-mix(in srgb, #23a06b 15%, transparent); }
.employee-stat-icon.agency[b-h82phsqwyd] { color: #8b5cf0; background: color-mix(in srgb, #8b5cf0 15%, transparent); }
.employee-stat-icon.active[b-h82phsqwyd] { color: #e08b2f; background: color-mix(in srgb, #e08b2f 15%, transparent); }

.employee-stat-body[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.employee-stat-value[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.employee-stat-label[b-h82phsqwyd] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 650;
}

.employee-stat-sub[b-h82phsqwyd] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 500;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Editor identity header (avatar + name, no edit control) */
.editor-identity[b-h82phsqwyd] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 42px 16px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 0;
}

.editor-avatar[b-h82phsqwyd] {
    display: inline-flex;
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1;
    background: linear-gradient(150deg, #3a86e0, #2f5fd0);
    box-shadow: 0 6px 16px color-mix(in srgb, #2f5fd0 40%, transparent);
}

.editor-identity-copy[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 5px;
}

.editor-identity-name-row[b-h82phsqwyd] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.editor-identity-name[b-h82phsqwyd] {
    overflow-x: hidden;
    overflow-y: visible;
    display: inline-block;
    padding-block: 2px;
    color: var(--primary-text);
    font-size: 20px;
    font-weight: 750;
    letter-spacing: -0.3px;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.editor-identity-meta[b-h82phsqwyd] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 550;
}

.editor-identity-badge[b-h82phsqwyd] {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.editor-identity-badge.permanent[b-h82phsqwyd] {
    color: #2f7de1;
    background: color-mix(in srgb, #2f7de1 15%, transparent);
}

.editor-identity-badge.agency[b-h82phsqwyd] {
    color: #b07d18;
    background: color-mix(in srgb, #e0a72f 20%, transparent);
}

.app-shell.theme-dark .editor-identity-badge.agency[b-h82phsqwyd] {
    color: #f2c94c;
}

.editor-identity-sep[b-h82phsqwyd] {
    color: color-mix(in srgb, var(--secondary-text) 60%, transparent);
    font-size: 12px;
}

.editor-identity-role[b-h82phsqwyd],
.editor-identity-started[b-h82phsqwyd] {
    color: var(--secondary-text);
    font-weight: 600;
}

.editor-status-pill[b-h82phsqwyd] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 5px 11px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.editor-status-pill .editor-status-dot[b-h82phsqwyd] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

.editor-status-pill.active[b-h82phsqwyd] {
    color: #1f9d63;
    border-color: color-mix(in srgb, #1f9d63 35%, transparent);
    background: color-mix(in srgb, #1f9d63 12%, transparent);
}

.editor-status-pill.inactive[b-h82phsqwyd] {
    color: #9aa4b2;
    border-color: color-mix(in srgb, #9aa4b2 35%, transparent);
    background: color-mix(in srgb, #9aa4b2 12%, transparent);
}

@media (max-width: 1180px) {
    .employee-stat-cards[b-h82phsqwyd] {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }
}

@media (max-width: 640px) {
    .employee-stat-cards[b-h82phsqwyd] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Pages/Feedback.razor.rz.scp.css */
/* === Feedback & Reports admin page === */

.feedback-page[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 18px 22px 26px;
}

.feedback-page-header[b-golkq7wvcf] {
    display: grid;
    gap: 4px;
    padding: 2px 0 6px;
}

.feedback-page-header h1[b-golkq7wvcf] {
    margin: 0;
    color: var(--primary-text);
    font-size: clamp(22px, 2vw, 28px);
    font-weight: 850;
    letter-spacing: -.025em;
}

.feedback-page-header p[b-golkq7wvcf] {
    margin: 0;
    color: var(--secondary-text);
    font-size: 13px;
    line-height: 1.45;
}

.feedback-toolbar[b-golkq7wvcf] {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 12px;
}

.feedback-filter[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.feedback-filter span[b-golkq7wvcf] {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.feedback-filter select[b-golkq7wvcf] {
    min-width: 170px;
    padding: 8px 11px;
    border: 1px solid rgba(23, 105, 220, 0.22);
    border-radius: 9px;
    background: var(--panel-background, #ffffff);
    color: var(--primary-text);
    font-size: 12.5px;
    font-family: inherit;
}

.feedback-refresh-button[b-golkq7wvcf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    font-size: 12.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.26);
    transition: transform 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.feedback-refresh-button:hover:not(:disabled)[b-golkq7wvcf] {
    transform: translateY(-1px);
}

.feedback-refresh-button:disabled[b-golkq7wvcf] {
    opacity: 0.55;
    cursor: default;
}

.feedback-summary[b-golkq7wvcf] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 999px;
    background: rgba(23, 105, 220, 0.07);
    font-size: 12px;
    color: var(--secondary-text);
}

.feedback-summary strong[b-golkq7wvcf] {
    color: #1769dc;
    font-size: 13px;
}

.feedback-new-pill[b-golkq7wvcf] {
    padding: 2px 9px;
    border-radius: 999px;
    color: #ffffff;
    background: #e2543b;
    font-size: 10.5px;
    font-weight: 800;
}

.feedback-content[b-golkq7wvcf] {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(320px, 420px);
    gap: 16px;
    align-items: start;
}

@media (max-width: 980px) {
    .feedback-content[b-golkq7wvcf] {
        grid-template-columns: 1fr;
    }
}

.feedback-list[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.feedback-state[b-golkq7wvcf] {
    padding: 30px 20px;
    border-radius: 12px;
    background: rgba(23, 105, 220, 0.05);
    color: var(--secondary-text);
    font-size: 12.5px;
    text-align: center;
}

.feedback-card[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 13px 15px;
    border: 1px solid rgba(23, 105, 220, 0.13);
    border-left-width: 4px;
    border-radius: 12px;
    background: var(--panel-background, #ffffff);
    text-align: left;
    font-family: inherit;
    cursor: pointer;
    transition: box-shadow 140ms ease, transform 140ms ease, border-color 140ms ease;
}

.feedback-card:hover[b-golkq7wvcf] {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(23, 105, 220, 0.13);
}

.feedback-card.selected[b-golkq7wvcf] {
    border-color: #1769dc;
    box-shadow: 0 10px 26px rgba(23, 105, 220, 0.18);
}

.feedback-card.status-new[b-golkq7wvcf] {
    border-left-color: #e2543b;
}

.feedback-card.status-inprogress[b-golkq7wvcf] {
    border-left-color: #d99b23;
}

.feedback-card.status-resolved[b-golkq7wvcf] {
    border-left-color: #2f9e6e;
}

.feedback-card-top[b-golkq7wvcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.feedback-card-flags[b-golkq7wvcf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.feedback-attachment-count[b-golkq7wvcf] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 3px 7px;
    border-radius: 999px;
    color: #1769dc;
    background: rgba(23, 105, 220, .10);
    font-size: 10px;
    font-weight: 850;
}

.feedback-category-badge[b-golkq7wvcf] {
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.feedback-category-badge.cat-bug[b-golkq7wvcf] {
    color: #9c2f18;
    background: rgba(226, 84, 59, 0.13);
}

.feedback-category-badge.cat-error[b-golkq7wvcf] {
    color: #8a4a0d;
    background: rgba(217, 155, 35, 0.16);
}

.feedback-category-badge.cat-feedback[b-golkq7wvcf] {
    color: #14538f;
    background: rgba(23, 105, 220, 0.12);
}

.feedback-category-badge.cat-idea[b-golkq7wvcf] {
    color: #1f7a53;
    background: rgba(47, 158, 110, 0.13);
}

.feedback-status-badge[b-golkq7wvcf] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.feedback-card-message[b-golkq7wvcf] {
    margin: 0;
    color: var(--primary-text);
    font-size: 12.5px;
    line-height: 1.45;
    word-break: break-word;
}

.feedback-card-meta[b-golkq7wvcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 11px;
    color: var(--secondary-text);
}

.feedback-card-meta strong[b-golkq7wvcf] {
    font-weight: 700;
}

.feedback-detail[b-golkq7wvcf],
.feedback-detail-empty[b-golkq7wvcf] {
    position: sticky;
    top: 90px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid rgba(23, 105, 220, 0.13);
    border-radius: 14px;
    background: var(--panel-background, #ffffff);
    box-shadow: 0 14px 36px rgba(10, 24, 46, 0.08);
}

.feedback-detail-empty[b-golkq7wvcf] {
    align-items: center;
    padding: 40px 22px;
    text-align: center;
    color: var(--secondary-text);
}

.feedback-detail-empty span[b-golkq7wvcf] {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.feedback-detail-empty p[b-golkq7wvcf] {
    margin: 0;
    font-size: 12.5px;
    max-width: 260px;
}

.feedback-detail-header[b-golkq7wvcf] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.feedback-detail-header h2[b-golkq7wvcf] {
    margin: 6px 0 0;
    font-size: 17px;
    color: var(--primary-text);
}

.feedback-detail-close[b-golkq7wvcf] {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border: 0;
    border-radius: 8px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.feedback-detail-close:hover[b-golkq7wvcf] {
    color: var(--primary-text);
    background: rgba(23, 105, 220, 0.1);
}

.feedback-detail-grid[b-golkq7wvcf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    margin: 0;
}

.feedback-detail-grid dt[b-golkq7wvcf] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.feedback-detail-grid dd[b-golkq7wvcf] {
    margin: 3px 0 0;
    font-size: 12px;
    color: var(--primary-text);
    word-break: break-word;
}

.feedback-detail-message[b-golkq7wvcf],
.feedback-detail-actions[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.feedback-detail-message > span[b-golkq7wvcf],
.feedback-detail-actions > span[b-golkq7wvcf] {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.feedback-detail-message p[b-golkq7wvcf] {
    margin: 0;
    padding: 11px 13px;
    border-radius: 10px;
    background: rgba(23, 105, 220, 0.06);
    color: var(--primary-text);
    font-size: 12.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.feedback-detail-attachments[b-golkq7wvcf] {
    display: grid;
    gap: 8px;
}

.feedback-detail-attachments-heading[b-golkq7wvcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.feedback-detail-attachments-heading span[b-golkq7wvcf] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.feedback-detail-attachments-heading strong[b-golkq7wvcf] {
    display: grid;
    min-width: 22px;
    height: 22px;
    place-items: center;
    border-radius: 999px;
    color: #1769dc;
    background: rgba(23, 105, 220, .10);
    font-size: 10px;
}

.feedback-attachment-state[b-golkq7wvcf] {
    padding: 12px;
    border-radius: 9px;
    color: var(--secondary-text);
    background: rgba(23, 105, 220, .06);
    font-size: 11px;
    text-align: center;
}

.feedback-attachment-state.error[b-golkq7wvcf] {
    color: #9c2f18;
    background: rgba(226, 84, 59, .10);
}

.feedback-admin-attachment-grid[b-golkq7wvcf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.feedback-admin-attachment[b-golkq7wvcf] {
    display: grid;
    min-width: 0;
    gap: 6px;
    padding: 6px;
    border: 1px solid rgba(23, 105, 220, .16);
    border-radius: 10px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background, #ffffff) 94%, #1769dc 6%);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

.feedback-admin-attachment:hover[b-golkq7wvcf] {
    transform: translateY(-1px);
    border-color: rgba(23, 105, 220, .44);
    box-shadow: 0 8px 18px rgba(23, 105, 220, .12);
}

.feedback-admin-attachment img[b-golkq7wvcf] {
    display: block;
    width: 100%;
    height: 78px;
    border-radius: 7px;
    background: rgba(10, 24, 46, .08);
    object-fit: cover;
}

.feedback-admin-attachment > span[b-golkq7wvcf] {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.feedback-admin-attachment strong[b-golkq7wvcf] {
    overflow: hidden;
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-admin-attachment small[b-golkq7wvcf] {
    color: var(--secondary-text);
    font-size: 9.5px;
}

.feedback-viewer-backdrop[b-golkq7wvcf] {
    position: fixed;
    z-index: 4500;
    inset: 0;
    background: rgba(4, 12, 26, .78);
    backdrop-filter: blur(10px) saturate(.82);
}

.feedback-image-viewer[b-golkq7wvcf] {
    position: fixed;
    z-index: 4510;
    top: 50%;
    left: 50%;
    display: grid;
    width: min(1080px, 94vw);
    max-height: 92vh;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(132, 190, 255, .24);
    border-radius: 18px;
    color: #edf5ff;
    background: #091426;
    box-shadow: 0 34px 100px rgba(0, 0, 0, .58);
}

.feedback-image-viewer > header[b-golkq7wvcf],
.feedback-image-viewer > footer[b-golkq7wvcf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    background: linear-gradient(135deg, rgba(23, 105, 220, .17), rgba(88, 172, 192, .09));
}

.feedback-image-viewer > header[b-golkq7wvcf] {
    border-bottom: 1px solid rgba(132, 190, 255, .16);
}

.feedback-image-viewer > header div[b-golkq7wvcf] {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.feedback-image-viewer > header strong[b-golkq7wvcf] {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-image-viewer > header span[b-golkq7wvcf],
.feedback-image-viewer > footer span[b-golkq7wvcf] {
    color: #aabbd0;
    font-size: 10.5px;
}

.feedback-image-viewer > header button[b-golkq7wvcf] {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 0;
    border-radius: 9px;
    color: #dbeaff;
    background: rgba(255, 255, 255, .06);
    font-size: 22px;
    cursor: pointer;
}

.feedback-image-viewer > header button:hover[b-golkq7wvcf] {
    background: rgba(255, 255, 255, .13);
}

.feedback-viewer-canvas[b-golkq7wvcf] {
    position: relative;
    display: grid;
    min-height: 260px;
    place-items: center;
    padding: 14px 58px;
    overflow: auto;
    background:
        radial-gradient(circle at 50% 45%, rgba(38, 75, 122, .34), transparent 52%),
        #050c18;
}

.feedback-viewer-canvas > img[b-golkq7wvcf] {
    display: block;
    max-width: 100%;
    max-height: 70vh;
    border-radius: 8px;
    box-shadow: 0 18px 54px rgba(0, 0, 0, .5);
    object-fit: contain;
}

.feedback-viewer-navigation[b-golkq7wvcf] {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 40px;
    height: 52px;
    transform: translateY(-50%);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 12px;
    color: #ffffff;
    background: rgba(14, 36, 66, .82);
    font-size: 30px;
    cursor: pointer;
}

.feedback-viewer-navigation:hover[b-golkq7wvcf] {
    background: rgba(23, 105, 220, .86);
}

.feedback-viewer-navigation.previous[b-golkq7wvcf] {
    left: 10px;
}

.feedback-viewer-navigation.next[b-golkq7wvcf] {
    right: 10px;
}

.feedback-image-viewer > footer[b-golkq7wvcf] {
    border-top: 1px solid rgba(132, 190, 255, .16);
}

.feedback-image-viewer > footer a[b-golkq7wvcf] {
    padding: 8px 12px;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd, #1769dc 58%, #58acc0);
    font-size: 10.5px;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 620px) {
    .feedback-admin-attachment-grid[b-golkq7wvcf] {
        grid-template-columns: 1fr;
    }

    .feedback-viewer-canvas[b-golkq7wvcf] {
        padding-inline: 48px;
    }
}

.feedback-detail-actions textarea[b-golkq7wvcf] {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(23, 105, 220, 0.2);
    border-radius: 9px;
    background: var(--panel-background, #ffffff);
    color: var(--primary-text);
    font-size: 12px;
    font-family: inherit;
    resize: vertical;
}

.feedback-detail-buttons[b-golkq7wvcf] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.feedback-status-button[b-golkq7wvcf] {
    padding: 8px 14px;
    border: 1px solid rgba(23, 105, 220, 0.22);
    border-radius: 9px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 11.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.feedback-status-button:hover:not(:disabled)[b-golkq7wvcf] {
    background: rgba(23, 105, 220, 0.08);
    color: var(--primary-text);
}

.feedback-status-button:disabled[b-golkq7wvcf] {
    opacity: 0.5;
    cursor: default;
}

.feedback-status-button.target-resolved:hover:not(:disabled)[b-golkq7wvcf] {
    color: #1f7a53;
    background: rgba(47, 158, 110, 0.11);
}

.feedback-saved-note[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(217, 155, 35, 0.09);
}

.feedback-saved-note span[b-golkq7wvcf] {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: #8a4a0d;
    text-transform: uppercase;
}

.feedback-saved-note p[b-golkq7wvcf] {
    margin: 0;
    font-size: 12px;
    color: var(--primary-text);
    white-space: pre-wrap;
}

.feedback-delete-section[b-golkq7wvcf] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, #d84c60 24%, var(--border-color) 76%);
}

.feedback-delete-button[b-golkq7wvcf] {
    display: inline-flex;
    width: 100%;
    min-height: 38px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(200, 42, 62, 0.48);
    border-radius: 10px;
    color: #b52337;
    background: color-mix(in srgb, #e33b51 8%, var(--panel-background) 92%);
    font: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.feedback-delete-button:hover:not(:disabled)[b-golkq7wvcf] {
    transform: translateY(-1px);
    color: #ffffff;
    background: linear-gradient(135deg, #e34a5d, #b61f34);
    box-shadow: 0 8px 18px rgba(181, 31, 52, 0.24);
}

.feedback-delete-button:disabled[b-golkq7wvcf] {
    opacity: 0.55;
    cursor: not-allowed;
}

.feedback-delete-button > span:first-child[b-golkq7wvcf] {
    font-size: 18px;
    line-height: 1;
}

.feedback-delete-confirmation[b-golkq7wvcf] {
    padding: 12px;
    border: 1px solid rgba(200, 42, 62, 0.45);
    border-radius: 11px;
    background: color-mix(in srgb, #e33b51 9%, var(--panel-background) 91%);
}

.feedback-delete-confirmation strong[b-golkq7wvcf] {
    color: #b52337;
    font-size: 12px;
}

.feedback-delete-confirmation p[b-golkq7wvcf] {
    margin: 5px 0 10px;
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.4;
}

.feedback-delete-confirmation > div[b-golkq7wvcf] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.feedback-delete-confirmation button[b-golkq7wvcf] {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 8px;
    font: inherit;
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.feedback-delete-confirmation button:disabled[b-golkq7wvcf] {
    opacity: 0.6;
    cursor: not-allowed;
}

.feedback-delete-confirmation .confirm[b-golkq7wvcf] {
    border: 1px solid #b61f34;
    color: #ffffff;
    background: linear-gradient(135deg, #e34a5d, #b61f34);
}

.feedback-delete-confirmation .cancel[b-golkq7wvcf] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--panel-background);
}

.feedback-delete-error[b-golkq7wvcf] {
    margin: 0;
    padding: 8px 10px;
    border-radius: 8px;
    color: #a61f32;
    background: rgba(227, 59, 81, 0.10);
    font-size: 11px;
}
/* /Components/Pages/Home.razor.rz.scp.css */
.manning-page[b-7ov57acdan] {
    --manning-rail-top-offset: 124px;
    --manning-rail-width: clamp(300px, 23vw, 408px);
    /* Frozen-header tuning. If the toolbar/header sits a little too high or
       low when scrolling, adjust these numbers only.
       --manning-sticky-top   : how far below the pinned toolbar the grid pins
                                 (slightly less than the toolbar height so the
                                 grid tucks under it and leaves no gap).
       --manning-grid-offset  : vertical space reserved above the grid.
       --manning-board-clearance : space kept clear at the bottom for the
                                 Status board (its collapsed handle, or its
                                 expanded height when open). */
    --manning-sticky-top: 42px;
    --manning-table-sticky-top: -14px;
    --manning-grid-offset: 132px;
    --manning-board-clearance: 62px;
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.manning-page.has-rail[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--manning-rail-width);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 6px 14px;
    align-items: start;
}

.manning-page.has-rail .manning-navigation-row[b-7ov57acdan] {
    grid-column: 1 / -1;
    grid-row: 1;
}

.manning-page.has-rail .manning-main-column[b-7ov57acdan] {
    grid-column: 1;
    grid-row: 2;
}

.manning-page.has-rail .available-rail[b-7ov57acdan] {
    grid-column: 2;
    grid-row: 2;
}

.manning-page.has-rail .manning-right-column[b-7ov57acdan] {
    grid-column: 2;
    grid-row: 2;
    position: sticky;
    top: 0;
    z-index: 130;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: calc(100vh - 130px);
}

.manning-page.has-rail .manning-right-column .available-rail[b-7ov57acdan] {
    position: static;
    max-height: 52vh;
}

.manning-page.has-rail .manning-right-column .available-rail-body[b-7ov57acdan] {
    max-height: 34vh;
}

.manning-main-column[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

/* Professional first-load skeleton and non-destructive week refresh. */
.manning-initial-loading[b-7ov57acdan] {
    display: flex;
    min-height: min(620px, calc(100vh - 180px));
    flex-direction: column;
    gap: 18px;
    padding: 28px;
    border: 1px solid color-mix(in srgb, #1769dc 16%, var(--border-color) 84%);
    border-radius: 16px;
    background: color-mix(in srgb, var(--panel-background) 96%, #dcecff 4%);
    box-shadow: 0 14px 34px color-mix(in srgb, var(--shadow-color) 78%, transparent 22%);
    overflow: hidden;
}

.manning-loading-heading[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.manning-loading-heading > div[b-7ov57acdan],
.manning-reload-indicator > div[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.manning-loading-heading strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 850;
}

.manning-loading-heading span:not(.manning-loading-spinner)[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11.5px;
}

.manning-loading-spinner[b-7ov57acdan] {
    display: inline-block;
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    border: 3px solid color-mix(in srgb, #1769dc 20%, transparent 80%);
    border-top-color: #1769dc;
    border-radius: 50%;
    animation: manningLoadingSpin-b-7ov57acdan 720ms linear infinite;
}

.manning-loading-layout[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
    gap: 18px;
}

.manning-loading-grid[b-7ov57acdan],
.manning-loading-rail[b-7ov57acdan] {
    display: grid;
    gap: 9px;
}

.manning-loading-grid[b-7ov57acdan] {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.manning-loading-grid span[b-7ov57acdan],
.manning-loading-rail span[b-7ov57acdan] {
    position: relative;
    min-height: 42px;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent 24%);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 84%, #cfe2f8 16%);
    overflow: hidden;
}

.manning-loading-grid span[b-7ov57acdan]::after,
.manning-loading-rail span[b-7ov57acdan]::after {
    position: absolute;
    inset: 0;
    content: "";
    transform: translateX(-105%);
    background: linear-gradient(
        100deg,
        transparent 20%,
        rgba(255, 255, 255, 0.66) 48%,
        transparent 76%);
    animation: manningLoadingShimmer-b-7ov57acdan 1450ms ease-in-out infinite;
}

.manning-loading-grid .wide[b-7ov57acdan] {
    grid-column: 1 / -1;
    min-height: 48px;
}

.manning-loading-rail span:first-child[b-7ov57acdan] {
    min-height: 70px;
}

.manning-loading-rail span:nth-child(n + 2)[b-7ov57acdan] {
    min-height: 58px;
}

.manning-page.is-reloading[b-7ov57acdan]::after {
    position: absolute;
    inset: 0;
    z-index: 175;
    content: "";
    border-radius: 12px;
    background: color-mix(in srgb, var(--page-background, #f4f7fb) 36%, transparent 64%);
    backdrop-filter: saturate(72%);
    cursor: wait;
    opacity: 0;
    animation: manningReloadBackdropIn-b-7ov57acdan 120ms ease 120ms forwards;
}

.manning-reload-indicator[b-7ov57acdan] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 190;
    display: flex;
    min-width: 240px;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border: 1px solid color-mix(in srgb, #1769dc 28%, var(--border-color) 72%);
    border-radius: 14px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 96%, #dcecff 4%);
    box-shadow: 0 20px 52px rgba(10, 32, 68, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.72);
    transform: translate(-50%, -50%);
    animation: manningReloadIndicatorIn-b-7ov57acdan 160ms ease 180ms both;
}

.manning-reload-indicator strong[b-7ov57acdan] {
    font-size: 12.5px;
    font-weight: 850;
}

.manning-reload-indicator small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 650;
}

.absence-board.is-reloading[b-7ov57acdan] {
    pointer-events: none;
    filter: saturate(72%);
    opacity: 0.72;
}

@keyframes manningLoadingSpin-b-7ov57acdan {
    to { transform: rotate(360deg); }
}

@keyframes manningLoadingShimmer-b-7ov57acdan {
    55%, 100% { transform: translateX(105%); }
}

@keyframes manningReloadIndicatorIn-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% + 8px)) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes manningReloadBackdropIn-b-7ov57acdan {
    to { opacity: 1; }
}

@media (max-width: 820px) {
    .manning-loading-layout[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }

    .manning-loading-rail[b-7ov57acdan] {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-loading-spinner[b-7ov57acdan],
    .manning-loading-grid span[b-7ov57acdan]::after,
    .manning-loading-rail span[b-7ov57acdan]::after,
    .manning-reload-indicator[b-7ov57acdan],
    .manning-page.is-reloading[b-7ov57acdan]::after {
        animation: none;
        opacity: 1;
    }
}

/* Undo restoration runs only after the database refresh. Its motion is the
   existing manningGhostBurn sequence played in visual reverse. */
.manning-assignment-cell.undo-restoring[b-7ov57acdan],
.day-assignment-cell.undo-restoring[b-7ov57acdan],
.sb-entry.undo-restoring[b-7ov57acdan],
.acp-row.undo-restoring[b-7ov57acdan] {
    --undo-restored-outline: rgba(53, 201, 154, 0.62);
    transform-origin: center;
    will-change: transform, opacity, filter;
    animation: manningUndoRestore-b-7ov57acdan 360ms cubic-bezier(0.35, 0, 0.5, 1) both;
}

@keyframes manningUndoRestore-b-7ov57acdan {
    0% {
        opacity: 0;
        transform: scale(0.86) scaleY(0.5) translateY(10px);
        filter: brightness(0.7) saturate(0) blur(4px);
    }

    54% {
        opacity: 0.85;
        transform: scale(0.99) translateY(1px);
        filter: brightness(0.92) saturate(0.35) blur(0.6px);
    }

    82% {
        opacity: 1;
        transform: scale(1.045) translateY(-2px);
        box-shadow:
            inset 0 0 0 2px rgba(216, 76, 95, 0.9),
            0 10px 26px rgba(216, 76, 95, 0.35);
        filter: brightness(1.12) saturate(1.15);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        box-shadow:
            inset 0 0 0 2px var(--undo-restored-outline),
            0 8px 20px rgba(23, 105, 220, 0.18);
        filter: none;
    }
}

.theme-dark .manning-assignment-cell.undo-restoring[b-7ov57acdan],
.theme-dark .day-assignment-cell.undo-restoring[b-7ov57acdan],
.theme-dark .sb-entry.undo-restoring[b-7ov57acdan],
.theme-dark .acp-row.undo-restoring[b-7ov57acdan] {
    --undo-restored-outline: rgba(88, 209, 228, 0.72);
}

@media (prefers-reduced-motion: reduce) {
    .manning-assignment-cell.undo-restoring[b-7ov57acdan],
    .day-assignment-cell.undo-restoring[b-7ov57acdan],
    .sb-entry.undo-restoring[b-7ov57acdan],
    .acp-row.undo-restoring[b-7ov57acdan] {
        animation: none;
        box-shadow: inset 0 0 0 2px var(--undo-restored-outline);
    }
}

.available-rail[b-7ov57acdan] {
    position: sticky;
    top: 0;
    display: flex;
    max-height: calc(100vh - 130px);
    flex-direction: column;
    border: 0.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 10px 26px var(--shadow-color);
    overflow: hidden;
    animation: manning-slide-in-b-7ov57acdan 240ms ease both;
}

.available-rail-header[b-7ov57acdan] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 14px 8px;
    border-bottom: 0.5px solid var(--border-color);
}

.available-rail-eyebrow[b-7ov57acdan] {
    color: #1769dc;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.available-rail-title h2[b-7ov57acdan] {
    margin: 2px 0 0;
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 800;
}

.available-rail-close[b-7ov57acdan] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.available-rail-close:hover[b-7ov57acdan] {
    border-color: #d84c5f;
    color: #d84c5f;
    background: var(--button-hover);
}

.available-rail-tabs[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding: 10px 12px 0;
}

.available-rail-tab[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 30px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease;
}

.available-rail-tab:hover[b-7ov57acdan] {
    border-color: #1769dc;
    color: #1769dc;
    background: var(--button-hover);
}

.available-rail-tab:active[b-7ov57acdan] {
    transform: translateY(1px) scale(0.985);
}

.available-rail-tab.active[b-7ov57acdan] {
    border-color: transparent;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22);
}

.available-rail-tab-count[b-7ov57acdan] {
    min-width: 18px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--fill-control, rgba(148, 163, 184, 0.22));
    color: inherit;
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
}

.available-rail-tab.active .available-rail-tab-count[b-7ov57acdan] {
    background: rgba(255, 255, 255, 0.24);
}

.available-rail-hint[b-7ov57acdan] {
    margin: 8px 12px 0;
    padding: 7px 10px;
    border: 1px solid #e3c85f;
    border-radius: 8px;
    color: #6d5a10;
    background: #fff6d6;
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.35;
}

.available-rail-search[b-7ov57acdan] {
    padding: 10px 12px 0;
}

.available-rail-search input[b-7ov57acdan] {
    width: 100%;
    min-height: 32px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.available-rail-search input:focus[b-7ov57acdan] {
    border-color: #1769dc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.14);
}

.available-rail-body[b-7ov57acdan] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color 200ms ease;
}

.available-rail-body:hover[b-7ov57acdan] {
    scrollbar-color: rgba(148, 163, 184, 0.4) transparent;
}

.available-rail-body[b-7ov57acdan]::-webkit-scrollbar {
    width: 7px;
}

.available-rail-body[b-7ov57acdan]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background-color: transparent;
    background-clip: padding-box;
    transition: background-color 200ms ease;
}

.available-rail-body:hover[b-7ov57acdan]::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.4);
}

.available-rail-count[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.available-rail-count strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 17px;
    font-weight: 800;
}

.available-rail-count span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.available-rail-empty[b-7ov57acdan] {
    padding: 20px 12px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--secondary-text);
    font-size: 11.5px;
    font-weight: 600;
    text-align: center;
}

.available-day-flags[b-7ov57acdan] {
    display: flex;
    gap: 3px;
    margin-top: 3px;
}

.available-day-flag[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
}

.available-day-flag.free[b-7ov57acdan] {
    border-color: #35c99a;
    color: #1d9d76;
    background: color-mix(in srgb, #35c99a 22%, var(--panel-background) 78%);
}

.available-day-flag.busy[b-7ov57acdan] {
    border-color: var(--border-color);
    color: var(--secondary-text);
    background: var(--fill-control, rgba(148, 163, 184, 0.14));
    opacity: 0.75;
}

.available-rail-footer[b-7ov57acdan] {
    padding: 9px 14px 12px;
    border-top: 0.5px solid var(--border-color);
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
}

.available-pulse-dot[b-7ov57acdan] {
    width: 8px;
    height: 8px;
    margin-left: 2px;
    border-radius: 50%;
    background: #35c99a;
    animation: available-pulse-b-7ov57acdan 1.4s ease-in-out infinite;
}

@keyframes available-pulse-b-7ov57acdan {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(53, 201, 154, 0.5);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(53, 201, 154, 0);
    }
}

@media (max-width: 1360px) {
    .manning-page.has-rail[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto auto auto;
    }

    .manning-page.has-rail .manning-main-column[b-7ov57acdan] {
        grid-column: 1;
        grid-row: 2;
    }

    .manning-page.has-rail .manning-right-column[b-7ov57acdan] {
        position: static;
        grid-column: 1;
        grid-row: 3;
        width: 100%;
        max-height: none;
    }

    .manning-page.has-rail .manning-right-column .available-rail[b-7ov57acdan] {
        position: static;
        width: 100%;
        max-height: 460px;
    }
}

.manning-view-toolbar[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    min-height: 26px;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.reset-layout-button[b-7ov57acdan] {
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.reset-layout-button:hover:not(:disabled)[b-7ov57acdan] {
    border-color: #1769dc;
    color: #1769dc;
    background: var(--button-hover);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.10);
}

.reset-layout-button:active:not(:disabled)[b-7ov57acdan] {
    transform: translateY(1px) scale(0.985);
}

.reset-layout-button:disabled[b-7ov57acdan] {
    cursor: wait;
    opacity: 0.62;
}

.view-label[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.view-toggle[b-7ov57acdan] {
    position: relative;
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(58px, 1fr));
    gap: 0;
    min-width: 118px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-background);
    box-shadow: 0 4px 12px var(--shadow-color);
}

.view-toggle-thumb[b-7ov57acdan] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 8px;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22), 0 0 0 1px rgba(255,255,255,0.12) inset;
    transition: transform 220ms ease, box-shadow 220ms ease;
    pointer-events: none;
}

.view-toggle.day-mode .view-toggle-thumb[b-7ov57acdan] {
    transform: translateX(100%);
}

.view-toggle-button[b-7ov57acdan] {
    position: relative;
    z-index: 1;
    min-width: 56px;
    min-height: 30px;
    padding: 0 12px;
    border: 0;
    border-radius: 8px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: color 160ms ease, transform 120ms ease;
}

    .view-toggle-button:hover[b-7ov57acdan] {
        color: var(--primary-text);
    }

    .view-toggle-button:active[b-7ov57acdan] {
        transform: translateY(1px) scale(0.97);
    }

    .view-toggle-button.active[b-7ov57acdan] {
        color: #ffffff;
        text-shadow: 0 1px 10px rgba(16, 42, 96, 0.28);
    }

.area-tabs[b-7ov57acdan] {
    display: flex;
    width: min(100%, 800px);
    min-width: 0;
    align-self: flex-start;
    gap: 4px;
    overflow-x: auto;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--panel-background);
    box-shadow: 0 3px 10px var(--shadow-color);
}

.area-tab[b-7ov57acdan] {
    min-width: 134px;
    min-height: 38px;
    flex: 1 0 134px;
    padding: 9px 14px 3px;
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 7px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.05px;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color 140ms ease,
        background 140ms ease,
        box-shadow 140ms ease,
        transform 140ms ease;
}

.area-tab-label[b-7ov57acdan] {
    position: relative;
    z-index: 2;
    display: block;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-tab-shortcut[b-7ov57acdan] {
    position: absolute;
    top: 3px;
    left: 6px;
    z-index: 2;
    display: inline-flex;
    min-width: 21px;
    height: 14px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, currentColor 78%, var(--secondary-text) 22%);
    background: color-mix(in srgb, var(--panel-background) 82%, transparent);
    font-size: 8px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
}

.manning-page.agency-mode .area-tab-shortcut[b-7ov57acdan] {
    right: 6px;
    left: auto;
}

.manning-page.agency-mode .area-tab.has-pending-agency-tbc[b-7ov57acdan] {
    color: #684616;
    outline: 1px solid rgba(234, 179, 8, 0.62);
    outline-offset: -1px;
    background: linear-gradient(135deg, #fffdf5 0%, #fff7d6 62%, #ffefad 100%);
    box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.30) inset,
        0 5px 12px rgba(202, 138, 4, 0.12);
    animation: pendingAgencyTbcBorderPulse-b-7ov57acdan 1.75s ease-in-out infinite;
}

.manning-page.agency-mode .area-tab.has-pending-agency-tbc[b-7ov57acdan]::after {
    position: absolute;
    right: 8px;
    bottom: 6px;
    z-index: 3;
    width: 7px;
    height: 7px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.48);
    content: "";
    pointer-events: none;
    animation: pendingAgencyTbcBeacon-b-7ov57acdan 1.35s ease-out infinite;
}

.manning-page.agency-mode .area-tab.has-pending-agency-tbc .area-tab-shortcut[b-7ov57acdan] {
    color: #713f12;
    border-color: rgba(146, 83, 0, 0.34);
    background: rgba(255, 255, 255, 0.66);
}

.manning-page.agency-mode .area-tab.has-pending-agency-tbc.active[b-7ov57acdan] {
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow:
        0 0 0 1px rgba(250, 204, 21, 0.74) inset,
        0 7px 18px rgba(23, 105, 220, 0.24);
}

.manning-page.agency-mode .area-tab.has-pending-agency-tbc.active[b-7ov57acdan]::after {
    background: #facc15;
    box-shadow: 0 0 0 0 rgba(250, 204, 21, 0.58);
}

.manning-page.agency-mode .area-tab.has-pending-agency-tbc.active .area-tab-shortcut[b-7ov57acdan] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(120, 53, 15, 0.24);
}

@keyframes pendingAgencyTbcBorderPulse-b-7ov57acdan {
    0%, 100% {
        outline-color: rgba(234, 179, 8, 0.52);
        outline-width: 1px;
    }

    50% {
        outline-color: rgba(245, 158, 11, 0.96);
        outline-width: 2px;
    }
}

@keyframes pendingAgencyTbcBeacon-b-7ov57acdan {
    0% {
        transform: scale(0.88);
        box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.54);
    }

    72%, 100% {
        transform: scale(1.08);
        box-shadow: 0 0 0 7px rgba(245, 158, 11, 0);
    }
}

.area-tab.active .area-tab-shortcut[b-7ov57acdan] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.42);
    background: rgba(255, 255, 255, 0.18);
}

    .area-tab:hover[b-7ov57acdan] {
        color: var(--primary-text);
        background: linear-gradient(135deg, rgba(23, 105, 220, 0.10) 0%, rgba(88, 172, 192, 0.12) 100%);
        box-shadow: 0 8px 18px rgba(23, 105, 220, 0.12);
        transform: translateY(-1px);
    }

    .area-tab:active[b-7ov57acdan] {
        transform: translateY(1px) scale(0.985);
    }

    .area-tab.active[b-7ov57acdan] {
        color: #ffffff;
        background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
        box-shadow: 0 10px 22px rgba(23, 105, 220, 0.22), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    }

    .area-tab.active[b-7ov57acdan]::before {
        position: absolute;
        inset: 1px;
        border-radius: 6px;
        background: linear-gradient(115deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.14) 42%, rgba(255,255,255,0) 66%);
        background-size: 220% 100%;
        content: "";
        pointer-events: none;
        animation: areaTabSheen-b-7ov57acdan 5.8s ease-in-out infinite;
    }

.manning-workspace[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-background);
    box-shadow: 0 3px 10px var(--shadow-color);
}

/* Week grid: let the page scroll naturally; only the table header row stays
   sticky while the Site tabs scroll away above it. */
.manning-workspace:not(.day-workspace)[b-7ov57acdan] {
    position: relative;
    top: auto;
    max-height: none;
    overflow: visible;
}

/* Status board is fixed to the bottom of the screen, so keep scroll clearance
   when it is opened. */
.manning-page.board-open[b-7ov57acdan] {
    --manning-board-clearance: calc(46vh + 34px);
}

.manning-page.board-open .manning-workspace:not(.day-workspace)[b-7ov57acdan] {
    max-height: none;
}

.manning-table-container[b-7ov57acdan] {
    min-width: 0;
    max-height: none;
    overflow: visible;
    overscroll-behavior: auto;
    /* No internal scrolling here: the page scrolls naturally while the table
       header remains sticky and the fixed Status board uses page clearance. */
    padding: 0 3px;
}

.manning-table[b-7ov57acdan] {
    --line-column-width: 82px;
    --shift-column-width: 98px;
    --site-column-width: 48px;
    --position-column-width: 128px;
    --day-column-width: 188px;
    width: 100%;
    min-width: 0;
    table-layout: fixed;
    border-collapse: collapse;
    color: var(--primary-text);
    background: var(--panel-background);
}

.line-column[b-7ov57acdan] {
    width: var(--line-column-width);
}

.shift-column[b-7ov57acdan] {
    width: var(--shift-column-width);
}

.site-column[b-7ov57acdan] {
    width: var(--site-column-width);
}

.position-column[b-7ov57acdan] {
    width: var(--position-column-width);
}

.day-column[b-7ov57acdan] {
    width: auto;
}

.manning-table th[b-7ov57acdan],
.manning-table td[b-7ov57acdan] {
    padding: 0 3px;
    vertical-align: middle;
    border: 1px solid var(--border-color);
}

.manning-table thead th[b-7ov57acdan] {
    position: sticky;
    top: var(--manning-table-sticky-top);
    z-index: 80;
    height: 34px;
    color: var(--primary-text);
    background: var(--button-hover);
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    box-shadow: inset 0 -1px 0 var(--border-color);
}


.manning-table tbody td[b-7ov57acdan] {
    height: 28px;
}

.resizable-column-header[b-7ov57acdan] {
    position: relative;
}

.column-resize-handle[b-7ov57acdan] {
    position: absolute;
    top: 0;
    right: -8px;
    z-index: 4;
    display: block;
    width: 16px;
    height: 100%;
    cursor: col-resize;
    touch-action: none;
    user-select: none;
}

.column-resize-handle[b-7ov57acdan]::after {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 16px;
    height: 22px;
    place-items: center;
    transform: translate(-50%, -50%);
    border: 1px solid color-mix(in srgb, #1769dc 55%, var(--border-color) 45%);
    border-radius: 5px;
    color: #1769dc;
    background: var(--panel-background);
    box-shadow: 0 1px 4px var(--shadow-color);
    content: "↔";
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    transition: border-color 120ms ease, color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.column-resize-handle:hover[b-7ov57acdan]::after,
.column-resize-handle:focus-visible[b-7ov57acdan]::after,
.column-resize-handle.active[b-7ov57acdan]::after {
    transform: translate(-50%, -50%) scale(1.08);
    border-color: #1769dc;
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.16);
}

.column-resize-handle:focus-visible[b-7ov57acdan] {
    outline: none;
}

.day-name[b-7ov57acdan] {
    display: block;
    font-size: 14.5px;
    font-weight: 700;
}

.manning-table thead small[b-7ov57acdan] {
    display: block;
    margin-top: 2px;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 650;
}

.manning-table thead th[data-day-index][b-7ov57acdan] {
    white-space: nowrap;
}

.manning-table thead th[data-day-index] .day-name[b-7ov57acdan],
.manning-table thead th[data-day-index] small[b-7ov57acdan] {
    display: inline-block;
    margin-top: 0;
    vertical-align: baseline;
}

.manning-table thead th[data-day-index] .day-name[b-7ov57acdan] {
    font-size: 11.5px;
    font-weight: 600;
}

.manning-table thead th[data-day-index] small[b-7ov57acdan] {
    margin-left: 5px;
}

.line-group-start td[b-7ov57acdan] {
    border-top: 2px solid #1769dc;
}

.line-cell[b-7ov57acdan] {
    vertical-align: top !important;
    color: var(--primary-text);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--panel-background) 76%, #1769dc 24%) 0%, color-mix(in srgb, var(--panel-background) 82%, #5faebd 18%) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 -1px 0 rgba(23, 105, 220, 0.08), 0 0 0 1px rgba(23, 105, 220, 0.05), 0 10px 18px rgba(23, 105, 220, 0.05);
    text-align: center;
}

    .line-cell strong[b-7ov57acdan],
    .line-cell span[b-7ov57acdan] {
        display: block;
    }

    .line-cell strong[b-7ov57acdan] {
        margin-top: 2px;
        color: var(--primary-text);
        font-size: 12px;
        font-weight: 700;
    }

    .line-cell span[b-7ov57acdan] {
        margin-top: 1px;
        color: var(--secondary-text);
        font-size: 10px;
        font-weight: 650;
    }

.shift-cell[b-7ov57acdan],
.site-cell[b-7ov57acdan] {
    color: var(--primary-text);
    background: var(--panel-background);
    text-align: center;
}

    .shift-cell strong[b-7ov57acdan] {
        font-size: 11.5px;
        font-weight: 700;
    }

    .site-cell strong[b-7ov57acdan] {
        font-size: 11.5px;
        font-weight: 700;
    }

.position-cell[b-7ov57acdan] {
    color: var(--primary-text);
    background: var(--panel-background);
    font-size: 11.5px;
    font-weight: 650;
    white-space: nowrap;
}

.assignment[b-7ov57acdan],
.empty-assignment[b-7ov57acdan] {
    box-sizing: border-box;
    width: 100%;
    height: 30px;
    min-height: 26px;
    margin: 0;
    padding: 0 5px;
    border-radius: 2px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1;
}

.assignment[b-7ov57acdan] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
}

    .assignment.permanent[b-7ov57acdan] {
        border: 0;
        color: var(--primary-text);
        background: transparent;
    }

    .assignment.agency[b-7ov57acdan] {
        --assignment-agency-colour: #f2c94c;
        padding: 0 6px;
        border: 1px solid color-mix(in srgb, var(--assignment-agency-colour) 68%, var(--border-color) 32%);
        color: var(--primary-text);
        background: color-mix(in srgb, var(--panel-background) 70%, var(--assignment-agency-colour) 30%);
        box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 68%, transparent 32%);
    }


.employee-assignment[b-7ov57acdan] {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

    .employee-assignment:hover[b-7ov57acdan] {
        box-shadow: inset 0 0 0 1px rgba(23, 105, 220, 0.45);
    }

    .employee-assignment:focus-visible[b-7ov57acdan] {
        outline: 2px solid #1769dc;
        outline-offset: 1px;
    }

    .assignment.permanent.employee-assignment.selected[b-7ov57acdan],
    .assignment.agency.employee-assignment.selected[b-7ov57acdan] {
        border: 2px solid #1769dc;
        box-shadow: 0 0 0 2px rgba(23, 105, 220, 0.16);
    }


.assignment.employee-assignment.status-holiday[b-7ov57acdan] {
    border: 1px solid #82aee6;
    color: #173d69;
    background: #dcecff;
}

.assignment.employee-assignment.status-training[b-7ov57acdan] {
    border: 1px solid #ae91db;
    color: #4d3273;
    background: #eee5fb;
}

.assignment.employee-assignment.status-sick[b-7ov57acdan] {
    border: 1px solid #df9298;
    color: #762b33;
    background: #fde5e7;
}

.assignment-hours[b-7ov57acdan] {
    overflow: hidden;
    max-width: 100%;
    color: inherit;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.05;
    opacity: 0.86;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-name[b-7ov57acdan] {
    display: block;
    width: 100%;
    min-height: 14px;
    overflow: hidden;
    padding: 1px 0;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}

.assignment.agency .employee-name[b-7ov57acdan],
.assignment.agency .assignment-hours[b-7ov57acdan] {
    width: calc(100% - 76px);
    margin-inline: auto;
    text-align: center;
}

.assignment.agency.awaiting-confirmation[b-7ov57acdan] {
    border-style: dashed;
    background-image: repeating-linear-gradient(-45deg, transparent 0, transparent 5px, rgba(255, 255, 255, 0.34) 5px, rgba(255, 255, 255, 0.34) 9px);
}

.confirmation-badge[b-7ov57acdan] {
    position: absolute;
    left: 3px;
    bottom: 1px;
    padding: 0 3px;
    border-radius: 3px;
    color: #704500;
    background: #fff3bf;
    font-size: 7px;
    font-weight: 800;
    line-height: 11px;
}

.agency-badge[b-7ov57acdan] {
    position: absolute;
    top: 50%;
    right: 4px;
    display: inline-flex;
    min-width: 26px;
    height: 15px;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    transform: translateY(-50%);
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--assignment-agency-colour, #f2c94c) 72%, var(--border-color) 28%);
    color: color-mix(in srgb, var(--primary-text) 88%, var(--assignment-agency-colour, #f2c94c) 12%);
    background: color-mix(in srgb, var(--panel-background) 38%, var(--assignment-agency-colour, #f2c94c) 62%);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.empty-assignment[b-7ov57acdan] {
    display: grid;
    place-items: center;
    padding: 0;
    appearance: none;
    border: 1px dashed var(--border-color);
    color: var(--secondary-text);
    background: transparent;
    font-size: 16px;
    font-weight: 550;
    cursor: pointer;
}

    .empty-assignment:hover[b-7ov57acdan] {
        border-color: #1769dc;
        color: #1769dc;
        background: var(--button-hover);
    }

.day-workspace[b-7ov57acdan] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    overflow: hidden;
    container-name: weekly-manning-day;
    container-type: inline-size;
}

.day-navigation[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(190px, 0.55fr) minmax(400px, 1.45fr);
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--panel-background) 94%, #1769dc 6%),
            color-mix(in srgb, var(--panel-background) 96%, #58acc0 4%));
}

.selected-day[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    text-align: left;
}

.selected-day-name[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 850;
    letter-spacing: 0.55px;
    line-height: 1.1;
    text-transform: uppercase;
}

.selected-day-context[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.25;
}

.selected-day-context strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 750;
}

.selected-day-separator[b-7ov57acdan] {
    color: color-mix(in srgb, var(--secondary-text) 65%, transparent 35%);
}

.day-tabs[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.day-tab[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 5px 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 90%, var(--border-color) 10%);
    font-family: inherit;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.day-tab:hover[b-7ov57acdan] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #1769dc 58%, var(--border-color) 42%);
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 88%, #1769dc 12%);
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.12);
}

.day-tab:active[b-7ov57acdan] {
    transform: translateY(0) scale(0.98);
}

.day-tab:focus-visible[b-7ov57acdan] {
    outline: 2px solid #1769dc;
    outline-offset: 2px;
}

.day-tab.active[b-7ov57acdan] {
    border-color: transparent;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.day-tab.is-today:not(.active)[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 56%, var(--border-color) 44%);
}

.day-tab-name[b-7ov57acdan] {
    overflow: hidden;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.45px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-tab-date[b-7ov57acdan] {
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.day-lines-grid[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns:
        repeat(auto-fit, minmax(min(100%, clamp(330px, 24cqi, 480px)), 1fr));
    grid-auto-flow: row;
    align-items: start;
    gap: 10px;
    padding: 10px;
    overflow-x: clip;
}

.day-line-card[b-7ov57acdan] {
    min-width: 0;
    width: auto;
    align-self: start;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-background);
    transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.day-line-card:hover[b-7ov57acdan] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #1769dc 42%, var(--border-color) 58%);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
}

.day-line-header[b-7ov57acdan] {
    display: grid;
    box-sizing: border-box;
    height: 76px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 32px 22px;
    align-items: center;
    column-gap: 10px;
    row-gap: 4px;
    padding: 8px 10px;
    border-bottom: 2px solid #1769dc;
    background: color-mix(in srgb, var(--panel-background) 82%, #1769dc 18%);
}

.day-line-name[b-7ov57acdan] {
    display: -webkit-box;
    min-width: 0;
    max-height: 32px;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 850;
    line-height: 1.05;
}

.day-line-meta[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
}

    .day-line-meta span[b-7ov57acdan] {
        padding: 3px 6px;
        border: 1px solid var(--border-color);
        border-radius: 4px;
        color: var(--secondary-text);
        background: var(--panel-background);
        font-size: 10.5px;
        font-weight: 750;
        white-space: nowrap;
    }

.day-line-position-count[b-7ov57acdan] {
    min-width: 0;
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-line-agency-summary[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    max-width: 100%;
    height: 22px;
    align-items: center;
    justify-self: end;
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 4px;
    overflow: hidden;
}

.day-position-list[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.day-position-row[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    min-height: 36px;
    grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.35fr);
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-top: 1px solid var(--border-color);
}

    .day-position-row:first-child[b-7ov57acdan] {
        border-top: 0;
    }

.day-position-name[b-7ov57acdan] {
    min-width: 0;
    overflow: visible;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.day-assignment-cell[b-7ov57acdan] {
    min-width: 0;
}

.day-assignment[b-7ov57acdan] {
    height: auto;
    min-height: 34px;
    border-radius: 4px;
    font-size: 12.5px;
    line-height: 1.2;
}

    .day-assignment.assignment.permanent[b-7ov57acdan] {
        border: 1px solid var(--border-color);
        background: var(--panel-background);
    }

.day-empty-assignment[b-7ov57acdan] {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 8px;
    appearance: none;
    border: 1px dashed var(--border-color);
    border-radius: 4px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
}

    .day-empty-assignment span:first-child[b-7ov57acdan] {
        font-size: 21px;
        font-weight: 400;
        line-height: 1;
    }

    .day-empty-assignment:hover[b-7ov57acdan] {
        border-color: #1769dc;
        color: #1769dc;
        background: var(--button-hover);
    }

.day-assignment .employee-name[b-7ov57acdan] {
    display: -webkit-box;
    min-height: 0;
    overflow: hidden;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: clip;
    white-space: normal;
}

.day-position-name.optional-position[b-7ov57acdan] {
    color: color-mix(in srgb, var(--primary-text) 78%, var(--secondary-text) 22%);
    font-style: italic;
}

.day-view-empty[b-7ov57acdan] {
    grid-column: 1 / -1;
}

@container weekly-manning-day (max-width: 620px) {
    .day-navigation[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
        padding: 9px;
    }

    .selected-day[b-7ov57acdan] {
        align-items: center;
        text-align: center;
    }

    .selected-day-context[b-7ov57acdan] {
        justify-content: center;
    }

    .day-tab[b-7ov57acdan] {
        min-height: 48px;
        flex-direction: column;
        gap: 1px;
        padding: 5px 3px;
    }

    .day-lines-grid[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 8px;
    }

    .day-position-row[b-7ov57acdan] {
        min-height: 44px;
        grid-template-columns: minmax(108px, 0.82fr) minmax(0, 1.18fr);
        gap: 7px;
        padding: 4px 7px;
    }

    .day-assignment[b-7ov57acdan],
    .day-empty-assignment[b-7ov57acdan] {
        min-height: 42px;
    }
}

@container weekly-manning-day (max-width: 460px) {
    .day-tabs[b-7ov57acdan] {
        gap: 3px;
    }

    .day-tab[b-7ov57acdan] {
        border-radius: 8px;
    }

    .day-tab-name[b-7ov57acdan] {
        font-size: 10px;
        letter-spacing: 0.2px;
    }

    .day-tab-date[b-7ov57acdan] {
        font-size: 12px;
    }

    .day-line-header[b-7ov57acdan] {
        height: 76px;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 6px;
        padding: 8px;
    }

    .day-line-name[b-7ov57acdan] {
        font-size: 13.5px;
    }

    .day-line-meta span[b-7ov57acdan] {
        padding: 3px 5px;
        font-size: 9.25px;
    }

    .day-line-header .day-line-agency-summary .line-agency-chip[b-7ov57acdan] {
        min-height: 20px;
        padding: 0 5px;
        font-size: 9px;
    }

    .day-position-row[b-7ov57acdan] {
        grid-template-columns: minmax(100px, 0.8fr) minmax(0, 1.2fr);
    }
}

.table-footer[b-7ov57acdan] {
    display: flex;
    min-height: 26px;
    align-items: center;
    padding: 4px 10px;
    border-top: 1px solid var(--border-color);
}

.legend[b-7ov57acdan] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.legend-item[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--secondary-text);
    font-size: 9.5px;
}

.legend-colour[b-7ov57acdan] {
    display: inline-block;
    width: 15px;
    height: 9px;
    border-radius: 2px;
}

.permanent-colour[b-7ov57acdan] {
    border: 1px solid var(--border-color);
    background: transparent;
}

.agency-colour[b-7ov57acdan] {
    border: 1px solid #e3c85f;
    background: #fff0ad;
}

.vacant-colour[b-7ov57acdan] {
    border: 1px dashed #aeb8c5;
    background: transparent;
}

.holiday-colour[b-7ov57acdan] {
    border: 1px solid #82aee6;
    background: #dcecff;
}

.training-colour[b-7ov57acdan] {
    border: 1px solid #ae91db;
    background: #eee5fb;
}

.sick-colour[b-7ov57acdan] {
    border: 1px solid #df9298;
    background: #fde5e7;
}

@media (max-width: 720px) {
    .manning-view-toolbar[b-7ov57acdan] {
        justify-content: space-between;
    }

    .area-tab[b-7ov57acdan] {
        min-width: 150px;
        min-height: 46px;
        flex-basis: 150px;
        font-size: 13px;
    }

}


.employee-panel-backdrop[b-7ov57acdan] {
    --right-rail-top-offset: var(--manning-rail-top-offset);
    position: fixed;
    top: var(--right-rail-top-offset);
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 300;
    appearance: none;
    border: 0;
    background: rgba(15, 23, 42, 0.3);
    cursor: default;
}

.employee-details-panel[b-7ov57acdan] {
    --right-rail-top-offset: var(--manning-rail-top-offset);
    --right-rail-bottom-offset: 18px;
    --right-rail-side-offset: 22px;
    --right-rail-width: var(--manning-rail-width);
    position: fixed;
    top: var(--right-rail-top-offset);
    right: var(--right-rail-side-offset);
    bottom: var(--right-rail-bottom-offset);
    z-index: 310;
    display: grid;
    width: var(--right-rail-width);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    color: var(--primary-text);
    background: var(--panel-background);
    border: 0.5px solid var(--border-color);
    border-radius: 12px;
    box-shadow: -18px 0 45px rgba(15, 23, 42, 0.18);
    animation: employee-panel-enter-b-7ov57acdan 180ms ease-out;
}

.employee-panel-header[b-7ov57acdan] {
    display: flex;
    min-height: 74px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
}

.employee-panel-title-block[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

    .employee-panel-header h2[b-7ov57acdan] {
        margin: 2px 0 0;
        color: var(--primary-text);
        font-size: 13px;
        font-weight: 650;
        line-height: 1.2;
    }

.employee-panel-eyebrow[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.employee-panel-close[b-7ov57acdan] {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 23px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
}

    .employee-panel-close:hover[b-7ov57acdan] {
        color: var(--primary-text);
        background: var(--button-hover);
    }

.employee-panel-body[b-7ov57acdan] {
    min-height: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.employee-identity[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.employee-name-row[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    max-width: 100%;
    align-items: center;
    gap: 10px;
}

.employee-initials[b-7ov57acdan] {
    display: grid;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    color: #ffffff;
    background: #2f405f;
    font-size: 16px;
    font-weight: 750;
}

.employee-name-row > strong[b-7ov57acdan] {
    min-width: 0;
    overflow: hidden;
    color: var(--primary-text);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-identity-copy[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

    .employee-identity-copy > strong[b-7ov57acdan] {
        overflow: hidden;
        color: var(--primary-text);
        font-size: 17px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.employee-badges[b-7ov57acdan] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-left: 54px;
}

.employee-selected-day-badge[b-7ov57acdan] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    justify-content: center;
    padding: 5px 11px;
    border: 1px solid color-mix(in srgb, #1769dc 34%, var(--border-color) 66%);
    border-radius: 999px;
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

.employee-type-badge[b-7ov57acdan],
.employee-status-badge[b-7ov57acdan] {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 5px;
    font-size: 8px;
    font-weight: 700;
}

.employee-type-badge.permanent[b-7ov57acdan] {
    color: var(--secondary-text);
    background: var(--button-hover);
    border: 1px solid var(--border-color);
}

.employee-type-badge.agency[b-7ov57acdan] {
    color: #5e4800;
    background: #fff0ad;
    border: 1px solid #e3c85f;
}

.employee-status-badge.status-working[b-7ov57acdan] {
    color: #ffffff;
    background: #249363;
}

.employee-status-badge.status-holiday[b-7ov57acdan] {
    color: #173d69;
    background: #dcecff;
    border: 1px solid #82aee6;
}

.employee-status-badge.status-training[b-7ov57acdan] {
    color: #4d3273;
    background: #eee5fb;
    border: 1px solid #ae91db;
}

.employee-status-badge.status-sick[b-7ov57acdan] {
    color: #762b33;
    background: #fde5e7;
    border: 1px solid #df9298;
}

.employee-summary-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    margin-top: 10px;
}

.employee-summary-card[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    padding: 7px 8px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 9px;
    background: var(--button-hover);
}

    .employee-summary-card span[b-7ov57acdan] {
        color: var(--secondary-text);
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.55px;
        text-transform: uppercase;
    }

    .employee-summary-card strong[b-7ov57acdan] {
        overflow: hidden;
        color: var(--primary-text);
        font-size: 9.5px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.employee-panel-section[b-7ov57acdan] {
    margin-top: 12px;
}

.employee-section-heading[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

    .employee-section-heading > span[b-7ov57acdan] {
        color: var(--secondary-text);
        font-size: 8px;
        font-weight: 750;
        letter-spacing: 0.65px;
        text-transform: uppercase;
    }

    .employee-section-heading small[b-7ov57acdan] {
        overflow: hidden;
        color: var(--secondary-text);
        font-size: 9px;
        font-weight: 600;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.employee-status-options[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.employee-status-options button[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    min-height: 26px;
    place-items: center;
    padding: 0 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 650;
}

.employee-status-options button[b-7ov57acdan] {
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}

    .employee-status-options button:hover[b-7ov57acdan] {
        color: var(--primary-text);
        background: var(--button-hover);
    }

    .employee-status-options button.status-working.active[b-7ov57acdan] {
        color: #ffffff;
        background: #249363;
        border-color: #249363;
    }

    .employee-status-options button.status-holiday.active[b-7ov57acdan] {
        color: #173d69;
        background: #dcecff;
        border-color: #82aee6;
    }

    .employee-status-options button.status-training.active[b-7ov57acdan] {
        color: #4d3273;
        background: #eee5fb;
        border-color: #ae91db;
    }

    .employee-status-options button.status-sick.active[b-7ov57acdan] {
        color: #762b33;
        background: #fde5e7;
        border-color: #df9298;
    }

.apply-status-week-button[b-7ov57acdan] {
    width: 100%;
    min-height: 26px;
    margin-top: 6px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 650;
    cursor: pointer;
}

    .apply-status-week-button:hover[b-7ov57acdan] {
        border-color: #1769dc;
        background: var(--button-hover);
    }

.employee-action-grid button:disabled[b-7ov57acdan] {
    opacity: 0.72;
    cursor: not-allowed;
}


.selected-assignment-card[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.15fr);
    gap: 6px;
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--button-hover);
    overflow: hidden;
}

    .selected-assignment-card > div[b-7ov57acdan] {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 4px;
    }

    .selected-assignment-card span[b-7ov57acdan] {
        color: var(--secondary-text);
        font-size: 8.5px;
        font-weight: 700;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .selected-assignment-card strong[b-7ov57acdan] {
        overflow: hidden;
        color: var(--primary-text);
        font-size: 11px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

.selected-assignment-empty[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.selected-assignment-empty span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 700;
}

.selected-assignment-empty strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 800;
    white-space: normal;
}

.employee-week-assignments[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    overflow: visible;
    border: 0;
    border-radius: 0;
}

.employee-week-item[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    min-height: 58px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--button-background);
}

    .employee-week-item.selected[b-7ov57acdan] {
        background: color-mix(in srgb, var(--panel-background) 84%, #1769dc 16%);
        box-shadow: inset 0 0 0 1px rgba(23, 105, 220, 0.42);
    }

    .employee-week-item:first-child[b-7ov57acdan] {
        border-top: 1px solid var(--border-color);
    }

.employee-week-day[b-7ov57acdan],
.employee-week-assignment[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

    .employee-week-day strong[b-7ov57acdan],
    .employee-week-assignment strong[b-7ov57acdan] {
        overflow: hidden;
        color: var(--primary-text);
        font-size: 8px;
        font-weight: 650;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .employee-week-day span[b-7ov57acdan],
    .employee-week-assignment span[b-7ov57acdan] {
        overflow: hidden;
        color: var(--secondary-text);
        font-size: 8px;
        font-weight: 500;
        text-overflow: ellipsis;
        white-space: nowrap;
    }


.employee-week-status[b-7ov57acdan] {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 5px;
    font-size: 8.5px;
    font-weight: 700;
    white-space: nowrap;
}

.employee-week-status.status-working[b-7ov57acdan] {
    color: #166543;
    background: #dcf4e9;
    border: 1px solid #86cfaf;
}

.employee-week-status.status-holiday[b-7ov57acdan] {
    color: #173d69;
    background: #dcecff;
    border: 1px solid #82aee6;
}

.employee-week-status.status-training[b-7ov57acdan] {
    color: #4d3273;
    background: #eee5fb;
    border: 1px solid #ae91db;
}

.employee-week-status.status-sick[b-7ov57acdan] {
    color: #762b33;
    background: #fde5e7;
    border: 1px solid #df9298;
}

.employee-action-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

    .employee-action-grid button[b-7ov57acdan] {
        min-height: 26px;
        padding: 0 10px;
        border: 1px solid var(--border-color);
        border-radius: 8px;
        color: var(--secondary-text);
        background: var(--button-background);
        font-family: inherit;
        font-size: 9.5px;
        font-weight: 650;
    }

    .employee-action-grid button:not(:disabled)[b-7ov57acdan] {
        color: var(--primary-text);
        cursor: pointer;
    }

    .employee-action-grid button:not(:disabled):hover[b-7ov57acdan] {
        border-color: #1769dc;
        background: var(--button-hover);
    }

    .employee-action-grid button.primary-action[b-7ov57acdan] {
        color: #ffffff;
        border-color: #1769dc;
        background: #1769dc;
    }

    .employee-action-grid button.primary-action:hover[b-7ov57acdan] {
        background: #125bbf;
    }

.hours-editor-section[b-7ov57acdan] {
    padding-top: 2px;
}

.hours-editor-card[b-7ov57acdan] {
    padding: 12px;
    border: 1px solid color-mix(in srgb, #1769dc 45%, var(--border-color));
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
}

.hours-editor-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.hours-editor-grid label[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.hours-editor-grid label > span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.hours-validation-message[b-7ov57acdan] {
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid #df9298;
    border-radius: 7px;
    color: #762b33;
    background: #fde5e7;
    font-size: 10px;
    font-weight: 600;
}

.hours-editor-actions[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 7px;
    margin-top: 11px;
}

.hours-editor-actions button[b-7ov57acdan] {
    min-height: 32px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 10px;
    font-weight: 650;
    cursor: pointer;
}

.hours-editor-actions button:hover[b-7ov57acdan] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.hours-editor-actions .hours-save-button[b-7ov57acdan] {
    color: #ffffff;
    border-color: #1769dc;
    background: #1769dc;
}

.hours-editor-actions .hours-save-button:hover[b-7ov57acdan] {
    background: #125bbf;
}

.employee-panel-footer[b-7ov57acdan] {
    display: flex;
    justify-content: flex-end;
    min-height: 70px;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid var(--border-color);
    background: var(--panel-background);
}

.employee-panel-close-button[b-7ov57acdan] {
    min-width: 92px;
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
}

    .employee-panel-close-button:hover[b-7ov57acdan] {
        background: var(--button-hover);
    }

@keyframes employee-panel-enter-b-7ov57acdan {
    from {
        transform: translateX(24px);
        opacity: 0.75;
    }

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

@media (max-width: 600px) {
    .hours-editor-actions[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }

    .employee-details-panel[b-7ov57acdan] {
        --right-rail-bottom-offset: 0;
        --right-rail-side-offset: 0;
        --right-rail-width: 100vw;
        width: 100vw;
        border-right: 0;
        border-bottom: 0;
        border-radius: 12px 0 0 0;
    }

    .employee-panel-backdrop[b-7ov57acdan] {
        display: none;
    }

    .employee-panel-body[b-7ov57acdan] {
        padding-inline: 16px;
    }

    .employee-panel-header[b-7ov57acdan],
    .employee-panel-footer[b-7ov57acdan] {
        padding-inline: 16px;
    }
}


.employee-week-assignment strong[b-7ov57acdan] {
    display: none;
}

.employee-week-status[b-7ov57acdan] {
    min-height: 18px;
    padding: 0 4px;
    font-size: 7.5px;
}

.employee-action-grid[b-7ov57acdan] {
    gap: 6px;
}

.employee-action-grid button[b-7ov57acdan] {
    min-height: 26px;
}

.hours-editor-card[b-7ov57acdan] {
    padding: 9px;
}

.hours-editor-grid[b-7ov57acdan] {
    gap: 7px;
}

.hours-editor-grid label[b-7ov57acdan] {
    gap: 4px;
}

.hours-editor-grid select[b-7ov57acdan] {
    width: 100%;
    min-height: 32px;
    padding: 0 30px 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 650;
    cursor: pointer;
}

.hours-editor-grid select:focus[b-7ov57acdan] {
    outline: 2px solid rgba(23, 105, 220, 0.22);
    border-color: #1769dc;
}

.hours-editor-actions[b-7ov57acdan] {
    gap: 6px;
    margin-top: 8px;
}

.hours-editor-actions button[b-7ov57acdan] {
    min-height: 26px;
}

.employee-panel-footer[b-7ov57acdan] {
    display: none;
}

@media (max-height: 820px) {
    .employee-panel-body[b-7ov57acdan] {
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .employee-panel-section[b-7ov57acdan] {
        margin-top: 9px;
    }

    .employee-summary-card[b-7ov57acdan] {
        min-height: 38px;
    }

    .employee-week-item[b-7ov57acdan] {
        min-height: 52px;
    }
}


.manning-navigation-row[b-7ov57acdan] {
    position: relative;
    top: auto;
    z-index: 20;
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: -12px;
    padding: 4px 0 5px;
    background: transparent;
}

.manning-navigation-row .area-tabs[b-7ov57acdan] {
    flex: 0 1 840px;
}

.manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
    min-height: 26px;
    flex: 0 1 auto;
    flex-wrap: nowrap;
}

.manning-table th[b-7ov57acdan],
.manning-table td[b-7ov57acdan] {
    height: 26px;
    padding: 0 2px;
}

.manning-table thead th[b-7ov57acdan] {
    height: 32px;
}

.assignment[b-7ov57acdan],
.empty-assignment[b-7ov57acdan] {
    height: 24px;
    min-height: 24px;
    font-size: 11.5px;
}

.assignment-hours[b-7ov57acdan] {
    font-size: 9.5px;
}

.line-cell strong[b-7ov57acdan] {
    margin-top: 1px;
    font-size: 11.5px;
}

.line-cell span[b-7ov57acdan] {
    margin-top: 1px;
    font-size: 10px;
}

.shift-cell strong[b-7ov57acdan],
.site-cell strong[b-7ov57acdan],
.position-cell[b-7ov57acdan] {
    font-size: 11.5px;
}

.agency-badge[b-7ov57acdan] {
    height: 14px;
    font-size: 7.8px;
}

@media (max-width: 1150px) {
    .employee-panel-backdrop[b-7ov57acdan],
    .employee-details-panel[b-7ov57acdan] {
        --right-rail-top-offset: 166px;
    }
}

@media (max-width: 1080px) {
    .manning-navigation-row[b-7ov57acdan] {
        align-items: stretch;
        flex-direction: column;
    }

    .manning-navigation-row .area-tabs[b-7ov57acdan] {
        width: min(100%, 800px);
        flex-basis: auto;
    }

    .manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .employee-panel-backdrop[b-7ov57acdan],
    .employee-details-panel[b-7ov57acdan] {
        --right-rail-top-offset: 156px;
    }
}


.area-tabs[b-7ov57acdan],
.view-toggle[b-7ov57acdan],
.reset-layout-button[b-7ov57acdan],
.area-tab[b-7ov57acdan],
.view-toggle-button[b-7ov57acdan] {
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease, border-color 140ms ease;
}

.area-tabs:hover[b-7ov57acdan],
.view-toggle:hover[b-7ov57acdan] {
    box-shadow: 0 8px 18px var(--shadow-color);
}

.reset-layout-button:hover:not(:disabled)[b-7ov57acdan],
.view-toggle-button:hover[b-7ov57acdan],
.area-tab:hover[b-7ov57acdan] {
    transform: translateY(-1px);
}

.area-tab.active[b-7ov57acdan] {
    animation: areaTabPulse-b-7ov57acdan 200ms ease-out;
}

@keyframes areaTabPulse-b-7ov57acdan {
    0% { transform: scale(0.992); }
    100% { transform: scale(1); }
}

@keyframes areaTabSheen-b-7ov57acdan {
    0%, 100% { background-position: -160% 0; opacity: 0; }
    18% { opacity: 1; }
    48% { background-position: 145% 0; opacity: 0; }
}

.week-button[b-7ov57acdan],
.current-week-button[b-7ov57acdan] {
    transition: background 140ms ease, color 140ms ease, border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.week-button:active[b-7ov57acdan],
.current-week-button:active[b-7ov57acdan] {
    transform: translateY(1px) scale(0.97);
}

.manning-table[b-7ov57acdan] {
    --line-column-width: 150px;
    --position-column-width: 136px;
}

.manning-table thead th.primary-column-header[b-7ov57acdan] {
    text-align: left;
}

.manning-table thead th.primary-column-header .day-name[b-7ov57acdan] {
    font-size: 11.5px;
    font-weight: 600;
}

.line-cell[b-7ov57acdan] {
    position: relative;
    padding: 6px 7px !important;
    vertical-align: top !important;
    text-align: left;
}

.line-cell.has-agencies[b-7ov57acdan] {
    padding-right: 46px !important;
    padding-bottom: 6px !important;
}

.line-cell strong[b-7ov57acdan],
.line-cell .line-shift[b-7ov57acdan],
.line-cell .line-site[b-7ov57acdan],
.line-cell .line-position-count[b-7ov57acdan] {
    display: block;
    max-width: 100%;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
}

.line-cell strong[b-7ov57acdan] {
    margin-top: 0;
    color: var(--primary-text);
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.2;
}

.line-cell .line-shift[b-7ov57acdan] {
    margin-top: 4px;
    color: color-mix(in srgb, var(--primary-text) 78%, #1769dc 22%);
    font-size: 10.5px;
    font-weight: 750;
    overflow-wrap: normal;
    white-space: nowrap;
}

.line-cell .line-site[b-7ov57acdan] {
    margin-top: 2px;
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 700;
}

.line-cell .line-position-count[b-7ov57acdan] {
    margin-top: 2px;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 650;
}

.line-cell .line-agency-summary[b-7ov57acdan] {
    position: absolute;
    top: 28px;
    right: 5px;
    bottom: auto;
    left: auto;
    display: flex;
    max-height: calc(100% - 34px);
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 3px;
    margin: 0;
    overflow: hidden;
}

.line-cell .line-agency-chip[b-7ov57acdan] {
    display: inline-flex;
    min-width: 34px;
    min-height: 15px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0 4px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--line-agency-colour, #f2c94c) 72%, #564c2e 28%);
    border-radius: 999px;
    color: #2d2a22;
    background: var(--line-agency-colour, #f2c94c);
    box-shadow: 0 2px 5px color-mix(in srgb, var(--line-agency-colour, #f2c94c) 20%, transparent 80%);
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.position-cell[b-7ov57acdan] {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.22;
    overflow-wrap: anywhere;
    text-align: left;
    white-space: normal;
    word-break: normal;
}

.manning-read-only-banner[b-7ov57acdan],
.manning-operation-error[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 9px;
    font-size: 12px;
}

.manning-read-only-banner[b-7ov57acdan] {
    border: 1px solid #a8bfdc;
    color: #2f4d72;
    background: #edf4fc;
}

.manning-operation-error[b-7ov57acdan] {
    border: 1px solid #df9298;
    color: #762b33;
    background: #fde5e7;
}

.assignment-toast[b-7ov57acdan] {
    position: fixed;
    z-index: 10000;
    top: 50%;
    left: 50%;
    display: flex;
    width: min(440px, calc(100vw - 32px));
    align-items: center;
    gap: 12px;
    border: 1px solid #e47b88;
    border-radius: 14px;
    padding: 13px 16px;
    color: #762b33;
    background: rgba(255, 242, 244, 0.97);
    box-shadow: 0 18px 45px rgba(73, 24, 32, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.7) inset;
    backdrop-filter: blur(10px);
    transform: translate(-50%, -50%);
    animation: assignment-toast-in-b-7ov57acdan 220ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.assignment-toast-icon[b-7ov57acdan] {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #d84c60;
    box-shadow: 0 5px 12px rgba(216, 76, 96, 0.28);
    font-size: 17px;
    font-weight: 900;
}

.assignment-toast.success[b-7ov57acdan] {
    border-color: #49b58c;
    color: #145b43;
    background: rgba(237, 253, 247, 0.98);
    box-shadow: 0 18px 45px rgba(20, 91, 67, 0.20), 0 0 0 1px rgba(255, 255, 255, 0.76) inset;
}

.assignment-toast.success .assignment-toast-icon[b-7ov57acdan] {
    background: #22a676;
    box-shadow: 0 5px 12px rgba(34, 166, 118, 0.28);
}

.assignment-toast > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.assignment-toast strong[b-7ov57acdan] {
    font-size: 12.5px;
    font-weight: 850;
}

.assignment-toast div span[b-7ov57acdan] {
    font-size: 11px;
    line-height: 1.35;
}

@keyframes assignment-toast-in-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translate(-50%, calc(-50% - 12px)) scale(0.97);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.manning-read-only-banner strong[b-7ov57acdan],
.manning-operation-error strong[b-7ov57acdan] {
    flex: 0 0 auto;
}

.read-only-assignment[b-7ov57acdan] {
    cursor: default;
    opacity: 0.62;
    border-style: solid;
    background: color-mix(in srgb, var(--panel-background) 80%, var(--button-hover) 20%);
}

.day-empty-assignment.read-only-assignment:hover[b-7ov57acdan],
.empty-assignment.read-only-assignment:hover[b-7ov57acdan] {
    transform: none;
    border-color: var(--border-color);
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 80%, var(--button-hover) 20%);
    box-shadow: none;
}

.employee-read-only-notice[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 22px;
    padding: 11px 12px;
    border: 1px solid #a8bfdc;
    border-radius: 9px;
    color: #2f4d72;
    background: #edf4fc;
    font-size: 11px;
}

.employee-read-only-notice strong[b-7ov57acdan] {
    font-size: 12px;
}

.employee-status-options button:disabled[b-7ov57acdan],
.apply-status-week-button:disabled[b-7ov57acdan],
.employee-action-grid button:disabled[b-7ov57acdan] {
    cursor: not-allowed;
    opacity: 0.48;
}

/* Weekly Manning selection and drag preview */
.manning-table-container[b-7ov57acdan] {
    position: relative;
}

.manning-assignment-cell[b-7ov57acdan] {
    position: relative;
}

.manning-assignment-cell.cell-selected[b-7ov57acdan],
.manning-assignment-cell.batch-cell-selected[b-7ov57acdan],
.day-assignment-cell.cell-selected[b-7ov57acdan],
.manning-assignment-cell:has(.batch-selected)[b-7ov57acdan],
.day-assignment-cell:has(.batch-selected)[b-7ov57acdan],
.manning-assignment-cell:has(.selection-preview)[b-7ov57acdan],
.day-assignment-cell:has(.selection-preview)[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 82%, #3d8bff 18%);
}

.manning-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
.manning-assignment-cell.cell-selected .empty-assignment.tbc[b-7ov57acdan],
.manning-assignment-cell.batch-cell-selected .empty-assignment[b-7ov57acdan],
.manning-assignment-cell.batch-cell-selected .empty-assignment.tbc[b-7ov57acdan],
.manning-assignment-cell.cell-selected .employee-assignment[b-7ov57acdan],
.day-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
.day-assignment-cell.cell-selected .day-empty-assignment.tbc[b-7ov57acdan],
.day-assignment-cell.cell-selected .employee-assignment[b-7ov57acdan],
.employee-assignment.batch-selected[b-7ov57acdan],
.employee-assignment.selection-preview[b-7ov57acdan],
.employee-assignment.selected[b-7ov57acdan] {
    outline: 3px solid #3d8bff;
    outline-offset: 0;
    animation: cell-select-glow-b-7ov57acdan 1.3s ease-in-out infinite;
}

@keyframes cell-select-glow-b-7ov57acdan {
    0%, 100% {
        filter: drop-shadow(0 0 3px rgba(61, 139, 255, 0.6));
    }

    50% {
        filter: drop-shadow(0 0 8px rgba(61, 139, 255, 0.95));
    }
}

.manning-assignment-cell.cell-selected[b-7ov57acdan]::before {
    display: none;
}

.manning-assignment-cell.batch-cell-selected[b-7ov57acdan] {
    z-index: 2;
    box-shadow: inset 0 0 0 2px #3d8bff;
}

.manning-cell-button.selection-preview[b-7ov57acdan] {
    outline: 3px solid #3d8bff;
    outline-offset: -2px;
    filter: brightness(1.06);
}

.tbc-required-hours[b-7ov57acdan] {
    display: block;
    margin-top: 1px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.15px;
    line-height: 1;
}

.tbc-request-layout[b-7ov57acdan] {
    display: grid;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    grid-template-columns: minmax(62px, 0.9fr) minmax(58px, 1.1fr);
    align-items: center;
    gap: 5px;
    padding: 2px 16px 2px 9px;
}

.tbc-request-core[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    gap: 1px;
    text-align: left;
}

.tbc-request-label[b-7ov57acdan] {
    overflow: hidden;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 0.3px;
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tbc-requester[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    gap: 2px;
    padding: 2px 3px 2px 7px;
    border-left: 1px solid color-mix(in srgb, currentColor 24%, transparent 76%);
    border-radius: 0 3px 3px 0;
    background: color-mix(in srgb, currentColor 4%, transparent 96%);
    line-height: 1;
    text-align: right;
}

.tbc-requester-caption[b-7ov57acdan] {
    overflow: hidden;
    font-size: 6.75px;
    font-weight: 750;
    letter-spacing: 0.25px;
    opacity: 0.72;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.tbc-requester strong[b-7ov57acdan] {
    overflow: hidden;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-empty-assignment.tbc .tbc-request-layout[b-7ov57acdan] {
    grid-template-columns: minmax(72px, 0.82fr) minmax(72px, 1.18fr);
}

.day-empty-assignment.tbc .tbc-request-label[b-7ov57acdan],
.day-empty-assignment.tbc .tbc-required-hours[b-7ov57acdan],
.day-empty-assignment.tbc .tbc-requester-caption[b-7ov57acdan],
.day-empty-assignment.tbc .tbc-requester strong[b-7ov57acdan] {
    line-height: 1;
}

.day-empty-assignment.tbc .tbc-request-label[b-7ov57acdan] {
    font-size: 10px;
    font-weight: 900;
}

.day-empty-assignment.tbc .tbc-requester strong[b-7ov57acdan] {
    font-size: 8.5px;
}

.tbc-context-menu[b-7ov57acdan] {
    position: fixed;
    z-index: 1200;
    width: 274px;
    padding: 6px;
    border: 1px solid var(--border-color, #b8c9df);
    border-radius: 12px;
    background: var(--panel-background, #fff);
    box-shadow: 0 18px 45px rgba(20, 44, 78, 0.24);
}

.tbc-context-menu button[b-7ov57acdan] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 0;
    border-radius: 8px;
    color: var(--primary-text, #17243a);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.tbc-context-menu button:hover[b-7ov57acdan] {
    background: color-mix(in srgb, #3d8bff 11%, var(--panel-background, #fff) 89%);
}

.tbc-context-menu button span:last-child[b-7ov57acdan] {
    display: grid;
    gap: 2px;
}

.tbc-context-menu small[b-7ov57acdan] {
    color: var(--secondary-text, #60728c);
    font-size: 10px;
}

.tbc-context-icon[b-7ov57acdan] {
    display: grid;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    place-items: center;
    border-radius: 9px;
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 14%, var(--panel-background, #fff) 86%);
    font-size: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .manning-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
    .manning-assignment-cell.cell-selected .employee-assignment[b-7ov57acdan],
    .employee-assignment.batch-selected[b-7ov57acdan] {
        animation: none;
    }
}

.day-assignment-cell.cell-selected[b-7ov57acdan] {
    border-radius: 7px;
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--panel-background) 84%, #cfe5ff 16%),
        color-mix(in srgb, var(--panel-background) 70%, #9fcaff 30%));
    box-shadow:
        0 0 0 1px rgba(23, 105, 220, 0.72),
        0 5px 14px rgba(23, 105, 220, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.84);
    animation: selectedCellBreathing-b-7ov57acdan 1900ms ease-in-out infinite alternate;
}

.assignment.permanent.employee-assignment.batch-selected[b-7ov57acdan],
.assignment.agency.employee-assignment.batch-selected[b-7ov57acdan] {
    z-index: 3;
    transform: translateY(-1px);
    border: 1px solid rgba(23, 105, 220, 0.88);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.34) 0%,
        rgba(117, 174, 242, 0.12) 100%);
    box-shadow:
        0 0 0 1px rgba(23, 105, 220, 0.22),
        0 5px 12px rgba(23, 105, 220, 0.17),
        inset 0 1px 0 rgba(255, 255, 255, 0.78);
    animation: selectedAssignmentBreathing-b-7ov57acdan 1900ms ease-in-out infinite alternate;
}

.assignment.permanent.employee-assignment.selection-preview[b-7ov57acdan],
.assignment.agency.employee-assignment.selection-preview[b-7ov57acdan] {
    z-index: 3;
    transform: translateY(-1px);
    border: 1px solid #3987ee;
    background-image: linear-gradient(
        180deg,
        rgba(237, 246, 255, 0.82),
        rgba(142, 194, 255, 0.34));
    box-shadow:
        0 0 0 1px rgba(23, 105, 220, 0.20),
        0 4px 10px rgba(23, 105, 220, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

@keyframes selectedCellBreathing-b-7ov57acdan {
    from {
        filter: brightness(1);
        box-shadow:
            0 0 0 1px rgba(23, 105, 220, 0.62),
            0 5px 14px rgba(23, 105, 220, 0.11),
            inset 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    to {
        filter: brightness(1.025);
        box-shadow:
            0 0 0 1px rgba(23, 105, 220, 0.78),
            0 6px 16px rgba(23, 105, 220, 0.16),
            inset 0 1px 0 rgba(255, 255, 255, 0.88);
    }
}

@keyframes selectedAssignmentBreathing-b-7ov57acdan {
    from {
        transform: translateY(-1px) scale(1);
        filter: brightness(1);
    }

    to {
        transform: translateY(-1px) scale(0.995);
        filter: brightness(1.035);
    }
}

@keyframes selectedCellSheen-b-7ov57acdan {
    0%, 34% {
        background-position: 145% 0;
        opacity: 0.12;
    }

    54% {
        opacity: 0.58;
    }

    76%, 100% {
        background-position: -70% 0;
        opacity: 0.08;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-assignment-cell.cell-selected[b-7ov57acdan],
    .day-assignment-cell.cell-selected[b-7ov57acdan],
    .assignment.permanent.employee-assignment.batch-selected[b-7ov57acdan],
    .assignment.agency.employee-assignment.batch-selected[b-7ov57acdan],
    .manning-assignment-cell.cell-selected[b-7ov57acdan]::before {
        animation: none;
    }
}

.transfer-preview-original-hidden[b-7ov57acdan] {
    visibility: hidden !important;
}

.assignment-transfer-preview[b-7ov57acdan] {
    position: absolute !important;
    z-index: 14 !important;
    inset: 1px !important;
    width: auto !important;
    height: auto !important;
    min-height: 22px !important;
    pointer-events: none;
    border-width: 1px !important;
    border-style: solid !important;
    opacity: 0.92;
    filter: saturate(0.94);
    animation: transferPreviewArrival-b-7ov57acdan 150ms ease-out;
}

.assignment-transfer-preview.move-mode[b-7ov57acdan] {
    border-color: #2674d9 !important;
    background-image: linear-gradient(180deg, rgba(234, 244, 255, 0.96), rgba(168, 207, 252, 0.90)) !important;
    box-shadow: 0 0 0 1px rgba(23, 105, 220, 0.20), 0 5px 12px rgba(23, 105, 220, 0.16) !important;
}

.assignment-transfer-preview.copy-mode[b-7ov57acdan] {
    border-color: #248a73 !important;
    background-image: linear-gradient(180deg, rgba(235, 253, 247, 0.97), rgba(170, 229, 211, 0.90)) !important;
    box-shadow: 0 0 0 1px rgba(36, 138, 115, 0.20), 0 5px 12px rgba(36, 138, 115, 0.16) !important;
}

.transfer-preview-target[b-7ov57acdan] {
    position: relative;
    background: color-mix(in srgb, var(--panel-background) 78%, #d9ebff 22%);
}

.transfer-preview-target.copy-mode[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 78%, #d8f4eb 22%);
}

.transfer-preview-replace[b-7ov57acdan]::after {
    position: absolute;
    z-index: 16;
    top: 2px;
    left: 3px;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: #d27a1c;
    box-shadow: 0 2px 5px rgba(119, 65, 10, 0.24);
    content: "";
    pointer-events: none;
}

@keyframes transferPreviewArrival-b-7ov57acdan {
    from {
        opacity: 0.45;
        transform: scale(0.98);
    }

    to {
        opacity: 0.92;
        transform: scale(1);
    }
}

.manning-drag-visual[b-7ov57acdan] {
    position: fixed;
    z-index: 5000;
    display: grid;
    min-width: 48px;
    height: 32px;
    place-items: center;
    padding: 0 7px;
    transform: translateZ(0);
    border: 1px solid rgba(23, 105, 220, 0.58);
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(145deg, #4f98ef 0%, #1769dc 72%, #1858ae 100%);
    box-shadow: 0 10px 22px rgba(23, 105, 220, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40);
    pointer-events: none;
    animation: manningDragVisualIn-b-7ov57acdan 120ms ease-out;
}

.manning-drag-visual[b-7ov57acdan]::before {
    display: none;
}

.manning-drag-visual.copy[b-7ov57acdan] {
    border-color: rgba(35, 139, 112, 0.68);
    background: linear-gradient(145deg, #56bfa2 0%, #258f73 72%, #176752 100%);
    box-shadow: 0 10px 22px rgba(35, 139, 112, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.manning-drag-visual.invalid[b-7ov57acdan] {
    min-width: 34px;
    width: 34px;
    height: 34px;
    padding: 0;
    border-color: rgba(190, 58, 70, 0.72);
    background: linear-gradient(145deg, #e46d78 0%, #bd3c49 72%, #8c2631 100%);
    box-shadow: 0 10px 22px rgba(158, 45, 57, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.manning-drag-mode-icon[b-7ov57acdan],
.manning-drag-visual.invalid .manning-drag-mode-icon[b-7ov57acdan] {
    display: grid;
    width: auto;
    height: 100%;
    place-items: center;
    border: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.55px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
}

.manning-drag-visual.invalid .manning-drag-mode-icon[b-7ov57acdan] {
    font-size: 25px;
    font-weight: 750;
    letter-spacing: 0;
}

.manning-drag-employee-stack[b-7ov57acdan] {
    display: none;
}

@keyframes manningDragVisualIn-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.88);
    }

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

.employee-assignment[b-7ov57acdan] {
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

.line-cell .line-agency-chip[b-7ov57acdan] {
    min-height: 25px;
    padding: 0 9px;
    border-width: 1px;
    border-radius: 999px;
    box-shadow: 0 4px 9px color-mix(in srgb, var(--line-agency-colour, #f2c94c) 26%, transparent 74%), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.1px;
}


.area-tab.spring-load-hover[b-7ov57acdan] {
    position: relative;
    z-index: 4;
    color: #0f58bd;
    border-color: #4f92ea;
    background: linear-gradient(180deg, #f5f9ff 0%, #dcecff 100%);
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.16), 0 8px 18px rgba(23, 105, 220, 0.16);
    animation: springLoadedTabPulse-b-7ov57acdan 650ms ease-in-out infinite alternate;
}

@keyframes springLoadedTabPulse-b-7ov57acdan {
    from {
        transform: translateY(0);
        filter: brightness(1);
    }

    to {
        transform: translateY(-1px);
        filter: brightness(1.05);
    }
}

.manning-table tbody td[b-7ov57acdan] {
    height: 34px;
}

.assignment[b-7ov57acdan],
.empty-assignment[b-7ov57acdan] {
    height: 34px;
    min-height: 32px;
}

.assignment.has-custom-hours[b-7ov57acdan] {
    gap: 1px;
    padding: 1px 5px;
}

.assignment.agency.has-custom-hours[b-7ov57acdan] {
    padding: 1px 6px;
}

.assignment.has-custom-hours .employee-name[b-7ov57acdan] {
    order: 1;
    width: 100%;
    margin-inline: auto;
    line-height: 1.05;
    text-align: center;
}

.assignment.agency.has-custom-hours .employee-name[b-7ov57acdan],
.assignment.agency.has-custom-hours .assignment-hours[b-7ov57acdan] {
    width: calc(100% - 76px);
    margin-inline: auto;
    text-align: center;
}

.assignment .assignment-hours[b-7ov57acdan] {
    position: static;
    order: 2;
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
    transform: none;
    overflow: hidden;
    border: 0;
    border-radius: 0;
    color: inherit;
    background: transparent;
    font-size: 10.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
    opacity: 0.9;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manning-table tbody tr.visual-group-start > td[b-7ov57acdan] {
    border-top: 5px solid color-mix(in srgb, #1769dc 68%, var(--border-color) 32%);
}

.day-line-card.visual-group-start[b-7ov57acdan] {
    grid-column-start: 1;
}

.assignment.agency .assignment-hours[b-7ov57acdan] {
    width: auto;
    margin: 0;
    text-align: center;
}

/* Keyboard armed Copy / Move mode */
.manning-assignment-cell.transfer-valid-destination[b-7ov57acdan] {
    position: relative;
    transition: background 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.manning-assignment-cell.transfer-valid-destination[b-7ov57acdan]::before {
    display: block;
    position: absolute;
    z-index: 8;
    inset: 2px;
    border: 1px dashed rgba(23, 105, 220, 0.42);
    border-radius: 4px;
    background: rgba(23, 105, 220, 0.035);
    content: "";
    pointer-events: none;
}

.manning-assignment-cell.transfer-valid-destination.copy-mode[b-7ov57acdan]::before {
    border-color: rgba(36, 138, 115, 0.50);
    background: rgba(36, 138, 115, 0.045);
}

.manning-assignment-cell.transfer-valid-destination:hover[b-7ov57acdan]::before,
.manning-assignment-cell.transfer-preview-target[b-7ov57acdan]::before {
    border-style: solid;
    border-color: rgba(23, 105, 220, 0.80);
    background: rgba(23, 105, 220, 0.10);
    box-shadow: 0 0 0 2px rgba(23, 105, 220, 0.08);
}

.manning-assignment-cell.transfer-valid-destination.copy-mode:hover[b-7ov57acdan]::before,
.manning-assignment-cell.transfer-preview-target.copy-mode[b-7ov57acdan]::before {
    border-color: rgba(36, 138, 115, 0.84);
    background: rgba(36, 138, 115, 0.11);
    box-shadow: 0 0 0 2px rgba(36, 138, 115, 0.08);
}

.manning-keyboard-transfer-visual[b-7ov57acdan] {
    position: fixed;
    z-index: 5200;
    display: flex;
    min-width: 96px;
    min-height: 42px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    padding: 6px 10px;
    border: 1px solid rgba(23, 105, 220, 0.58);
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(145deg, #4f98ef 0%, #1769dc 72%, #1858ae 100%);
    box-shadow: 0 12px 26px rgba(23, 105, 220, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.40);
    pointer-events: none;
    animation: keyboardTransferVisualIn-b-7ov57acdan 130ms ease-out;
}

.manning-keyboard-transfer-visual.copy[b-7ov57acdan] {
    border-color: rgba(35, 139, 112, 0.70);
    background: linear-gradient(145deg, #56bfa2 0%, #258f73 72%, #176752 100%);
    box-shadow: 0 12px 26px rgba(35, 139, 112, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.manning-keyboard-transfer-visual.invalid[b-7ov57acdan] {
    min-width: 42px;
    width: 42px;
    min-height: 42px;
    align-items: center;
    padding: 0;
    border-color: rgba(190, 58, 70, 0.74);
    background: linear-gradient(145deg, #e46d78 0%, #bd3c49 72%, #8c2631 100%);
    box-shadow: 0 12px 26px rgba(158, 45, 57, 0.30), inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.manning-keyboard-transfer-visual strong[b-7ov57acdan] {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.75px;
    line-height: 1.1;
}

.manning-keyboard-transfer-visual > span:not(.keyboard-transfer-invalid-icon)[b-7ov57acdan] {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.1;
    opacity: 0.92;
}

.keyboard-transfer-invalid-icon[b-7ov57acdan] {
    font-size: 25px;
    font-weight: 850;
    line-height: 1;
}

@keyframes keyboardTransferVisualIn-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(4px) scale(0.90);
    }

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

.manning-assignment-cell.transfer-complete-flash[b-7ov57acdan] {
    animation: transferCompleteCellFade-b-7ov57acdan 2050ms ease-out both;
}

.manning-assignment-cell.transfer-complete-flash > .employee-assignment[b-7ov57acdan] {
    animation: transferCompleteAssignmentFade-b-7ov57acdan 2050ms ease-out both;
}

@keyframes transferCompleteCellFade-b-7ov57acdan {
    0% {
        background: rgba(57, 191, 119, 0.44);
        box-shadow: inset 0 0 0 2px rgba(38, 164, 94, 0.95), 0 0 18px rgba(57, 191, 119, 0.42);
    }

    28% {
        background: rgba(57, 191, 119, 0.28);
        box-shadow: inset 0 0 0 1px rgba(38, 164, 94, 0.72), 0 0 12px rgba(57, 191, 119, 0.25);
    }

    100% {
        background: transparent;
        box-shadow: inset 0 0 0 0 rgba(38, 164, 94, 0), 0 0 0 rgba(57, 191, 119, 0);
    }
}

@keyframes transferCompleteAssignmentFade-b-7ov57acdan {
    0% {
        filter: brightness(1.14) saturate(1.12);
        box-shadow: 0 0 0 2px rgba(48, 178, 105, 0.86), 0 7px 18px rgba(48, 178, 105, 0.30);
    }

    38% {
        filter: brightness(1.07) saturate(1.06);
        box-shadow: 0 0 0 1px rgba(48, 178, 105, 0.48), 0 5px 12px rgba(48, 178, 105, 0.18);
    }

    100% {
        filter: none;
        box-shadow: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-keyboard-transfer-visual[b-7ov57acdan],
    .manning-assignment-cell.transfer-complete-flash[b-7ov57acdan],
    .manning-assignment-cell.transfer-complete-flash > .employee-assignment[b-7ov57acdan] {
        animation: none;
    }
}

/* Clickable agency summary badges */
.line-cell button.line-agency-chip[b-7ov57acdan],
.day-line-agency-summary button.line-agency-chip[b-7ov57acdan] {
    appearance: none;
    font-family: inherit;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.line-cell button.line-agency-chip:hover[b-7ov57acdan],
.day-line-agency-summary button.line-agency-chip:hover[b-7ov57acdan] {
    transform: translateY(-1px);
    filter: brightness(1.04) saturate(1.05);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--line-agency-colour, #f2c94c) 34%, transparent 66%), inset 0 1px 0 rgba(255, 255, 255, 0.46);
}

.line-cell button.line-agency-chip:active[b-7ov57acdan],
.day-line-agency-summary button.line-agency-chip:active[b-7ov57acdan] {
    transform: translateY(0) scale(0.97);
}

.line-cell button.line-agency-chip:focus-visible[b-7ov57acdan],
.day-line-agency-summary button.line-agency-chip:focus-visible[b-7ov57acdan] {
    outline: 2px solid #1769dc;
    outline-offset: 2px;
}

.day-line-agency-summary .line-agency-chip[b-7ov57acdan] {
    display: inline-flex;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border: 1px solid color-mix(in srgb, var(--line-agency-colour, #f2c94c) 72%, #564c2e 28%);
    border-radius: 999px;
    color: #2d2a22;
    background: var(--line-agency-colour, #f2c94c);
    box-shadow: 0 3px 7px color-mix(in srgb, var(--line-agency-colour, #f2c94c) 22%, transparent 78%), inset 0 1px 0 rgba(255, 255, 255, 0.38);
    font-size: 10px;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}


/* Agency badges are anchored in the top-right corner of the Line / Area cell.
   They do not increase row height and no longer cover the shift time. */
.line-cell.has-agencies[b-7ov57acdan] {
    padding-top: 6px !important;
    padding-right: 66px !important;
    min-width: 158px;
}

.line-cell .line-agency-summary[b-7ov57acdan] {
    top: 5px;
    right: 6px;
    bottom: auto;
    max-height: calc(100% - 10px);
    overflow: visible;
    z-index: 8;
}

.line-cell .line-agency-summary.has-menu[b-7ov57acdan] {
    z-index: 18;
}

.line-cell .line-agency-chip[b-7ov57acdan] {
    min-width: 54px;
    min-height: 19px;
    max-width: 60px;
    padding: 0 7px;
    font-size: 8.8px;
}

.line-cell .line-agency-more-chip[b-7ov57acdan] {
    min-width: 54px;
    max-width: 66px;
    color: #ffffff;
    background: linear-gradient(135deg, #1769dc, #0f4f9f);
    border-color: rgba(255, 255, 255, 0.36);
    box-shadow: 0 4px 10px rgba(23, 105, 220, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.32);
}

.line-cell .line-agency-menu[b-7ov57acdan] {
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    display: grid;
    min-width: 92px;
    gap: 5px;
    padding: 7px;
    border: 1px solid color-mix(in srgb, var(--border-color) 70%, #1769dc 30%);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 14px 28px var(--shadow-color), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.line-cell .line-agency-menu .line-agency-chip[b-7ov57acdan] {
    min-width: 76px;
    max-width: none;
    min-height: 25px;
    padding: 0 10px;
    font-size: 10.4px;
    font-weight: 900;
    line-height: 1.1;
}

.position-cell[b-7ov57acdan] {
    min-width: 0;
    overflow: visible;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
}


/* Weekly agency badge refinement: show up to three agencies, keep them larger, and reserve enough line-cell space. */
.line-cell .line-agency-summary[b-7ov57acdan] {
    gap: 3px;
}

.line-cell .line-agency-summary.has-menu .line-agency-more-chip[b-7ov57acdan] {
    letter-spacing: 0.01em;
}

/* =====================================================
   Manning search (toolbar)
   ===================================================== */

.manning-search[b-7ov57acdan] {
    position: relative;
    display: flex;
    min-width: 120px;
    max-width: 280px;
    flex: 1 1 170px;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--panel-background);
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.manning-search:focus-within[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.14);
}

.manning-search.has-query[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 55%, var(--border-color) 45%);
}

.manning-search-icon[b-7ov57acdan] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--secondary-text);
    stroke-width: 2;
    stroke-linecap: round;
}

.manning-search:focus-within .manning-search-icon[b-7ov57acdan] {
    stroke: #1769dc;
}

.manning-search-input[b-7ov57acdan] {
    min-width: 0;
    flex: 1 1 auto;
    border: 0;
    padding: 0;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
}

.manning-search-input:focus[b-7ov57acdan] {
    outline: none;
}

.manning-search-input[b-7ov57acdan]::placeholder {
    color: var(--secondary-text);
    font-weight: 500;
    opacity: 0.85;
}

.manning-search-input[b-7ov57acdan]::-webkit-search-cancel-button {
    display: none;
}

.manning-search-count[b-7ov57acdan] {
    flex: 0 0 auto;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    font-size: 10.5px;
    font-weight: 800;
    text-align: center;
}

.manning-search-clear[b-7ov57acdan] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.manning-search-clear:hover[b-7ov57acdan] {
    color: #d84c5f;
    background: var(--button-hover);
}

/* =====================================================
   Search highlighting on the grids
   ===================================================== */

.manning-table.search-active .employee-assignment:not(.search-hit)[b-7ov57acdan],
.manning-table.search-active .empty-assignment:not(.search-hit)[b-7ov57acdan],
.day-lines-grid.search-active .employee-assignment:not(.search-hit)[b-7ov57acdan],
.day-lines-grid.search-active .day-empty-assignment:not(.search-hit)[b-7ov57acdan] {
    opacity: 0.24;
    filter: saturate(0.35);
}

.manning-table.search-active .employee-assignment.search-hit[b-7ov57acdan],
.day-lines-grid.search-active .employee-assignment.search-hit[b-7ov57acdan] {
    box-shadow: 0 0 0 2px #1769dc, 0 6px 16px rgba(23, 105, 220, 0.28);
}

.manning-table.search-active .empty-assignment.search-hit[b-7ov57acdan],
.day-lines-grid.search-active .day-empty-assignment.search-hit[b-7ov57acdan] {
    box-shadow: 0 0 0 2px color-mix(in srgb, #1769dc 65%, transparent 35%);
}

/* =====================================================
   Summary toggle (toolbar)
   ===================================================== */

.summary-toggle-button[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.summary-toggle-button svg[b-7ov57acdan] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
}

.summary-toggle-button:hover[b-7ov57acdan] {
    border-color: #1769dc;
    color: #1769dc;
    background: var(--button-hover);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.10);
}

.summary-toggle-button:active[b-7ov57acdan] {
    transform: translateY(1px) scale(0.985);
}

.summary-toggle-button.active[b-7ov57acdan] {
    border-color: transparent;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22);
}

.selected-day-today-chip[b-7ov57acdan] {
    display: inline-flex;
    min-height: 18px;
    align-items: center;
    margin-left: 3px;
    padding: 1px 7px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* =====================================================
   Today column highlight (week view)
   ===================================================== */

.manning-table th.today-column[b-7ov57acdan] {
    position: sticky;
    top: var(--manning-table-sticky-top);
    z-index: 81;
    background: color-mix(in srgb, var(--panel-background) 88%, #1769dc 12%);
}

.manning-table th.today-column[b-7ov57acdan]::after {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    content: "";
}

.manning-table th.today-column .day-name[b-7ov57acdan] {
    color: #1769dc;
}

.manning-table .manning-assignment-cell.today-column[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 94%, #1769dc 6%);
}

/* =====================================================
   Double-booking conflicts
   ===================================================== */

.manning-conflict-banner[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, #d84c5f 55%, var(--border-color) 45%);
    border-left: 4px solid #d84c5f;
    border-radius: 10px;
    background: color-mix(in srgb, #d84c5f 9%, var(--panel-background) 91%);
}

.manning-conflict-banner strong[b-7ov57acdan] {
    color: #d84c5f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.manning-conflict-banner span[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 11.5px;
    font-weight: 600;
}

.employee-assignment.has-conflict[b-7ov57acdan] {
    outline: 2px dashed #d84c5f;
    outline-offset: 1px;
}

/* =====================================================
   Optional (Additional) positions
   ===================================================== */

.position-cell.optional-position[b-7ov57acdan],
.day-position-name.optional-position[b-7ov57acdan] {
    color: var(--secondary-text);
    font-style: italic;
}

/* =====================================================
   Week copy confirmation & success banners
   ===================================================== */

.week-copy-confirmation[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 16px;
    border: 1px solid color-mix(in srgb, #1769dc 45%, var(--border-color) 55%);
    border-left: 4px solid #1769dc;
    border-radius: 10px;
    background: color-mix(in srgb, #1769dc 7%, var(--panel-background) 93%);
    animation: manning-slide-in-b-7ov57acdan 220ms ease both;
}

.week-copy-confirmation-copy[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-copy-confirmation-copy strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 800;
}

.week-copy-confirmation-copy span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11.5px;
    font-weight: 600;
}

.week-copy-confirmation-actions[b-7ov57acdan] {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.week-copy-confirmation-actions button[b-7ov57acdan] {
    min-height: 32px;
    padding: 0 14px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.week-copy-confirmation-actions button:hover:not(:disabled)[b-7ov57acdan] {
    border-color: #1769dc;
    color: #1769dc;
    background: var(--button-hover);
}

.week-copy-confirmation-actions button:active:not(:disabled)[b-7ov57acdan] {
    transform: translateY(1px) scale(0.985);
}

.week-copy-confirmation-actions .confirm-copy-button[b-7ov57acdan] {
    border-color: transparent;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22);
}

.week-copy-confirmation-actions .confirm-copy-button:hover:not(:disabled)[b-7ov57acdan] {
    color: #ffffff;
    filter: brightness(1.06);
}

.week-copy-confirmation-actions .confirm-copy-button:disabled[b-7ov57acdan] {
    cursor: wait;
    opacity: 0.7;
}

.week-copy-success[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border: 1px solid color-mix(in srgb, #35c99a 55%, var(--border-color) 45%);
    border-left: 4px solid #35c99a;
    border-radius: 10px;
    background: color-mix(in srgb, #35c99a 9%, var(--panel-background) 91%);
    animation: manning-slide-in-b-7ov57acdan 220ms ease both;
}

.week-copy-success div[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.week-copy-success strong[b-7ov57acdan] {
    color: #1d9d76;
    font-size: 12px;
    font-weight: 800;
}

.week-copy-success span[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 11.5px;
    font-weight: 600;
}

.week-copy-success button[b-7ov57acdan] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: color 120ms ease, background 120ms ease;
}

.week-copy-success button:hover[b-7ov57acdan] {
    color: var(--primary-text);
    background: var(--button-hover);
}

/* =====================================================
   Who Is Free panel
   ===================================================== */

.available-panel-backdrop[b-7ov57acdan] {
    position: fixed;
    z-index: 40;
    inset: 0;
    border: 0;
    background: rgba(10, 18, 32, 0.42);
    cursor: default;
    animation: manning-fade-in-b-7ov57acdan 180ms ease both;
}

.available-panel[b-7ov57acdan] {
    position: fixed;
    z-index: 41;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    width: min(400px, 94vw);
    flex-direction: column;
    border-left: 1px solid var(--border-color);
    background: var(--panel-background);
    box-shadow: -18px 0 44px rgba(8, 15, 30, 0.28);
    animation: manning-panel-in-b-7ov57acdan 260ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.available-panel-header[b-7ov57acdan] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border-color);
}

.available-panel-eyebrow[b-7ov57acdan] {
    color: #1769dc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.available-panel-header h2[b-7ov57acdan] {
    margin: 3px 0 0;
    color: var(--primary-text);
    font-size: 16px;
    font-weight: 800;
}

.available-panel-close[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.available-panel-close:hover[b-7ov57acdan] {
    border-color: #d84c5f;
    color: #d84c5f;
    background: var(--button-hover);
}

.available-day-chips[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
    padding: 12px 18px 0;
}

.available-day-chip[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 6px 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--button-background);
    font-family: inherit;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.available-day-chip strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
}

.available-day-chip span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 600;
}

.available-day-chip:hover[b-7ov57acdan] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.available-day-chip:active[b-7ov57acdan] {
    transform: translateY(1px) scale(0.97);
}

.available-day-chip.active[b-7ov57acdan] {
    border-color: transparent;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22);
}

.available-day-chip.active strong[b-7ov57acdan],
.available-day-chip.active span[b-7ov57acdan] {
    color: #ffffff;
}

.available-day-chip.is-today:not(.active)[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 55%, var(--border-color) 45%);
}

.available-panel-search[b-7ov57acdan] {
    padding: 12px 18px 0;
}

.available-panel-search input[b-7ov57acdan] {
    width: 100%;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.available-panel-search input:focus[b-7ov57acdan] {
    border-color: #1769dc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.14);
}

.available-panel-search input[b-7ov57acdan]::placeholder {
    color: var(--secondary-text);
    font-weight: 500;
}

.available-panel-body[b-7ov57acdan] {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 10px;
    padding: 12px 18px;
    overflow-y: auto;
}

.available-panel-count[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.available-panel-count strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 800;
}

.available-panel-count span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.available-panel-empty[b-7ov57acdan] {
    padding: 22px 14px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--secondary-text);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.available-employee-list[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.available-employee-item[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-background);
    animation: manning-fade-in-b-7ov57acdan 200ms ease both;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.available-employee-item:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 45%, var(--border-color) 55%);
    box-shadow: 0 6px 14px var(--shadow-color);
    transform: translateY(-1px);
}

.available-employee-initials[b-7ov57acdan] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    font-size: 11px;
    font-weight: 800;
}

.available-employee-copy[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 1px;
}

.available-employee-copy strong[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.available-employee-copy span[b-7ov57acdan] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.available-employee-badge[b-7ov57acdan] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.available-employee-badge.permanent[b-7ov57acdan] {
    border: 1px solid var(--border-color);
    color: var(--secondary-text);
    background: transparent;
}

.available-employee-badge.agency[b-7ov57acdan] {
    --line-agency-colour: #f2c94c;
    border: 1px solid color-mix(in srgb, var(--line-agency-colour) 72%, var(--border-color) 28%);
    color: color-mix(in srgb, var(--primary-text) 82%, var(--line-agency-colour) 18%);
    background: color-mix(in srgb, var(--panel-background) 42%, var(--line-agency-colour) 58%);
}

.available-panel-footer[b-7ov57acdan] {
    padding: 10px 18px 14px;
    border-top: 1px solid var(--border-color);
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
}

/* =====================================================
   Professional motion
   ===================================================== */

@keyframes manning-fade-in-b-7ov57acdan {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes manning-slide-in-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@keyframes manning-panel-in-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateX(28px);
    }

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

.manning-workspace[b-7ov57acdan] {
    animation: manning-fade-in-b-7ov57acdan 240ms ease both;
}

.manning-conflict-banner[b-7ov57acdan],
.manning-read-only-banner[b-7ov57acdan],
.manning-operation-error[b-7ov57acdan] {
    animation: manning-slide-in-b-7ov57acdan 220ms ease both;
}

.employee-details-panel[b-7ov57acdan] {
    animation: manning-panel-in-b-7ov57acdan 260ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.employee-panel-backdrop[b-7ov57acdan] {
    animation: manning-fade-in-b-7ov57acdan 180ms ease both;
}

@media (prefers-reduced-motion: reduce) {
    .manning-workspace[b-7ov57acdan],
    .manning-conflict-banner[b-7ov57acdan],
    .manning-read-only-banner[b-7ov57acdan],
    .manning-operation-error[b-7ov57acdan],
    .assignment-toast[b-7ov57acdan],
    .employee-details-panel[b-7ov57acdan],
    .employee-panel-backdrop[b-7ov57acdan],
    .available-panel[b-7ov57acdan],
    .available-panel-backdrop[b-7ov57acdan],
    .available-employee-item[b-7ov57acdan],
    .week-copy-confirmation[b-7ov57acdan],
    .week-copy-success[b-7ov57acdan] {
        animation: none;
    }

    .available-employee-item:hover[b-7ov57acdan] {
        transform: none;
    }
}

@media (max-width: 1560px) {
    .manning-view-toolbar .summary-toggle-button span[b-7ov57acdan] {
        display: none;
    }

    .manning-view-toolbar .summary-toggle-button[b-7ov57acdan] {
        padding: 0 9px;
    }

    .manning-view-toolbar .summary-toggle-button svg[b-7ov57acdan] {
        width: 15px;
        height: 15px;
    }
}

/* =====================================================
   Click-to-place from Available
   ===================================================== */

.available-employee-item[b-7ov57acdan] {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.available-employee-item.armed[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: 0 0 0 2px rgba(23, 105, 220, 0.28), 0 8px 18px rgba(23, 105, 220, 0.16);
    background: color-mix(in srgb, #1769dc 8%, var(--panel-background) 92%);
}

.available-armed-hint[b-7ov57acdan] {
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #1769dc 45%, var(--border-color) 55%);
    border-left: 3px solid #1769dc;
    border-radius: 8px;
    background: color-mix(in srgb, #1769dc 8%, var(--panel-background) 92%);
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}

.available-armed-hint strong[b-7ov57acdan] {
    color: #1769dc;
    font-weight: 800;
}

/* Empty slots become obvious drop targets while a name is armed */
.empty-assignment.armed-target[b-7ov57acdan],
.day-empty-assignment.armed-target[b-7ov57acdan] {
    color: #1769dc;
    border: 1px dashed #1769dc !important;
    background: color-mix(in srgb, #1769dc 8%, transparent 92%);
    animation: armed-target-pulse-b-7ov57acdan 1.6s ease-in-out infinite;
}

@keyframes armed-target-pulse-b-7ov57acdan {
    0%, 100% {
        background: color-mix(in srgb, #1769dc 6%, transparent 94%);
    }

    50% {
        background: color-mix(in srgb, #1769dc 16%, transparent 84%);
    }
}

/* Flash the freshly placed / replaced person */
.employee-assignment.just-placed[b-7ov57acdan] {
    animation: just-placed-flash-b-7ov57acdan 1.1s ease-out !important;
    z-index: 2;
}

@keyframes just-placed-flash-b-7ov57acdan {
    0% {
        transform: scale(0.82);
        box-shadow: 0 0 0 3px #35c99a, 0 8px 22px rgba(53, 201, 154, 0.45);
    }

    45% {
        transform: scale(1.04);
        box-shadow: 0 0 0 3px #35c99a, 0 8px 22px rgba(53, 201, 154, 0.35);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(53, 201, 154, 0);
    }
}

/* Slot marked "TBC" via double-click — the chosen agency fills it later */
.empty-assignment.tbc[b-7ov57acdan],
.day-empty-assignment.tbc[b-7ov57acdan] {
    color: color-mix(in srgb, var(--tbc-colour, #e0a53a) 42%, #2b2519 58%);
    border: 1px solid color-mix(in srgb, var(--tbc-colour, #e0a53a) 62%, var(--border-color) 38%) !important;
    background: color-mix(in srgb, var(--tbc-colour, #e0a53a) 16%, var(--panel-background) 84%);
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--tbc-colour, #e0a53a) 74%, transparent 26%),
        inset 0 1px 0 rgba(255, 255, 255, 0.48);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation: none;
    transition: border-color 160ms ease, background 160ms ease, filter 160ms ease;
}

.app-shell.theme-dark .empty-assignment.tbc[b-7ov57acdan],
.app-shell.theme-dark .day-empty-assignment.tbc[b-7ov57acdan] {
    color: color-mix(in srgb, var(--tbc-colour, #e0a53a) 72%, #f5f7fb 28%);
    border-color: color-mix(in srgb, var(--tbc-colour, #e0a53a) 48%, #435064 52%) !important;
    background: color-mix(in srgb, var(--tbc-colour, #e0a53a) 13%, #142131 87%);
    box-shadow:
        inset 3px 0 0 color-mix(in srgb, var(--tbc-colour, #e0a53a) 68%, transparent 32%),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.empty-assignment.tbc:hover[b-7ov57acdan],
.day-empty-assignment.tbc:hover[b-7ov57acdan] {
    filter: brightness(1.035);
}

@media (prefers-reduced-motion: reduce) {
    .empty-assignment.tbc[b-7ov57acdan],
    .day-empty-assignment.tbc[b-7ov57acdan] {
        animation: none;
    }
}

/* External agency action cues: keep unresolved TBC and Pending work visible. */
[data-agency-mode="true"] .empty-assignment.tbc[b-7ov57acdan],
[data-agency-mode="true"] .day-empty-assignment.tbc[b-7ov57acdan],
[data-agency-mode="true"] .employee-assignment.awaiting-confirmation[b-7ov57acdan] {
    position: relative;
    isolation: isolate;
}

[data-agency-mode="true"] .empty-assignment.tbc[b-7ov57acdan]::after,
[data-agency-mode="true"] .day-empty-assignment.tbc[b-7ov57acdan]::after {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 4;
    width: 6px;
    height: 6px;
    border: 1px solid color-mix(in srgb, var(--tbc-colour, #e0a53a) 52%, #ffffff 48%);
    border-radius: 50%;
    background: color-mix(in srgb, var(--tbc-colour, #e0a53a) 82%, #9a5700 18%);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--tbc-colour, #e0a53a) 32%, transparent 68%);
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
    animation: agency-tbc-beacon-b-7ov57acdan 2.8s ease-out infinite;
}

.app-shell.theme-dark [data-agency-mode="true"] .empty-assignment.tbc[b-7ov57acdan]::after,
.app-shell.theme-dark [data-agency-mode="true"] .day-empty-assignment.tbc[b-7ov57acdan]::after {
    border-color: color-mix(in srgb, var(--tbc-colour, #e0a53a) 62%, #fff4d6 38%);
    background: color-mix(in srgb, var(--tbc-colour, #e0a53a) 86%, #f7d99a 14%);
}

[data-agency-mode="true"] .employee-assignment.awaiting-confirmation[b-7ov57acdan]::after {
    position: absolute;
    inset: 1px;
    z-index: 4;
    border: 1px solid rgba(255, 185, 48, 0.92);
    border-radius: inherit;
    background: linear-gradient(
        105deg,
        transparent 28%,
        rgba(255, 255, 255, 0.18) 40%,
        rgba(255, 255, 255, 0.88) 49%,
        rgba(255, 255, 255, 0.18) 58%,
        transparent 70%);
    background-position: 160% 0;
    background-size: 240% 100%;
    box-shadow:
        inset 0 0 8px rgba(255, 185, 48, 0.26),
        0 0 9px rgba(255, 185, 48, 0.48);
    content: "";
    pointer-events: none;
    animation: agency-pending-attention-b-7ov57acdan 1.35s ease-in-out infinite;
}

@keyframes agency-tbc-beacon-b-7ov57acdan {
    0%, 66%, 100% {
        opacity: 0.62;
        transform: translateY(-50%) scale(0.82);
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--tbc-colour, #e0a53a) 30%, transparent 70%);
    }

    78% {
        opacity: 1;
        transform: translateY(-50%) scale(1);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--tbc-colour, #e0a53a) 0%, transparent 100%);
    }
}

@keyframes agency-pending-attention-b-7ov57acdan {
    0% {
        opacity: 0.35;
        background-position: 160% 0;
    }

    45% {
        opacity: 1;
    }

    100% {
        opacity: 0.35;
        background-position: -80% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-agency-mode="true"] .empty-assignment.tbc[b-7ov57acdan]::after,
    [data-agency-mode="true"] .day-empty-assignment.tbc[b-7ov57acdan]::after,
    [data-agency-mode="true"] .employee-assignment.awaiting-confirmation[b-7ov57acdan]::after {
        opacity: 0.72;
        animation: none;
    }

    [data-agency-mode="true"] .empty-assignment.tbc[b-7ov57acdan]::after,
    [data-agency-mode="true"] .day-empty-assignment.tbc[b-7ov57acdan]::after {
        transform: translateY(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .empty-assignment.armed-target[b-7ov57acdan],
    .day-empty-assignment.armed-target[b-7ov57acdan],
    .employee-assignment.just-placed[b-7ov57acdan] {
        animation: none !important;
    }
}

/* =====================================================
   Pulsing Available button when permanent staff are free
   ===================================================== */

.available-toggle-button.has-available:not(.active)[b-7ov57acdan] {
    border-color: #1d9d76;
    color: #0f6b4f;
    background: color-mix(in srgb, #35c99a 20%, var(--button-background) 80%);
    animation: available-button-pulse-b-7ov57acdan 1.8s ease-in-out infinite;
}

.app-shell.theme-dark .available-toggle-button.has-available:not(.active)[b-7ov57acdan] {
    color: #4fe0ad;
    background: color-mix(in srgb, #35c99a 18%, var(--button-background) 82%);
}

@keyframes available-button-pulse-b-7ov57acdan {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(53, 201, 154, 0.45);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(53, 201, 154, 0);
    }
}

.available-toggle-button.has-available.active[b-7ov57acdan] {
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22), 0 0 0 2px rgba(53, 201, 154, 0.55);
}

@media (prefers-reduced-motion: reduce) {
    .available-toggle-button.has-available:not(.active)[b-7ov57acdan] {
        animation: none;
    }
}

/* Agency filter dropdown in the Available rail */
.available-rail-search[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.available-rail-agency-select[b-7ov57acdan] {
    width: 100%;
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 140ms ease, box-shadow 140ms ease;
}

.available-rail-agency-select:focus[b-7ov57acdan] {
    border-color: #1769dc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.14);
}

/* Main agency picker in the Available rail */
.available-rail-main-agency[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 2px;
}

.available-rail-main-agency span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.available-rail-main-agency select[b-7ov57acdan] {
    width: 100%;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    box-sizing: border-box;
}

.available-rail-main-agency select:focus[b-7ov57acdan] {
    border-color: #1769dc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.14);
}

/* =====================================================
   Absence calendar (right rail, below Available)
   ===================================================== */

.absence-calendar-card[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 0.5px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 8px 20px var(--shadow-color);
}

.absence-calendar-header[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.absence-calendar-title[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.absence-cal-eyebrow[b-7ov57acdan] {
    color: #1769dc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.absence-calendar-title strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 13.5px;
    font-weight: 800;
}

.absence-cal-nav[b-7ov57acdan] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.absence-cal-nav:hover[b-7ov57acdan] {
    color: #1769dc;
    border-color: #1769dc;
    background: var(--button-hover);
}

.absence-calendar-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.absence-cal-weekday[b-7ov57acdan] {
    padding: 2px 0;
    color: var(--secondary-text);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
}

.absence-cal-day[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 34px;
    padding: 3px 3px 4px;
    border: 0.5px solid var(--border-color);
    border-radius: 6px;
    background: var(--panel-background);
}

.absence-cal-day.empty[b-7ov57acdan] {
    border: 0;
    background: transparent;
}

.absence-cal-day.is-today[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: inset 0 0 0 1px #1769dc;
}

.absence-cal-day.has-absences[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
}

.absence-cal-daynum[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1;
}

.absence-cal-day.is-today .absence-cal-daynum[b-7ov57acdan] {
    color: #1769dc;
    font-weight: 800;
}

.absence-cal-chips[b-7ov57acdan] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}

.absence-cal-chip[b-7ov57acdan] {
    position: relative;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.5;
}

.absence-cal-chip.type-holiday[b-7ov57acdan] {
    color: #0c447c;
    background: #cfe3fb;
}

.absence-cal-chip.type-sick[b-7ov57acdan] {
    color: #791f1f;
    background: #f8d3d6;
}

.absence-cal-chip.type-other[b-7ov57acdan] {
    color: #4d3273;
    background: #e6ddf7;
}

.absence-cal-chip.more[b-7ov57acdan] {
    color: var(--secondary-text);
    background: var(--fill-control, rgba(148, 163, 184, 0.2));
}

.absence-cal-chip.half[b-7ov57acdan] {
    background-image: linear-gradient(135deg, currentColor 0 45%, transparent 45% 55%, currentColor 55% 100%);
    background-clip: border-box;
}

.absence-cal-chip.half[b-7ov57acdan]::after {
    content: "½";
    position: absolute;
    top: -5px;
    right: -3px;
    padding: 0 1px;
    border-radius: 2px;
    color: #ffffff;
    background: #1769dc;
    font-size: 7px;
    line-height: 1.3;
}

.app-shell.theme-dark .absence-cal-chip.type-holiday[b-7ov57acdan] {
    color: #bcd8fb;
    background: color-mix(in srgb, #1769dc 34%, #0b1422 66%);
}

.app-shell.theme-dark .absence-cal-chip.type-sick[b-7ov57acdan] {
    color: #f4b8bc;
    background: color-mix(in srgb, #d84c5f 30%, #0b1422 70%);
}

.app-shell.theme-dark .absence-cal-chip.type-other[b-7ov57acdan] {
    color: #d8c7f5;
    background: color-mix(in srgb, #7a5bb0 32%, #0b1422 68%);
}

.absence-calendar-legend[b-7ov57acdan] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding-top: 4px;
    border-top: 0.5px solid var(--border-color);
    font-size: 9.5px;
    color: var(--secondary-text);
    font-weight: 600;
}

.absence-calendar-legend span[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cal-swatch[b-7ov57acdan] {
    width: 9px;
    height: 9px;
    border-radius: 2px;
    display: inline-block;
}

.cal-swatch.holiday[b-7ov57acdan] { background: #7fb2ee; }
.cal-swatch.sick[b-7ov57acdan] { background: #e79aa0; }
.cal-swatch.other[b-7ov57acdan] { background: #b79fe0; }
.cal-swatch.half-legend[b-7ov57acdan] { background: linear-gradient(135deg, #7fb2ee 0 45%, transparent 45% 55%, #7fb2ee 55% 100%); border: 0.5px solid #7fb2ee; }

/* =====================================================
   Calendar / Summary mode switch
   ===================================================== */
.absence-cal-modeswitch[b-7ov57acdan] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    padding: 3px;
    border: 0.5px solid var(--border-color);
    border-radius: 999px;
    background: color-mix(in srgb, var(--panel-background) 82%, var(--border-color) 18%);
}

.absence-cal-modeswitch-thumb[b-7ov57acdan] {
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc(50% - 3px);
    border-radius: 999px;
    background: var(--panel-background);
    box-shadow: 0 2px 6px var(--shadow-color);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.absence-cal-modeswitch-thumb.summary[b-7ov57acdan] {
    transform: translateX(100%);
}

.app-shell.theme-dark .absence-cal-modeswitch-thumb[b-7ov57acdan] {
    background: color-mix(in srgb, #1769dc 34%, var(--panel-background) 66%);
}

.absence-cal-modeswitch-btn[b-7ov57acdan] {
    position: relative;
    z-index: 1;
    padding: 5px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--secondary-text);
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: color 160ms ease;
}

.absence-cal-modeswitch-btn.active[b-7ov57acdan] {
    color: var(--primary-text);
}

.absence-cal-modeswitch-btn:focus-visible[b-7ov57acdan] {
    outline: 2px solid color-mix(in srgb, #1769dc 55%, transparent);
    outline-offset: 2px;
}

/* =====================================================
   Monthly absence summary
   ===================================================== */
.absence-summary[b-7ov57acdan] {
    --sum-holiday: #4a90e2;
    --sum-sick: #e2666f;
    --sum-other: #9a78d8;
    --sum-half: #2fb3a4;
    --sum-empty: color-mix(in srgb, var(--border-color) 70%, transparent);
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: manning-fade-in-b-7ov57acdan 220ms ease both;
}

.app-shell.theme-dark .absence-summary[b-7ov57acdan] {
    --sum-holiday: #5ea7f2;
    --sum-sick: #ff7883;
    --sum-other: #b18cff;
    --sum-half: #3eccbb;
}

.asum-chart[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.asum-donut[b-7ov57acdan] {
    position: relative;
    width: 116px;
    height: 116px;
    flex: 0 0 auto;
    border-radius: 50%;
}

.asum-donut-hole[b-7ov57acdan] {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    width: 76px;
    height: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--panel-background);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--border-color) 60%, transparent);
    transform: translate(-50%, -50%);
}

.asum-donut-hole strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.asum-donut-hole span[b-7ov57acdan] {
    margin-top: 2px;
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asum-legend[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
}

.asum-legend-row[b-7ov57acdan] {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
}

.asum-dot[b-7ov57acdan] {
    width: 10px;
    height: 10px;
    flex: 0 0 auto;
    border-radius: 3px;
}

.asum-dot.holiday[b-7ov57acdan] { background: var(--sum-holiday); }
.asum-dot.sick[b-7ov57acdan] { background: var(--sum-sick); }
.asum-dot.other[b-7ov57acdan] { background: var(--sum-other); }
.asum-dot.half[b-7ov57acdan] { background: var(--sum-half); }

.asum-legend-name[b-7ov57acdan] {
    color: var(--secondary-text);
    font-weight: 650;
}

.asum-legend-val[b-7ov57acdan] {
    color: var(--primary-text);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.asum-legend-pct[b-7ov57acdan] {
    min-width: 34px;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 700;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.asum-meta[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 8px 0;
    border-top: 0.5px solid var(--border-color);
    border-bottom: 0.5px solid var(--border-color);
}

.asum-meta-item[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.asum-meta-item span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.asum-meta-item strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.asum-top[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.asum-title[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.asum-empty[b-7ov57acdan] {
    margin: 0;
    padding: 10px 0;
    color: var(--secondary-text);
    font-size: 11px;
    text-align: center;
}

.asum-top-row[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.asum-avatar[b-7ov57acdan] {
    display: inline-flex;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.3px;
    background: var(--sum-other);
}

.asum-avatar.type-holiday[b-7ov57acdan] { background: var(--sum-holiday); }
.asum-avatar.type-sick[b-7ov57acdan] { background: var(--sum-sick); }
.asum-avatar.type-other[b-7ov57acdan] { background: var(--sum-other); }
.asum-avatar.type-training[b-7ov57acdan] { background: var(--sum-other); }
.asum-avatar.type-maternity[b-7ov57acdan] { background: var(--sum-other); }
.asum-avatar.type-half[b-7ov57acdan] { background: var(--sum-half); }

.asum-top-main[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 4px;
}

.asum-top-head[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.asum-top-name[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.asum-top-days[b-7ov57acdan] {
    flex: 0 0 auto;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.asum-bar[b-7ov57acdan] {
    height: 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 55%, transparent);
    overflow: hidden;
}

.asum-bar-fill[b-7ov57acdan] {
    display: block;
    height: 100%;
    min-width: 4px;
    border-radius: 999px;
    background: var(--sum-other);
    transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

.asum-bar-fill.type-holiday[b-7ov57acdan] { background: var(--sum-holiday); }
.asum-bar-fill.type-sick[b-7ov57acdan] { background: var(--sum-sick); }
.asum-bar-fill.type-other[b-7ov57acdan] { background: var(--sum-other); }
.asum-bar-fill.type-training[b-7ov57acdan] { background: var(--sum-other); }
.asum-bar-fill.type-maternity[b-7ov57acdan] { background: var(--sum-other); }
.asum-bar-fill.type-half[b-7ov57acdan] { background: var(--sum-half); }

/* =====================================================
   Calendar day popup (instant hover)
   ===================================================== */

.absence-cal-day[b-7ov57acdan] {
    position: relative;
}

.absence-cal-popup[b-7ov57acdan] {
    position: absolute;
    top: auto;
    bottom: -6px;
    right: calc(100% + 8px);
    z-index: 9999;
    display: none;
    width: 250px;
    max-height: 320px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--panel-background);
    box-shadow: 0 14px 34px rgba(8, 15, 30, 0.32);
    text-align: left;
    cursor: default;
}

.absence-cal-day.has-absences:hover .absence-cal-popup[b-7ov57acdan] {
    display: block;
    animation: acp-fade-b-7ov57acdan 90ms ease-out;
}

@keyframes acp-fade-b-7ov57acdan {
    from { opacity: 0; transform: translateX(4px); }
    to { opacity: 1; transform: translateX(0); }
}

.acp-head[b-7ov57acdan] {
    margin-bottom: 7px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-color);
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
}

.acp-everyone[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, #1769dc 12%, var(--panel-background) 88%);
}

.acp-everyone strong[b-7ov57acdan] {
    color: #1769dc;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.acp-everyone span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 600;
}

.acp-group[b-7ov57acdan] {
    margin-bottom: 8px;
}

.acp-group:last-child[b-7ov57acdan] {
    margin-bottom: 0;
}

.acp-label[b-7ov57acdan] {
    display: inline-block;
    margin-bottom: 3px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.acp-label.holiday[b-7ov57acdan] { color: #0c447c; background: #cfe3fb; }
.acp-label.maternity[b-7ov57acdan] { color: #7a4d12; background: #fbe6c4; }
.acp-label.sick[b-7ov57acdan] { color: #791f1f; background: #f8d3d6; }
.acp-label.other[b-7ov57acdan] { color: #4d3273; background: #e6ddf7; }

.acp-row[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 1.5px 0;
}

.acp-row span[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 11.5px;
    font-weight: 600;
}

.acp-row .board-entry-person[b-7ov57acdan] {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    padding: 1px 0;
    border: 0;
    color: var(--primary-text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.board-entry-person:hover .board-entry-name[b-7ov57acdan],
.board-entry-person:focus-visible .board-entry-name[b-7ov57acdan] {
    color: #1769dc;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.board-entry-person:focus-visible[b-7ov57acdan] {
    outline: 2px solid rgba(23, 105, 220, 0.28);
    outline-offset: 2px;
    border-radius: 4px;
}

.board-agency-badge[b-7ov57acdan] {
    --assignment-agency-colour: #f2c94c;
    display: inline-flex;
    min-width: 28px;
    height: 16px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--assignment-agency-colour) 72%, var(--border-color) 28%);
    border-radius: 2px;
    color: color-mix(in srgb, var(--primary-text) 88%, var(--assignment-agency-colour) 12%);
    background: color-mix(in srgb, var(--panel-background) 38%, var(--assignment-agency-colour) 62%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 58%, transparent 42%);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.2px;
    line-height: 1;
}

.acp-row small[b-7ov57acdan] {
    flex: 0 0 auto;
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

/* =====================================================
   Absence board (fixed bottom launcher)
   ===================================================== */

.absence-board[b-7ov57acdan] {
    --absence-board-status-column-width: 286px;
    --absence-board-column-gap: 8px;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;
    display: flex;
    flex-direction: column;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 74%, var(--primary-text) 26%);
    border-radius: 0;
    background: var(--panel-background);
    box-shadow: none;
    overflow: hidden;
    transform: translateY(calc(100% - 44px));
    transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1) 500ms;
}

.absence-board.open[b-7ov57acdan],
.absence-board:hover[b-7ov57acdan] {
    transform: translateY(0);
    transition-delay: 0s;
}

.absence-board-content[b-7ov57acdan] {
    position: relative;
    opacity: 1;
    visibility: visible;
    transition:
        opacity 180ms ease 60ms,
        visibility 0s linear 0s;
}

.absence-board:not(.open):not(:hover) .absence-board-content[b-7ov57acdan] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition:
        opacity 120ms ease 420ms,
        visibility 0s linear 560ms;
}

.absence-board-handle[b-7ov57acdan] {
    position: relative;
    flex: 0 0 44px;
}

.absence-board-launcher[b-7ov57acdan] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 44px;
    padding: 0 88px 0 12px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 68%, transparent);
    border-radius: 0;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    transition: background 160ms ease;
}

.absence-board:hover .absence-board-launcher[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 96%, var(--border-color) 4%);
}

.absence-board:not(.open) .absence-board-launcher[b-7ov57acdan] {
    border-radius: 0;
}

.absence-board-grip[b-7ov57acdan] {
    display: none;
}

.absence-board-handle-label[b-7ov57acdan] {
    display: inline-flex;
    min-width: 0;
    flex: 0 1 auto;
    align-items: center;
    gap: 8px;
    overflow: hidden;
}

.absence-board-handle-label svg[b-7ov57acdan] {
    display: block;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--secondary-text);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.absence-board-handle-label strong[b-7ov57acdan] {
    flex: 0 0 auto;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.1px;
    white-space: nowrap;
}

.absence-board-handle-label small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.absence-board-week-range.is-compact[b-7ov57acdan] {
    display: none;
}

.absence-board-summary[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-left: 18px;
    padding: 0 8px;
    overflow: hidden;
    white-space: nowrap;
}

.absence-board.open .absence-board-summary[b-7ov57acdan],
.absence-board:hover .absence-board-summary[b-7ov57acdan] {
    display: none;
}

.absence-board-summary-indicator[b-7ov57acdan] {
    --status-accent: var(--secondary-text);
    display: inline-flex;
    min-width: 28px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    color: var(--secondary-text);
    font-family: var(--font-manning-mono);
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    line-height: 1;
}

.absence-board-summary-indicator.is-zero[b-7ov57acdan] {
    opacity: 0.4;
}

.absence-board-summary-indicator.is-active[b-7ov57acdan] {
    color: var(--primary-text);
    font-weight: 600;
}

.absence-board-summary-dot[b-7ov57acdan] {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--status-accent);
}

.absence-board-summary-count[b-7ov57acdan] {
    min-width: 2ch;
    text-align: left;
}

.absence-board-summary-empty[b-7ov57acdan] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-style: italic;
    font-weight: 400;
    text-overflow: ellipsis;
}

.absence-board-summary-empty .is-compact[b-7ov57acdan] {
    display: none;
}

.absence-board-caret[b-7ov57acdan] {
    position: absolute;
    right: 58px;
    bottom: 15px;
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 600;
    opacity: 0.62;
    pointer-events: none;
    transition: transform 220ms ease;
}

.absence-board:not(.open):hover .absence-board-caret[b-7ov57acdan] {
    transform: rotate(180deg);
}

.absence-board-pin-button[b-7ov57acdan] {
    position: absolute;
    right: 16px;
    bottom: 8px;
    z-index: 3;
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 5px;
    color: var(--secondary-text);
    background: transparent;
    box-shadow: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transform: translateY(4px) scale(0.94);
    transition:
        color 160ms ease,
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 180ms ease,
        transform 180ms ease,
        opacity 150ms ease 400ms,
        visibility 0s linear 550ms;
}

.absence-board.open .absence-board-pin-button[b-7ov57acdan],
.absence-board:hover .absence-board-pin-button[b-7ov57acdan] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 150ms, 150ms, 150ms, 150ms, 150ms, 150ms, 0s;
}

.absence-board-pin-button svg[b-7ov57acdan] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.absence-board-pin-button:hover[b-7ov57acdan] {
    color: #1769dc;
    border-color: color-mix(in srgb, #1769dc 48%, var(--border-color) 52%);
    background: color-mix(in srgb, #1769dc 8%, var(--panel-background) 92%);
    box-shadow: none;
    transform: translateY(0) scale(1);
}

.absence-board-pin-button.active[b-7ov57acdan] {
    color: #ffffff;
    border-color: #1769dc;
    background: #1769dc;
    box-shadow: none;
}

.absence-board-pin-button.active svg[b-7ov57acdan] {
    fill: rgba(255, 255, 255, 0.20);
    transform: rotate(-38deg);
    transform-origin: 50% 55%;
}

.absence-board-pin-button svg[b-7ov57acdan] {
    transition: transform 190ms cubic-bezier(0.22, 1, 0.36, 1);
}

.absence-board-body[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    max-height: 42vh;
    padding: 0 10px 12px;
    overflow-y: auto;
}

.absence-board-row[b-7ov57acdan] {
    display: grid;
    grid-template-columns: var(--absence-board-status-column-width) repeat(5, minmax(0, 1fr));
    column-gap: var(--absence-board-column-gap);
    min-width: 0;
}

.absence-board-header-row[b-7ov57acdan] {
    position: sticky;
    top: 0;
    z-index: 4;
    padding-bottom: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    background: color-mix(in srgb, var(--panel-background) 96%, var(--border-color) 4%);
}

.absence-board-status-line[b-7ov57acdan] {
    position: relative;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
}

.absence-board-status-line:last-child[b-7ov57acdan] {
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
}

.absence-board-status-column[b-7ov57acdan],
.absence-board-day-header[b-7ov57acdan],
.absence-board-status-cell[b-7ov57acdan] {
    box-sizing: border-box;
    min-width: 0;
}

.absence-board-status-header[b-7ov57acdan],
.absence-board-day-header[b-7ov57acdan] {
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.absence-board-status-header[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
}

.absence-board-status-header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.absence-board-day-header[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.absence-board-day-header.is-today[b-7ov57acdan] {
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 6%, transparent);
    box-shadow: inset 0 -2px 0 #1769dc;
}

.absence-board-day-header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.absence-board-day-header span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 500;
}

.absence-board-status-label[b-7ov57acdan],
.absence-board-status-cell[b-7ov57acdan] {
    min-height: 42px;
    padding: 6px 10px;
}

.absence-board-status-label[b-7ov57acdan] {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 36px;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 4px 8px;
}

.absence-status-chip[b-7ov57acdan] {
    --status-accent: var(--secondary-text);
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    padding: 2px 0;
    border: 0;
    border-radius: 4px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.65px;
    line-height: 1.1;
    text-align: left;
    text-transform: uppercase;
    white-space: normal;
}

.absence-status-toggle[b-7ov57acdan] {
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
}

.absence-status-toggle:hover[b-7ov57acdan] {
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 88%, var(--border-color) 12%);
}

.absence-status-toggle:focus-visible[b-7ov57acdan] {
    outline: 2px solid color-mix(in srgb, currentColor 58%, transparent);
    outline-offset: 2px;
}

.absence-status-chevron[b-7ov57acdan] {
    margin-left: auto;
    color: currentColor;
    font-size: 9px;
    line-height: 1;
    opacity: 0.42;
    transition: opacity 140ms ease;
}

.absence-status-toggle:hover .absence-status-chevron[b-7ov57acdan],
.absence-status-toggle:focus-visible .absence-status-chevron[b-7ov57acdan] {
    opacity: 1;
}

.absence-status-icon[b-7ov57acdan] {
    display: inline-flex;
    width: 8px;
    height: 8px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: none;
}

.absence-status-icon[b-7ov57acdan]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--status-accent);
    box-shadow: none;
}

/* Existing status colours remain as compact operational accents. */
.absence-status-chip.training[b-7ov57acdan],
.absence-board-summary-indicator.training[b-7ov57acdan] { --status-accent: #0e8f68; }
.absence-status-chip.holiday[b-7ov57acdan],
.absence-board-summary-indicator.holiday[b-7ov57acdan] { --status-accent: #1a6fd4; }
.absence-status-chip.sick[b-7ov57acdan],
.absence-board-summary-indicator.sick[b-7ov57acdan] { --status-accent: #d1323d; }
.absence-status-chip.other[b-7ov57acdan],
.absence-board-summary-indicator.other[b-7ov57acdan] { --status-accent: #7a45cf; }
.absence-status-chip.maternity[b-7ov57acdan],
.absence-board-summary-indicator.maternity[b-7ov57acdan] { --status-accent: #a06a12; }

/* Dark theme: softer pastel accents that read well on the dark board. */
.app-shell.theme-dark .absence-status-chip.training[b-7ov57acdan],
.app-shell.theme-dark .absence-board-summary-indicator.training[b-7ov57acdan] { --status-accent: #6ce5bf; }
.app-shell.theme-dark .absence-status-chip.holiday[b-7ov57acdan],
.app-shell.theme-dark .absence-board-summary-indicator.holiday[b-7ov57acdan] { --status-accent: #86c5ff; }
.app-shell.theme-dark .absence-status-chip.sick[b-7ov57acdan],
.app-shell.theme-dark .absence-board-summary-indicator.sick[b-7ov57acdan] { --status-accent: #ff8791; }
.app-shell.theme-dark .absence-status-chip.other[b-7ov57acdan],
.app-shell.theme-dark .absence-board-summary-indicator.other[b-7ov57acdan] { --status-accent: #c7a8ff; }
.app-shell.theme-dark .absence-status-chip.maternity[b-7ov57acdan],
.app-shell.theme-dark .absence-board-summary-indicator.maternity[b-7ov57acdan] { --status-accent: #f2cf82; }

.absence-board-lanes[b-7ov57acdan] {
    grid-column: 2 / -1;
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0;
}

.absence-board-lanes.is-collapsed[b-7ov57acdan] {
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 4px 0;
}

.absence-board-collapsed-note[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10px;
    font-style: italic;
    font-weight: 500;
}

/* Day column guides behind the entries so chips visibly line up with the headers */
.absence-board-day-guides[b-7ov57acdan] {
    position: absolute;
    inset: 3px 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--absence-board-column-gap);
    pointer-events: none;
}

.absence-board-day-guide[b-7ov57acdan] {
    border-left: 1px solid color-mix(in srgb, var(--border-color) 46%, transparent);
    border-radius: 0;
    background: transparent;
}

.absence-board-day-guide:nth-child(even)[b-7ov57acdan] {
    background: transparent;
}

/* Vacant days stay visually empty; the column divider is the only guide. */
.absence-board-day-guide.is-vacant[b-7ov57acdan] {
    background: transparent;
    opacity: 1;
}

.absence-board-lane[b-7ov57acdan] {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--absence-board-column-gap);
    min-width: 0;
    min-height: 26px;
}

.absence-board-empty-state[b-7ov57acdan] {
    padding: 8px 10px;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-style: italic;
    font-weight: 400;
    text-align: center;
}

/* Weekly people counter next to the status label. */
.absence-status-count[b-7ov57acdan] {
    display: inline-flex;
    min-width: 12px;
    height: auto;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: var(--secondary-text);
    background: transparent;
    font-size: 9.8px;
    font-weight: 600;
    line-height: 1;
}

.absence-board-status-line.is-empty .absence-status-chip[b-7ov57acdan] {
    opacity: 0.45;
}

/* =====================================================
   Unified Status board entry chip (single day and runs)
   ===================================================== */
.sb-entry[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    min-height: 26px;
    align-items: center;
    gap: 7px;
    padding: 2px 7px 2px 8px;
    border: 0;
    border-left: 3px solid currentColor;
    border-radius: 5px;
    background: color-mix(in srgb, var(--panel-background) 91%, currentColor 9%);
    box-shadow: none;
    font-size: 11.5px;
    line-height: 1;
    transition: background 140ms ease;
}

.sb-entry:hover[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 86%, currentColor 14%);
}

/* Light theme (default): deeper accents so the tinted chip + name stay legible */
.sb-entry.training[b-7ov57acdan] { color: #0e8f68; }
.sb-entry.holiday[b-7ov57acdan] { color: #1a6fd4; }
.sb-entry.sick[b-7ov57acdan] { color: #d1323d; }
.sb-entry.other[b-7ov57acdan] { color: #7a45cf; }
.sb-entry.maternity[b-7ov57acdan] { color: #a06a12; }

/* Dark theme: original brighter accents */
.app-shell.theme-dark .sb-entry.training[b-7ov57acdan] { color: #35d5a6; }
.app-shell.theme-dark .sb-entry.holiday[b-7ov57acdan] { color: #5ea7f2; }
.app-shell.theme-dark .sb-entry.sick[b-7ov57acdan] { color: #ff6b78; }
.app-shell.theme-dark .sb-entry.other[b-7ov57acdan] { color: #b18cff; }
.app-shell.theme-dark .sb-entry.maternity[b-7ov57acdan] { color: #e0b158; }

.app-shell.theme-dark .sb-entry[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 88%, currentColor 12%);
}

.app-shell.theme-dark .sb-entry:hover[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 82%, currentColor 18%);
}

/* Runs that continue beyond the visible week get a flattened edge */
.sb-entry.continues-left[b-7ov57acdan] {
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}

.sb-entry.continues-right[b-7ov57acdan] {
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
    border-right: 1px dashed color-mix(in srgb, currentColor 58%, transparent);
}

.sb-entry.is-selected[b-7ov57acdan] {
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent),
        0 0 0 1.5px rgba(61, 139, 255, 0.55),
        0 0 12px rgba(61, 139, 255, 0.26);
}

.sb-entry.is-status-board-block-flash[b-7ov57acdan] {
    border-color: #ff3f57;
    color: #ff3f57;
    background:
        linear-gradient(90deg, rgba(255, 63, 87, 0.26), rgba(255, 63, 87, 0.08) 48%, transparent),
        color-mix(in srgb, var(--panel-background) 76%, #ff3f57 24%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 0 1px rgba(255, 63, 87, 0.62),
        0 0 18px rgba(255, 63, 87, 0.38);
    animation: statusBoardBlockFlash-b-7ov57acdan 0.5s ease-in-out 6;
}

.sb-entry.is-status-board-block-flash .sb-entry-name[b-7ov57acdan] {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(255, 63, 87, 0.7);
}

@keyframes statusBoardBlockFlash-b-7ov57acdan {
    0%, 100% {
        transform: translateY(0);
        filter: saturate(1);
    }

    50% {
        transform: translateY(-1px);
        filter: saturate(1.45);
        box-shadow:
            inset 0 1px 0 rgba(255, 255, 255, 0.18),
            0 0 0 2px rgba(255, 63, 87, 0.72),
            0 0 24px rgba(255, 63, 87, 0.58);
    }
}

.sb-entry-main[b-7ov57acdan] {
    display: inline-flex;
    min-width: 0;
    flex: 1 1 auto;
    align-items: center;
    gap: 6px;
    padding: 0;
    border: 0;
    color: var(--primary-text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.sb-entry-name[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sb-entry-main:hover .sb-entry-name[b-7ov57acdan],
.sb-entry-main:focus-visible .sb-entry-name[b-7ov57acdan] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.sb-entry-main:focus-visible[b-7ov57acdan] {
    outline: 2px solid rgba(61, 139, 255, 0.4);
    outline-offset: 2px;
    border-radius: 4px;
}

.sb-entry-meta[b-7ov57acdan] {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
    border-radius: 999px;
    color: color-mix(in srgb, currentColor 52%, var(--primary-text) 48%);
    background: color-mix(in srgb, currentColor 8%, transparent);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.sb-entry-meta:empty[b-7ov57acdan] {
    display: none;
}

.sb-entry .board-clear-x[b-7ov57acdan] {
    width: 18px;
    height: 18px;
    margin-left: 0;
    flex: 0 0 auto;
    font-size: 12px;
}

.sb-entry .board-agency-badge[b-7ov57acdan] {
    flex: 0 0 auto;
}

.sb-entry .status-board-employee-cue[b-7ov57acdan] {
    width: 15px;
    height: 15px;
    font-size: 10px;
}

.absence-board-col[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    padding: 10px;
    border: 0.5px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background) 94%, var(--border-color) 6%);
}

.absence-board-col.is-today[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: inset 0 0 0 1px #1769dc;
}

.absence-board-col header[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding-bottom: 5px;
    border-bottom: 0.5px solid var(--border-color);
}

.absence-board-col header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.absence-board-col header span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
}

.absence-board-col header em[b-7ov57acdan] {
    margin-left: auto;
    color: #d84c5f;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
}

.absence-board-empty[b-7ov57acdan] {
    padding: 8px 0;
    color: #1d9d76;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.absence-board-everyone[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-radius: 8px;
    background: color-mix(in srgb, #1769dc 12%, var(--panel-background) 88%);
}

.absence-board-everyone strong[b-7ov57acdan] {
    color: #1769dc;
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.absence-board-everyone span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
}

.absence-board-toggle svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

@media (max-width: 1150px) {
    .absence-board[b-7ov57acdan] {
        --absence-board-status-column-width: 210px;
    }

    .absence-board-summary[b-7ov57acdan] {
        gap: 7px;
        margin-left: 12px;
    }

    .absence-board-body[b-7ov57acdan] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .absence-board-status-column[b-7ov57acdan] {
        width: var(--absence-board-status-column-width);
    }
}

@media (max-width: 700px) {
    .absence-board-launcher[b-7ov57acdan] {
        padding-right: 74px;
        padding-left: 10px;
    }

    .absence-board-handle-label[b-7ov57acdan] {
        gap: 6px;
    }

    .absence-board-handle-label strong[b-7ov57acdan] {
        font-size: 12px;
    }

    .absence-board-summary[b-7ov57acdan] {
        gap: 5px;
        margin-left: 8px;
        padding: 0 4px;
    }

    .absence-board-summary-indicator[b-7ov57acdan] {
        min-width: 24px;
        gap: 4px;
        font-size: 10px;
    }

    .absence-board-summary-indicator.is-zero[b-7ov57acdan] {
        display: none;
    }
}

@media (max-width: 480px) {
    .absence-board-handle-label[b-7ov57acdan] {
        gap: 5px;
    }

    .absence-board-handle-label svg[b-7ov57acdan] {
        width: 13px;
        height: 13px;
    }

    .absence-board-handle-label strong[b-7ov57acdan] {
        font-size: 11.5px;
    }

    .absence-board-week-range.is-wide[b-7ov57acdan],
    .absence-board-summary-empty .is-wide[b-7ov57acdan] {
        display: none;
    }

    .absence-board-week-range.is-compact[b-7ov57acdan],
    .absence-board-summary-empty .is-compact[b-7ov57acdan] {
        display: inline;
    }

    .absence-board-handle-label small[b-7ov57acdan] {
        font-size: 9.5px;
    }

    .absence-board-summary[b-7ov57acdan] {
        gap: 4px;
        margin-left: 5px;
        padding: 0 2px;
    }

    .absence-board-summary-indicator[b-7ov57acdan] {
        min-width: 21px;
        gap: 3px;
        font-size: 9.5px;
    }

    .absence-board-summary-dot[b-7ov57acdan] {
        width: 5px;
        height: 5px;
    }

    .absence-board-summary-empty[b-7ov57acdan] {
        font-size: 9.5px;
    }
}

/* Fixed Status board needs breathing room so the final table rows remain reachable. */
.manning-page[b-7ov57acdan] {
    padding-bottom: 54px;
}

.manning-page.board-open[b-7ov57acdan] {
    padding-bottom: 46vh;
}

/* Training (manual status) colours */
.absence-cal-chip.type-training[b-7ov57acdan] { color: #0d5c4a; background: #c7efe0; }
.acp-label.training[b-7ov57acdan] { color: #0d5c4a; background: #c7efe0; }
.cal-swatch.training[b-7ov57acdan] { background: #4bc2a3; }

.app-shell.theme-dark .absence-cal-chip.type-training[b-7ov57acdan] {
    color: #7fe6c9;
    background: color-mix(in srgb, #2fa987 30%, #0b1422 70%);
}

/* Manual status section in the employee panel */
.manual-status-options[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 8px;
}

.manual-status[b-7ov57acdan] {
    min-height: 36px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 140ms ease, transform 120ms ease, border-color 140ms ease;
}

.manual-status:hover:not(:disabled)[b-7ov57acdan] { filter: brightness(1.05); }
.manual-status:active:not(:disabled)[b-7ov57acdan] { transform: translateY(1px) scale(0.99); }
.manual-status:disabled[b-7ov57acdan] { opacity: 0.55; cursor: not-allowed; }

.manual-status.training[b-7ov57acdan] { border-color: #4bc2a3; color: #0d5c4a; }
.manual-status.holiday[b-7ov57acdan] { border-color: #7fb2ee; color: #0c447c; }
.manual-status.sick[b-7ov57acdan] { border-color: #e79aa0; color: #791f1f; }
.manual-status.other[b-7ov57acdan] { border-color: #b79fe0; color: #4d3273; }

.manual-status-clear[b-7ov57acdan] {
    width: 100%;
    min-height: 32px;
    border: 1px dashed var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.manual-status-clear:hover:not(:disabled)[b-7ov57acdan] {
    border-color: #d84c5f;
    color: #d84c5f;
}

.manual-status-note[b-7ov57acdan] {
    display: block;
    margin-top: 6px;
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.4;
}

/* Undo (×) on manual Status board entries */
.board-clear-x[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    padding: 0;
    border: 1px solid color-mix(in srgb, #d84c5f 70%, var(--border-color) 30%);
    border-radius: 50%;
    color: #d84c5f;
    background: color-mix(in srgb, #d84c5f 10%, var(--panel-background) 90%);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    animation: board-clear-pulse-b-7ov57acdan 2.4s ease-in-out infinite;
    transition: color 120ms ease, background 120ms ease, border-color 120ms ease, transform 120ms ease;
}

.board-clear-x:hover[b-7ov57acdan] {
    color: #ffffff;
    border-color: #d84c5f;
    background: #d84c5f;
    transform: scale(1.06);
    animation-play-state: paused;
}

.board-clear-x:focus-visible[b-7ov57acdan] {
    outline: 2px solid rgba(216, 76, 95, 0.28);
    outline-offset: 2px;
}

@keyframes board-clear-pulse-b-7ov57acdan {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(216, 76, 95, 0.28);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(216, 76, 95, 0);
    }
}

/* Rebuilt employee panel header */
.employee-panel-header .employee-panel-eyebrow[b-7ov57acdan] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: 0.2px;
    color: var(--primary-text);
    text-transform: none;
}

.employee-panel-close svg[b-7ov57acdan] {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
}

.employee-panel-close[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--secondary-text);
    background: var(--button-background);
    cursor: pointer;
    transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.employee-panel-close:hover[b-7ov57acdan] {
    color: #ffffff;
    border-color: #d84c5f;
    background: #d84c5f;
}

.employee-action-grid.single[b-7ov57acdan] {
    display: block;
}

.employee-action-grid.single .primary-action[b-7ov57acdan] {
    width: 100%;
}

/* Manual "Other" reason + duration form */
.manual-other-form[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background) 92%, #b79fe0 8%);
}

.manual-other-form label[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 11px;
    font-weight: 700;
    color: var(--secondary-text);
}

.manual-other-form select[b-7ov57acdan],
.manual-other-form input[b-7ov57acdan] {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 13px;
    font-family: inherit;
}

.manual-other-duration[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.manual-status-duration-head[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.manual-status-duration-head strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 850;
}

.manual-status-duration-head span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
}

.manual-status-duration-actions[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.manual-other-confirm[b-7ov57acdan] {
    min-height: 38px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: #7a5bb0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.manual-status-cancel[b-7ov57acdan] {
    min-height: 38px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.manual-status-cancel:hover[b-7ov57acdan] {
    background: var(--button-hover);
}

.manual-other-confirm:hover[b-7ov57acdan] { filter: brightness(1.06); }

.hours-editor-note[b-7ov57acdan] {
    display: block;
    margin-top: 6px;
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.4;
}

/* Bigger, clearer week day tiles */
.employee-week-item[b-7ov57acdan] {
    padding: 12px 14px;
    gap: 10px;
}

.employee-week-item .employee-week-day strong[b-7ov57acdan] {
    font-size: 13.5px;
    font-weight: 800;
}

.employee-week-item .employee-week-assignment strong[b-7ov57acdan] {
    font-size: 13px;
}

.employee-week-item .employee-week-assignment span[b-7ov57acdan] {
    font-size: 11.5px;
}

/* Worked-hours emphasis on the planned-week card */
.employee-summary-card strong[b-7ov57acdan] {
    font-size: 14.5px;
}

/* Full-week day tiles in the employee panel */
.employee-day-tiles[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 6px;
}

.employee-day-tile[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 92px;
    padding: 8px 7px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.employee-day-tile:hover[b-7ov57acdan] { transform: translateY(-1px); }

.employee-day-tile.selected[b-7ov57acdan] {
    border-color: #3d8bff;
    box-shadow: 0 0 0 2px #3d8bff, 0 0 10px rgba(61, 139, 255, 0.4);
}

.day-tile-head[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border-color);
}

.day-tile-head strong[b-7ov57acdan] { font-size: 12px; font-weight: 800; text-transform: uppercase; }
.day-tile-head span[b-7ov57acdan] { font-size: 10px; color: var(--secondary-text); font-weight: 600; }

.day-tile-body[b-7ov57acdan] { display: flex; flex-direction: column; gap: 1px; }
.day-tile-body strong[b-7ov57acdan] { font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.day-tile-body span[b-7ov57acdan] { font-size: 10px; color: var(--secondary-text); }
.day-tile-hours[b-7ov57acdan] { font-weight: 700; color: var(--primary-text) !important; }

.day-tile-confirmation[b-7ov57acdan] {
    align-self: flex-start;
    margin-top: 3px;
    padding: 2px 5px;
    border-radius: 999px;
    font-size: 8px !important;
    font-weight: 800;
    line-height: 1;
}

.day-tile-confirmation.pending[b-7ov57acdan] {
    color: #704500;
    background: #fff0ad;
}

.day-tile-confirmation.confirmed[b-7ov57acdan] {
    color: #16603b;
    background: #d7f3e4;
}

.day-tile-status[b-7ov57acdan] {
    align-self: flex-start;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
}

.employee-day-tile.state-training .day-tile-status[b-7ov57acdan] { color: #0d5c4a; background: #c7efe0; }
.employee-day-tile.state-holiday .day-tile-status[b-7ov57acdan] { color: #0c447c; background: #cfe3fb; }
.employee-day-tile.state-sick .day-tile-status[b-7ov57acdan] { color: #791f1f; background: #f8d3d6; }
.employee-day-tile.state-blacklist .day-tile-status[b-7ov57acdan] { color: #ffffff; background: #343a46; }
.employee-day-tile.state-unavailable .day-tile-status[b-7ov57acdan] { color: #5b456f; background: #ebe3f4; }
.employee-day-tile.state-other .day-tile-status[b-7ov57acdan],
.employee-day-tile.state-maternity .day-tile-status[b-7ov57acdan] { color: #4d3273; background: #e6ddf7; }

.day-tile-available[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1d9d76;
    font-size: 11px;
    font-weight: 800;
}

.avail-dot[b-7ov57acdan] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #26c281;
    animation: avail-pulse-b-7ov57acdan 1.5s ease-in-out infinite;
}

@keyframes avail-pulse-b-7ov57acdan {
    0%, 100% { box-shadow: 0 0 0 0 rgba(38, 194, 129, 0.6); }
    50% { box-shadow: 0 0 0 5px rgba(38, 194, 129, 0); }
}

.employee-day-tile.state-available[b-7ov57acdan] {
    border-style: dashed;
    border-color: color-mix(in srgb, #26c281 45%, var(--border-color) 55%);
}

.manual-status.blacklist[b-7ov57acdan] { border-color: #333333; color: var(--primary-text); }
.manual-status.blacklist:hover:not(:disabled)[b-7ov57acdan] { color: #ffffff; background: #333333; }

/* ===== Employee panel refinements (Phase 2/3) ===== */

/* Job-role badge next to Permanent/Agency */
.employee-role-badge[b-7ov57acdan] {
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 78%, #3d8bff 22%);
    border: 1px solid color-mix(in srgb, #3d8bff 40%, var(--border-color) 60%);
}

/* Inline hours in the selected-assignment card */
.inline-hours[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}
.inline-hours > span[b-7ov57acdan] { font-size: 12px; font-weight: 700; color: var(--secondary-text); }
.inline-hours > span small[b-7ov57acdan] { font-weight: 500; }

.inline-hours-row[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.inline-hours-select[b-7ov57acdan] {
    box-sizing: border-box;
    min-width: 72px;
    max-width: 100%;
    flex: 1 1 82px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 16px;
    font-weight: 700;
    font-family: inherit;
}

.inline-hours-dash[b-7ov57acdan] { color: var(--secondary-text); font-weight: 800; }

.inline-hours-apply[b-7ov57acdan] {
    box-sizing: border-box;
    width: 100%;
    margin-top: 2px;
    min-height: 36px;
    border: 1px solid #3d8bff;
    border-radius: 9px;
    color: #1769dc;
    background: color-mix(in srgb, #3d8bff 12%, var(--button-background) 88%);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}

.inline-hours-apply:hover:not(:disabled)[b-7ov57acdan] { filter: brightness(1.05); }
.inline-hours-apply:disabled[b-7ov57acdan] { opacity: 0.5; cursor: not-allowed; }

/* Bigger fonts across the panel cards */
.employee-summary-card span[b-7ov57acdan] { font-size: 11px; }
.employee-summary-card strong[b-7ov57acdan] { font-size: 15px; }
.selected-assignment-card span[b-7ov57acdan] { font-size: 12px; }
.selected-assignment-card strong[b-7ov57acdan] { font-size: 14px; }
.employee-section-heading span[b-7ov57acdan] { font-size: 13.5px; font-weight: 800; }

/* Filled manual-status buttons — readable in light AND dark */
.manual-status[b-7ov57acdan] {
    color: #ffffff;
    border: 0;
    font-weight: 800;
}

.manual-status.training[b-7ov57acdan] { background: #1d9d76; }
.manual-status.holiday[b-7ov57acdan] { background: #2f74c0; }
.manual-status.sick[b-7ov57acdan] { background: #cf4b52; }
.manual-status.other[b-7ov57acdan] { background: #7a5bb0; }
.manual-status.blacklist[b-7ov57acdan] { background: #2b2f36; }

.manual-status:hover:not(:disabled)[b-7ov57acdan] { filter: brightness(1.08); }
.manual-status.active[b-7ov57acdan] { outline: 2px solid #ffffff; outline-offset: -3px; }

.app-shell.theme-dark .manual-status.training[b-7ov57acdan] { background: #17a983; }
.app-shell.theme-dark .manual-status.holiday[b-7ov57acdan] { background: #3a86e0; }
.app-shell.theme-dark .manual-status.sick[b-7ov57acdan] { background: #e05a61; }
.app-shell.theme-dark .manual-status.other[b-7ov57acdan] { background: #8f6bd0; }
.app-shell.theme-dark .manual-status.blacklist[b-7ov57acdan] { background: #3a3f47; }

/* ===== Panel v3 polish ===== */

/* Bigger badges (Permanent / Agency same size as role) */
.employee-type-badge.big[b-7ov57acdan],
.employee-role-badge[b-7ov57acdan] {
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 700;
    border-radius: 999px;
}

/* Two-card summary grid (Site + Planned Week) with room for full text */
.employee-summary-grid.two-cards[b-7ov57acdan] {
    grid-template-columns: 1fr 1.4fr;
}
.employee-summary-grid.two-cards .employee-summary-card strong[b-7ov57acdan] {
    font-size: 15px;
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
}

/* Refined send-to-status buttons: soft gradient, depth, hover lift */
.manual-status[b-7ov57acdan] {
    position: relative;
    color: #ffffff;
    border: 0;
    border-radius: 12px;
    font-weight: 700;
    letter-spacing: 0.2px;
    box-shadow: 0 4px 12px rgba(8, 15, 30, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    overflow: hidden;
    transition: transform 140ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 160ms ease, filter 160ms ease;
}
.manual-status[b-7ov57acdan]::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 55%);
    pointer-events: none;
}
.manual-status:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(8, 15, 30, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    filter: saturate(1.05) brightness(1.03);
}
.manual-status:active:not(:disabled)[b-7ov57acdan] { transform: translateY(0); }

/* Softer, richer colours (gradients) */
.manual-status.training[b-7ov57acdan] { background: linear-gradient(160deg, #2bb389, #17916d); }
.manual-status.holiday[b-7ov57acdan]  { background: linear-gradient(160deg, #4a90d9, #2f6fb8); }
.manual-status.sick[b-7ov57acdan]     { background: linear-gradient(160deg, #e0656b, #c8474e); }
.manual-status.other[b-7ov57acdan]    { background: linear-gradient(160deg, #9a7bd0, #7a5bb0); }
.manual-status.blacklist[b-7ov57acdan]{ background: linear-gradient(160deg, #5a626e, #3a4048); }

.manual-status.active[b-7ov57acdan] { outline: 2px solid #ffffff; outline-offset: -3px; }

.app-shell.theme-dark .manual-status.blacklist[b-7ov57acdan] { background: linear-gradient(160deg, #656d79, #444a53); }

/* Fancy 3D apply-hours button */
.inline-hours-apply[b-7ov57acdan] {
    border: 0;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(160deg, #4a90d9, #2f6fb8);
    box-shadow: 0 4px 12px rgba(47, 111, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    font-weight: 700;
    transition: transform 140ms ease, box-shadow 160ms ease, filter 160ms ease;
}
.inline-hours-apply:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(47, 111, 184, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    filter: brightness(1.04);
}
.inline-hours-apply:active:not(:disabled)[b-7ov57acdan] { transform: translateY(0); }

/* ============================================================
   Employee Details panel — same rail geometry as Available, but with a
   true full-screen backdrop above the app chrome.
   ============================================================ */
.employee-details-panel[b-7ov57acdan] {
    position: fixed;
    top: var(--right-rail-top-offset, 124px);
    right: var(--right-rail-side-offset, 22px);
    bottom: var(--right-rail-bottom-offset, 18px);
    left: auto;
    z-index: 8010;
    width: var(--right-rail-width, clamp(300px, 23vw, 408px));
    max-width: var(--right-rail-width, clamp(300px, 23vw, 408px));
    height: auto;
    transform: none;
}

.employee-panel-backdrop[b-7ov57acdan] {
    position: fixed;
    inset: 0;
    z-index: 8000;
    background: rgba(15, 23, 42, 0.42);
}

/* =====================================================================
   EMPLOYEE DETAILS — visual refresh (icons, full-width Blacklist,
   read-only hours for available people). Appended last so it wins.
   ===================================================================== */

/* ---- Section headings: leading icon chip + title-case bold title ---- */
.employee-section-heading[b-7ov57acdan] {
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
}

.employee-section-heading > span[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.employee-section-heading small[b-7ov57acdan] {
    margin-left: auto;
}

.employee-section-heading .section-icon[b-7ov57acdan] {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border-radius: 8px;
    color: #3d8bff;
    background: color-mix(in srgb, #3d8bff 14%, transparent);
    border: 1px solid color-mix(in srgb, #3d8bff 30%, var(--border-color) 70%);
}

.employee-section-heading .section-icon svg[b-7ov57acdan] {
    width: 15px;
    height: 15px;
}

/* ---- Summary cards: icon on the left, label + value stacked ---- */
.employee-summary-card[b-7ov57acdan] {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
}

.employee-summary-card .summary-card-icon[b-7ov57acdan] {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 9px;
    color: #3d8bff;
    background: color-mix(in srgb, #3d8bff 12%, transparent);
    border: 1px solid color-mix(in srgb, #3d8bff 26%, var(--border-color) 74%);
}

.employee-summary-card .summary-card-icon svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
}

.summary-card-text[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

/* ---- Status buttons: icon + label centred ---- */
.manual-status[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
}

.manual-status .ms-icon[b-7ov57acdan] {
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
}

.manual-status .ms-label[b-7ov57acdan] {
    line-height: 1;
}

/* Blacklist spans the full width on its own row, sitting below the grid */
.manual-status.blacklist[b-7ov57acdan] {
    grid-column: 1 / -1;
    min-height: 40px;
}

.manual-status:disabled[b-7ov57acdan],
.manual-status.training:disabled[b-7ov57acdan],
.manual-status.holiday:disabled[b-7ov57acdan],
.manual-status.sick:disabled[b-7ov57acdan],
.manual-status.other:disabled[b-7ov57acdan],
.manual-status.blacklist:disabled[b-7ov57acdan] {
    border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    color: color-mix(in srgb, var(--secondary-text) 82%, transparent);
    background: color-mix(in srgb, var(--button-background) 72%, #808894 28%);
    box-shadow: none;
    filter: grayscale(0.8) saturate(0.45);
    opacity: 0.58;
    cursor: not-allowed;
}

/* ---- Read-only hours (shown but not editable when Available) ---- */
.inline-hours-select:disabled[b-7ov57acdan] {
    opacity: .6;
    cursor: not-allowed;
    background: color-mix(in srgb, var(--button-background) 82%, transparent);
}

.inline-hours.is-readonly > span small[b-7ov57acdan] {
    color: var(--secondary-text);
}

.inline-hours-hint[b-7ov57acdan] {
    margin-top: 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--secondary-text);
}

/* =====================================================================
   Employee Details compact polish after current visual refresh.
   Keeps the new look, but cleans up the header, identity, assignment card,
   and week-tile hour wrapping.
   ===================================================================== */
.employee-panel-header[b-7ov57acdan] {
    min-height: 64px;
    align-items: center;
    gap: 12px;
}

.employee-panel-title-block[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    width: 100%;
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.employee-panel-header .employee-panel-eyebrow[b-7ov57acdan] {
    flex: 0 0 auto;
    line-height: 1.1;
}

.employee-selected-day-badge[b-7ov57acdan] {
    display: inline-flex;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 26px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 8px;
    border: 1px solid color-mix(in srgb, #3d8bff 42%, var(--border-color) 58%);
    border-radius: 9px;
    color: #2f7df4;
    background: color-mix(in srgb, #3d8bff 8%, var(--panel-background) 92%);
    box-shadow: none;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1;
    white-space: nowrap;
}

.employee-selected-day-badge svg[b-7ov57acdan] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-selected-day-badge span[b-7ov57acdan] {
    min-width: 0;
    overflow: visible;
    color: inherit;
    font: inherit;
    letter-spacing: 0;
    text-transform: none;
    text-overflow: clip;
    white-space: nowrap;
}

.employee-identity[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}

.employee-name-stack[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex: 0 1 auto;
    flex-direction: column;
    align-items: center;
    gap: 7px;
}

.employee-identity.is-agency[b-7ov57acdan] {
    gap: 10px;
}

.employee-identity.is-agency .employee-name-stack[b-7ov57acdan] {
    flex: 0 1 auto;
    align-items: center;
}

.employee-identity.is-agency .employee-badges[b-7ov57acdan] {
    width: 100%;
    justify-content: center;
}

.employee-identity.is-agency .employee-type-badge.big.agency[b-7ov57acdan] {
    min-width: 92px;
}

.employee-name-row[b-7ov57acdan] {
    display: block;
    min-width: 0;
    max-width: 100%;
}

.employee-name-row > strong[b-7ov57acdan] {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: var(--primary-text);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-badges[b-7ov57acdan] {
    display: flex;
    max-width: 100%;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-left: 0;
}

.employee-role-badge[b-7ov57acdan] {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 3px 12px;
    border-radius: 999px;
    text-align: center;
    white-space: nowrap;
}

.selected-assignment-card[b-7ov57acdan] {
    grid-template-columns: minmax(0, 1fr) minmax(176px, 0.95fr);
    column-gap: 14px;
    row-gap: 12px;
    align-items: center;
    padding: 10px;
}

.selected-assignment-card > div[b-7ov57acdan] {
    justify-content: center;
}

.selected-assignment-card span:not(.inline-hours-dash)[b-7ov57acdan] {
    display: none;
}

.selected-assignment-role strong[b-7ov57acdan] {
    font-size: 15px;
    font-weight: 800;
    white-space: normal;
}

.inline-hours[b-7ov57acdan] {
    justify-content: center;
    padding-left: 14px;
    border-left: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.inline-hours-row[b-7ov57acdan] {
    flex-wrap: nowrap;
    justify-content: flex-end;
    gap: 8px;
}

.inline-hours-select[b-7ov57acdan] {
    min-width: 78px;
    max-width: 112px;
    flex: 1 1 88px;
    height: 40px;
    font-size: 14px;
}

.inline-hours-dash[b-7ov57acdan] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--secondary-text);
}

.inline-hours-apply[b-7ov57acdan] {
    grid-column: 1 / -1;
    width: 100%;
    min-height: 38px;
    margin-top: 0;
}

.day-tile-body[b-7ov57acdan] {
    align-items: center;
    gap: 2px;
    text-align: center;
}

.day-tile-hours[b-7ov57acdan] {
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    color: var(--primary-text) !important;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1;
    text-overflow: clip;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .employee-panel-title-block[b-7ov57acdan] {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .employee-selected-day-badge[b-7ov57acdan] {
        font-size: 10.5px;
    }

    .selected-assignment-card[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }

    .inline-hours[b-7ov57acdan] {
        padding-top: 10px;
        padding-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
        border-left: 0;
    }

    .inline-hours-row[b-7ov57acdan] {
        justify-content: stretch;
    }

    .inline-hours-select[b-7ov57acdan] {
        max-width: none;
    }
}

.inline-hours-apply:disabled[b-7ov57acdan] {
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--button-background) 82%, var(--border-color) 18%);
    box-shadow: none;
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
    filter: none;
}

/* Area tab cue for a selected employee assigned in another area. */
.area-tab.has-selected-employee-cue[b-7ov57acdan] {
    padding-left: 34px;
    color: var(--primary-text);
    box-shadow: 0 0 0 1px rgba(23, 105, 220, 0.28), 0 8px 18px rgba(23, 105, 220, 0.12);
}

.area-tab-employee-cue[b-7ov57acdan] {
    position: absolute;
    top: 50%;
    left: 9px;
    display: inline-grid;
    width: 18px;
    height: 18px;
    place-items: center;
    transform: translateY(-50%);
    border: 1px solid rgba(61, 139, 255, 0.72);
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 64%, #58acc0 100%);
    box-shadow: 0 0 0 0 rgba(61, 139, 255, 0.45);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    animation: areaSelectedEmployeeCuePulse-b-7ov57acdan 1.45s ease-in-out infinite;
}

@keyframes areaSelectedEmployeeCuePulse-b-7ov57acdan {
    0%, 100% {
        transform: translateY(-50%) translateX(0) scale(1);
        box-shadow: 0 0 0 0 rgba(61, 139, 255, 0.42), 0 5px 12px rgba(23, 105, 220, 0.18);
    }

    50% {
        transform: translateY(-50%) translateX(3px) scale(1.08);
        box-shadow: 0 0 0 5px rgba(61, 139, 255, 0), 0 7px 16px rgba(23, 105, 220, 0.26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-page.agency-mode .area-tab.has-pending-agency-tbc[b-7ov57acdan],
    .manning-page.agency-mode .area-tab.has-pending-agency-tbc[b-7ov57acdan]::after {
        animation: none;
    }

    .area-tab-employee-cue[b-7ov57acdan] {
        animation: none;
    }
}

.available-rail-count .agency-blacklist-toggle[b-7ov57acdan] {
    position: relative;
    display: inline-grid;
    width: 30px;
    height: 28px;
    margin-left: auto;
    place-items: center;
    border: 1px solid rgba(15, 23, 42, 0.36);
    border-radius: 9px;
    color: #f8fafc;
    background: linear-gradient(145deg, #334155, #0f172a);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.22);
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.available-rail-count .agency-blacklist-toggle:hover[b-7ov57acdan] {
    transform: translateY(-1px);
    filter: brightness(1.12);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.30);
}

.available-rail-count .agency-blacklist-toggle.active[b-7ov57acdan] {
    color: #ffffff;
    background: linear-gradient(145deg, #111827, #020617);
    box-shadow: 0 0 0 2px rgba(71, 85, 105, 0.32), 0 7px 18px rgba(2, 6, 23, 0.34);
}

.agency-blacklist-toggle svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agency-blacklist-toggle > span[b-7ov57acdan] {
    position: absolute;
    top: -6px;
    right: -6px;
    display: grid;
    min-width: 16px;
    height: 16px;
    place-items: center;
    padding: 0 4px;
    border: 2px solid var(--panel-background);
    border-radius: 999px;
    color: #ffffff;
    background: #dc2626;
    font-size: 8px;
    font-weight: 900;
}

.agency-blacklisted-person[b-7ov57acdan] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    border-color: color-mix(in srgb, #334155 42%, var(--border-color) 58%);
    background: linear-gradient(135deg, color-mix(in srgb, #0f172a 7%, var(--panel-background) 93%), var(--panel-background));
    cursor: default;
    flex-wrap: wrap;
    overflow: hidden;
    transition:
        border-color 220ms ease,
        background 220ms ease,
        box-shadow 220ms ease,
        transform 220ms ease;
}

.agency-blacklisted-person:hover[b-7ov57acdan],
.agency-blacklisted-person:focus-within[b-7ov57acdan] {
    z-index: 2;
    border-color: color-mix(in srgb, #475569 68%, var(--border-color) 32%);
    background: linear-gradient(135deg, color-mix(in srgb, #0f172a 12%, var(--panel-background) 88%), var(--panel-background));
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.18);
    transform: translateY(-1px);
}

.agency-blacklisted-person .available-employee-initials[b-7ov57acdan] {
    filter: grayscale(0.72) saturate(0.55);
}

.agency-blacklisted-person .available-employee-copy small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9px;
    font-weight: 700;
}

.agency-blacklist-remove[b-7ov57acdan] {
    display: grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(220, 38, 38, 0.38);
    border-radius: 8px;
    color: #b91c1c;
    background: rgba(254, 226, 226, 0.82);
    font-size: 17px;
    font-weight: 900;
    line-height: 1;
    cursor: pointer;
    transition: transform 140ms ease, background 160ms ease;
}

.agency-blacklist-remove:hover[b-7ov57acdan] {
    transform: scale(1.06);
    background: #fecaca;
}

.agency-blacklist-details[b-7ov57acdan] {
    width: 100%;
    max-height: 0;
    margin-top: -6px;
    padding: 0 10px;
    overflow: hidden;
    border: 0 solid transparent;
    border-radius: 10px;
    color: #e2e8f0;
    background:
        radial-gradient(circle at 88% 12%, rgba(59, 130, 246, 0.22), transparent 42%),
        linear-gradient(145deg, #111827, #020617);
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(-8px) scale(0.985);
    transform-origin: top center;
    transition:
        max-height 340ms cubic-bezier(0.2, 0.8, 0.2, 1),
        margin-top 280ms ease,
        padding 280ms ease,
        border-width 280ms ease,
        opacity 220ms ease,
        transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.agency-blacklisted-person:hover .agency-blacklist-details[b-7ov57acdan],
.agency-blacklisted-person:focus-within .agency-blacklist-details[b-7ov57acdan] {
    max-height: 240px;
    margin-top: 3px;
    padding: 11px;
    border-width: 1px;
    border-color: rgba(148, 163, 184, 0.24);
    opacity: 1;
    transform: translateY(0) scale(1);
}

.agency-blacklist-details-head[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.agency-blacklist-details-head > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.agency-blacklist-details-head strong[b-7ov57acdan] {
    color: #f8fafc;
    font-size: 11px;
    font-weight: 850;
}

.agency-blacklist-details-head span:not(.agency-blacklist-details-icon)[b-7ov57acdan] {
    color: #94a3b8;
    font-size: 8.5px;
    font-weight: 650;
}

.agency-blacklist-details-icon[b-7ov57acdan] {
    display: grid;
    width: 29px;
    height: 29px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(248, 113, 113, 0.36);
    border-radius: 9px;
    color: #fca5a5;
    background: rgba(127, 29, 29, 0.32);
}

.agency-blacklist-details-icon svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.agency-blacklist-details-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px 12px;
    margin: 9px 0 0;
}

.agency-blacklist-details-grid > div[b-7ov57acdan] {
    min-width: 0;
}

.agency-blacklist-details-grid .reason[b-7ov57acdan] {
    grid-column: 1 / -1;
}

.agency-blacklist-details-grid dt[b-7ov57acdan] {
    margin-bottom: 2px;
    color: #94a3b8;
    font-size: 7.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agency-blacklist-details-grid dd[b-7ov57acdan] {
    margin: 0;
    color: #f1f5f9;
    font-size: 9px;
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.manual-status-options.internal-agency-actions .manual-status.training[b-7ov57acdan],
.manual-status-options.internal-agency-actions .manual-status.blacklist[b-7ov57acdan] {
    grid-column: 1 / -1;
    min-height: 46px;
}

@media (prefers-reduced-motion: reduce) {
    .agency-blacklisted-person[b-7ov57acdan],
    .agency-blacklist-details[b-7ov57acdan] {
        transition: none;
    }
}

.manual-status.sick.agency-unavailable[b-7ov57acdan] {
    grid-column: 1 / -1;
    min-height: 46px;
    border: 1px solid #991b1b;
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 48%, #991b1b 100%);
    box-shadow:
        0 7px 18px rgba(185, 28, 28, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
    text-shadow: 0 1px 2px rgba(69, 10, 10, 0.38);
}

.manual-status.sick.agency-unavailable:hover:not(:disabled)[b-7ov57acdan] {
    border-color: #7f1d1d;
    background: linear-gradient(135deg, #f05252 0%, #dc2626 42%, #7f1d1d 100%);
    box-shadow:
        0 10px 24px rgba(185, 28, 28, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.34);
}

.manual-status.sick.agency-unavailable .ms-icon[b-7ov57acdan] {
    filter: drop-shadow(0 1px 1px rgba(69, 10, 10, 0.34));
}

.agency-hours-lock[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    padding: 6px 8px;
    border: 1px solid color-mix(in srgb, #3d8bff 28%, var(--border-color) 72%);
    border-radius: 8px;
    color: color-mix(in srgb, var(--secondary-text) 76%, #1769dc 24%);
    background: color-mix(in srgb, #3d8bff 7%, var(--button-background) 93%);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.3;
}

.agency-hours-lock[b-7ov57acdan]::before {
    content: "🔒";
    flex: 0 0 auto;
    font-size: 11px;
}

/* =====================================================================
   Employee Details v4 — interior-only redesign.
   The fixed rail geometry above remains unchanged.
   ===================================================================== */
.employee-details-v2[b-7ov57acdan] {
    --employee-accent: #2f7df4;
    --employee-card: color-mix(in srgb, var(--button-background) 86%, var(--panel-background) 14%);
    --employee-card-border: color-mix(in srgb, var(--border-color) 84%, transparent);
}

.employee-details-v2.is-agency-worker[b-7ov57acdan] {
    --employee-accent: #b88913;
}

.employee-details-v2.is-external-agency-view[b-7ov57acdan] {
    --employee-accent: #d4555d;
}

.employee-details-v2 .employee-panel-header[b-7ov57acdan] {
    min-height: 76px;
    padding: 11px 14px;
    background:
        radial-gradient(circle at 94% 0%, color-mix(in srgb, var(--employee-accent) 12%, transparent), transparent 45%),
        var(--panel-background);
}

.employee-details-v2 .employee-panel-title-block[b-7ov57acdan] {
    gap: 10px;
}

.employee-week-selector[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    align-items: stretch;
    gap: 4px;
}

.employee-week-selector > button[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    min-height: 31px;
    place-items: center;
    padding: 0;
    border: 1px solid var(--employee-card-border);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--employee-card);
    font: inherit;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, transform 120ms ease;
}

.employee-week-selector > button:hover:not(:disabled)[b-7ov57acdan] {
    border-color: color-mix(in srgb, var(--employee-accent) 60%, var(--border-color));
    background: color-mix(in srgb, var(--employee-accent) 9%, var(--employee-card));
    transform: translateY(-1px);
}

.employee-week-selector .employee-week-selector-date[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 4px 7px;
    color: var(--employee-accent);
    font-size: 10px;
}

.employee-week-selector-date:disabled[b-7ov57acdan] {
    cursor: default;
    opacity: 1;
}

.employee-week-selector-date svg[b-7ov57acdan] {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-week-selector-date > span[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 1px;
}

.employee-week-selector-date small[b-7ov57acdan] {
    max-width: 100%;
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .04em;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.employee-week-selector-date strong[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 9.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-details-v2 .employee-panel-body[b-7ov57acdan] {
    padding: 11px 13px 16px;
    scrollbar-gutter: stable;
}

.employee-profile-card[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: auto minmax(0, 1fr) 92px;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid var(--employee-card-border);
    border-radius: 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--employee-accent) 7%, var(--employee-card)), var(--employee-card));
}

.employee-avatar-wrap[b-7ov57acdan] {
    position: relative;
    flex: 0 0 auto;
}

.employee-details-v2 .employee-initials[b-7ov57acdan] {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(145deg, #314d87, #293060 62%, #4e3f91);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 7px 16px rgba(15, 23, 42, .18);
}

.employee-details-v2.is-agency-worker .employee-initials[b-7ov57acdan] {
    background: linear-gradient(145deg, #48617d, #30405d 62%, #596270);
}

.employee-active-dot[b-7ov57acdan] {
    position: absolute;
    right: 0;
    bottom: 1px;
    width: 10px;
    height: 10px;
    border: 2px solid var(--employee-card);
    border-radius: 50%;
    background: #31bf76;
    box-shadow: 0 0 0 2px color-mix(in srgb, #31bf76 18%, transparent);
}

.employee-details-v2 .employee-name-stack[b-7ov57acdan],
.employee-details-v2 .employee-identity.is-agency .employee-name-stack[b-7ov57acdan] {
    min-width: 0;
    align-items: flex-start;
    gap: 5px;
}

.employee-details-v2 .employee-name-row > strong[b-7ov57acdan] {
    text-align: left;
}

.employee-details-v2 .employee-badges[b-7ov57acdan],
.employee-details-v2 .employee-identity.is-agency .employee-badges[b-7ov57acdan] {
    width: auto;
    justify-content: flex-start;
    gap: 4px;
}

.employee-details-v2 .employee-type-badge[b-7ov57acdan],
.employee-access-badge[b-7ov57acdan] {
    display: inline-flex;
    min-height: 19px;
    align-items: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
}

.employee-access-badge[b-7ov57acdan] {
    border: 1px solid var(--employee-card-border);
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 72%, transparent);
}

.employee-profile-meta[b-7ov57acdan] {
    display: flex;
    color: var(--secondary-text);
    font-size: 9px;
    font-weight: 700;
}

.employee-profile-meta span[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.employee-profile-meta svg[b-7ov57acdan] {
    width: 11px;
    height: 11px;
    fill: none;
    stroke: var(--employee-accent);
    stroke-width: 2;
}

.employee-planned-week-card[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    min-height: 70px;
    place-items: center;
    align-content: center;
    gap: 1px;
    padding: 7px 5px;
    border: 1px solid var(--employee-card-border);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background) 70%, var(--employee-accent) 5%);
    text-align: center;
}

.employee-planned-week-card svg[b-7ov57acdan] {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--employee-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-planned-week-card span[b-7ov57acdan],
.employee-planned-week-card small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 7px;
    font-weight: 700;
}

.employee-planned-week-card strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 16px;
    font-weight: 850;
    line-height: 1.1;
}

.employee-details-v2 .employee-panel-section[b-7ov57acdan] {
    margin-top: 10px;
}

.employee-details-v2 .employee-section-heading[b-7ov57acdan] {
    margin-bottom: 5px;
}

.employee-details-v2 .employee-section-heading .section-icon[b-7ov57acdan] {
    width: 23px;
    height: 23px;
    border-radius: 7px;
    color: var(--employee-accent);
    background: color-mix(in srgb, var(--employee-accent) 10%, transparent);
}

.employee-details-v2 .employee-section-heading > span[b-7ov57acdan] {
    font-size: 12px;
}

.employee-details-v2 .employee-section-heading small[b-7ov57acdan] {
    font-size: 8px;
}

.employee-details-v2 .selected-assignment-card[b-7ov57acdan] {
    border: 1px solid var(--employee-card-border);
    border-radius: 11px;
    background: var(--employee-card);
}

.employee-details-v2 .manual-status-options[b-7ov57acdan] {
    gap: 7px;
}

.employee-details-v2 .manual-status[b-7ov57acdan] {
    min-height: 40px;
    border-radius: 10px;
    font-size: 11px;
}

.employee-details-v2 .employee-read-only-notice[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 9px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #8b95a5 45%, var(--border-color));
    border-radius: 9px;
    color: var(--secondary-text);
    background: color-mix(in srgb, #8b95a5 9%, var(--button-background));
}

.employee-details-v2 .employee-read-only-notice strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 10px;
}

.employee-details-v2 .employee-read-only-notice span[b-7ov57acdan] {
    font-size: 8.5px;
    line-height: 1.35;
}

.employee-details-v2.is-historical-week .selected-assignment-card[b-7ov57acdan],
.employee-details-v2.is-historical-week .manual-status-options[b-7ov57acdan] {
    filter: grayscale(.62) saturate(.55);
}

.employee-details-v2 .employee-day-tiles[b-7ov57acdan] {
    gap: 5px;
}

.employee-details-v2 .employee-day-tile[b-7ov57acdan] {
    min-height: 84px;
    gap: 4px;
    padding: 6px 5px;
    border-radius: 9px;
}

.employee-details-v2 .day-tile-head strong[b-7ov57acdan] {
    font-size: 10px;
}

.employee-details-v2 .day-tile-head span[b-7ov57acdan] {
    font-size: 8px;
}

.employee-details-v2 .day-tile-body strong[b-7ov57acdan] {
    font-size: 9px;
}

.employee-details-v2 .day-tile-body span[b-7ov57acdan],
.employee-details-v2 .day-tile-available[b-7ov57acdan],
.employee-details-v2 .day-tile-status[b-7ov57acdan] {
    font-size: 8px;
}

.employee-insights-grid[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: minmax(0, 1.55fr) minmax(112px, .85fr);
    gap: 7px;
    margin-top: 10px;
}

.employee-insights-grid.agency-only[b-7ov57acdan] {
    grid-template-columns: 1fr;
}

.employee-insight-card[b-7ov57acdan] {
    min-width: 0;
    padding: 8px;
    border: 1px solid var(--employee-card-border);
    border-radius: 11px;
    background: var(--employee-card);
}

.employee-insight-heading[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    margin-bottom: 7px;
}

.employee-insight-heading > span[b-7ov57acdan] {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 5px;
    color: var(--primary-text);
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
}

.employee-insight-heading svg[b-7ov57acdan] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--employee-accent);
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-insight-heading button[b-7ov57acdan] {
    flex: 0 0 auto;
    padding: 3px 5px;
    border: 1px solid var(--employee-card-border);
    border-radius: 6px;
    color: var(--secondary-text);
    background: var(--panel-background);
    font: inherit;
    font-size: 7px;
    font-weight: 800;
    cursor: pointer;
}

.employee-activity-list[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.employee-activity-item[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: start;
    gap: 6px;
}

.employee-activity-icon[b-7ov57acdan] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    color: #2f7df4;
    background: color-mix(in srgb, #2f7df4 12%, transparent);
}

.employee-activity-item.kind-status .employee-activity-icon[b-7ov57acdan] {
    color: #1d9d76;
    background: color-mix(in srgb, #1d9d76 14%, transparent);
}

.employee-activity-item.kind-hours .employee-activity-icon[b-7ov57acdan] {
    color: #8b63ca;
    background: color-mix(in srgb, #8b63ca 14%, transparent);
}

.employee-activity-icon svg[b-7ov57acdan] {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-activity-item > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.employee-activity-item strong[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-activity-item span[b-7ov57acdan],
.employee-activity-item small[b-7ov57acdan] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 7px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.employee-activity-item small[b-7ov57acdan] {
    font-size: 6.5px;
}

.employee-insight-state[b-7ov57acdan] {
    padding: 8px 4px;
    color: var(--secondary-text);
    font-size: 8px;
    line-height: 1.35;
    text-align: center;
}

.employee-insight-state.error[b-7ov57acdan] {
    color: #c64752;
}

.employee-stats-list[b-7ov57acdan] {
    display: flex;
    margin: 0;
    flex-direction: column;
    gap: 6px;
}

.employee-stats-list > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
}

.employee-stats-list dt[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 7px;
    line-height: 1.15;
}

.employee-stats-list dd[b-7ov57acdan] {
    margin: 0;
    color: var(--primary-text);
    font-size: 8px;
    font-weight: 850;
    text-align: right;
    white-space: nowrap;
}

.app-shell.theme-dark .employee-details-v2[b-7ov57acdan] {
    --employee-card: color-mix(in srgb, var(--button-background) 78%, #0d1727 22%);
    --employee-card-border: color-mix(in srgb, var(--border-color) 72%, #7c8da8 28%);
}

.app-shell.theme-dark .employee-profile-card[b-7ov57acdan] {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.app-shell.theme-dark .employee-details-v2.is-historical-week .selected-assignment-card[b-7ov57acdan],
.app-shell.theme-dark .employee-details-v2.is-historical-week .manual-status-options[b-7ov57acdan] {
    opacity: .72;
}

@media (max-width: 600px) {
    .employee-profile-card[b-7ov57acdan] {
        grid-template-columns: auto minmax(0, 1fr) 82px;
    }

    .employee-insights-grid[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   Employee Details v5 — readability, responsive sizing and calm depth.
   ===================================================================== */
.employee-details-v2[b-7ov57acdan] {
    container-type: inline-size;
}

.employee-details-v2 .employee-panel-header[b-7ov57acdan] {
    min-height: 76px;
    align-items: flex-start;
    padding: 9px 12px 10px;
}

.employee-details-v2 .employee-panel-title-block[b-7ov57acdan] {
    display: grid;
    width: 100%;
    grid-template-columns: max-content minmax(0, 1fr);
    align-items: start;
    gap: 8px;
}

.employee-details-v2 .employee-panel-eyebrow[b-7ov57acdan] {
    margin-top: 8px;
    font-size: clamp(17px, 4.6cqi, 19px);
}

.employee-details-v2 .employee-week-selector[b-7ov57acdan] {
    width: 100%;
    grid-template-columns: 27px minmax(0, 1fr) 27px;
    align-self: start;
    gap: 3px;
}

.employee-details-v2 .employee-week-selector > button[b-7ov57acdan] {
    min-height: 34px;
}

.employee-details-v2 .employee-week-selector .employee-week-selector-date[b-7ov57acdan] {
    gap: 5px;
    padding: 4px 6px;
}

.employee-details-v2 .employee-week-selector-date svg[b-7ov57acdan] {
    width: 15px;
    height: 15px;
}

.employee-details-v2 .employee-week-selector-date small[b-7ov57acdan] {
    overflow: visible;
    font-size: clamp(7px, 1.9cqi, 8px);
    text-overflow: clip;
}

.employee-details-v2 .employee-week-selector-date strong[b-7ov57acdan] {
    overflow: visible;
    font-size: clamp(9px, 2.45cqi, 10px);
    text-overflow: clip;
}

.employee-details-v2 .employee-panel-body[b-7ov57acdan] {
    padding: 12px 13px 18px;
}

.employee-details-v2 .employee-profile-card[b-7ov57acdan] {
    min-height: 96px;
    grid-template-columns: auto minmax(0, 1fr) 98px;
    gap: 11px;
    padding: 11px;
}

.employee-details-v2 .employee-initials[b-7ov57acdan] {
    width: 50px;
    height: 50px;
    font-size: 17px;
}

.employee-details-v2 .employee-name-stack[b-7ov57acdan],
.employee-details-v2 .employee-identity.is-agency .employee-name-stack[b-7ov57acdan] {
    gap: 6px;
}

.employee-details-v2 .employee-type-badge[b-7ov57acdan],
.employee-details-v2 .employee-access-badge[b-7ov57acdan] {
    min-height: 22px;
    padding: 3px 9px;
    font-size: clamp(9px, 2.35cqi, 10px);
}

.employee-details-v2 .employee-profile-meta[b-7ov57acdan] {
    font-size: clamp(10px, 2.55cqi, 11px);
}

.employee-details-v2 .employee-profile-meta svg[b-7ov57acdan] {
    width: 13px;
    height: 13px;
}

.employee-details-v2 .employee-planned-week-card[b-7ov57acdan] {
    min-height: 78px;
    gap: 2px;
    padding: 8px 6px;
}

.employee-details-v2 .employee-planned-week-card svg[b-7ov57acdan] {
    width: 18px;
    height: 18px;
}

.employee-details-v2 .employee-planned-week-card span[b-7ov57acdan],
.employee-details-v2 .employee-planned-week-card small[b-7ov57acdan] {
    font-size: clamp(8px, 2.05cqi, 9px);
}

.employee-details-v2 .employee-planned-week-card strong[b-7ov57acdan] {
    font-size: clamp(18px, 4.9cqi, 20px);
}

.employee-details-v2 .manual-status[b-7ov57acdan] {
    min-height: 45px;
    gap: 9px;
    font-size: clamp(11.5px, 3cqi, 12.5px);
}

.employee-details-v2 .manual-status .ms-icon[b-7ov57acdan] {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.employee-details-v2 .employee-day-tiles[b-7ov57acdan] {
    gap: 6px;
}

.employee-details-v2 .employee-day-tile[b-7ov57acdan] {
    min-height: 101px;
    gap: 5px;
    padding: 8px 6px;
}

.employee-details-v2 .day-tile-head strong[b-7ov57acdan] {
    font-size: clamp(10px, 2.65cqi, 11px);
}

.employee-details-v2 .day-tile-head span[b-7ov57acdan] {
    font-size: clamp(8.5px, 2.2cqi, 9px);
}

.employee-details-v2 .day-tile-body[b-7ov57acdan] {
    gap: 2px;
}

.employee-details-v2 .day-tile-body strong[b-7ov57acdan] {
    overflow-wrap: anywhere;
    font-size: clamp(9px, 2.45cqi, 10px);
    line-height: 1.16;
}

.employee-details-v2 .day-tile-body span[b-7ov57acdan],
.employee-details-v2 .day-tile-available[b-7ov57acdan],
.employee-details-v2 .day-tile-status[b-7ov57acdan] {
    font-size: clamp(8px, 2.15cqi, 9px);
}

.employee-details-v2 .day-tile-hours[b-7ov57acdan] {
    font-size: clamp(7.8px, 2.05cqi, 8.6px);
    line-height: 1.1;
}

.employee-details-v2 .employee-insights-grid[b-7ov57acdan] {
    grid-template-columns: minmax(0, 1.42fr) minmax(136px, 1fr);
    gap: 9px;
    margin-top: 12px;
}

.employee-details-v2 .employee-insight-card[b-7ov57acdan] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 128px;
    padding: 10px;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--employee-accent) 8%, transparent);
}

.employee-details-v2 .employee-profile-card[b-7ov57acdan],
.employee-details-v2 .employee-planned-week-card[b-7ov57acdan] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.employee-details-v2 .employee-profile-card[b-7ov57acdan]::before,
.employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before,
.employee-details-v2 .employee-insight-card[b-7ov57acdan]::before {
    position: absolute;
    z-index: -1;
    inset: -55%;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 32% 38%, color-mix(in srgb, var(--employee-accent) 13%, transparent) 0 14%, transparent 42%),
        radial-gradient(circle at 70% 62%, color-mix(in srgb, #7f6bd9 9%, transparent) 0 11%, transparent 38%);
    opacity: .62;
    animation: employee-card-ambient-b-7ov57acdan 11s ease-in-out infinite;
}

.employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before {
    animation-delay: -3s;
}

.employee-details-v2 .employee-insight-card:nth-child(2)[b-7ov57acdan]::before {
    animation-delay: -6s;
}

.employee-details-v2 .employee-profile-card > *[b-7ov57acdan],
.employee-details-v2 .employee-planned-week-card > *[b-7ov57acdan],
.employee-details-v2 .employee-insight-card > *[b-7ov57acdan] {
    position: relative;
    z-index: 1;
}

.employee-details-v2 .employee-insight-heading[b-7ov57acdan] {
    margin-bottom: 9px;
}

.employee-details-v2 .employee-insight-heading > span[b-7ov57acdan] {
    gap: 6px;
    font-size: clamp(10px, 2.7cqi, 11px);
}

.employee-details-v2 .employee-insight-heading svg[b-7ov57acdan] {
    width: 15px;
    height: 15px;
}

.employee-details-v2 .employee-insight-heading button[b-7ov57acdan] {
    padding: 4px 6px;
    font-size: clamp(7.5px, 2cqi, 8px);
}

.employee-details-v2 .employee-activity-list[b-7ov57acdan] {
    gap: 8px;
}

.employee-details-v2 .employee-activity-item[b-7ov57acdan] {
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 7px;
}

.employee-details-v2 .employee-activity-icon[b-7ov57acdan] {
    width: 27px;
    height: 27px;
}

.employee-details-v2 .employee-activity-icon svg[b-7ov57acdan] {
    width: 15px;
    height: 15px;
}

.employee-details-v2 .employee-activity-item strong[b-7ov57acdan] {
    font-size: clamp(9px, 2.4cqi, 10px);
}

.employee-details-v2 .employee-activity-item span[b-7ov57acdan],
.employee-details-v2 .employee-activity-item small[b-7ov57acdan] {
    display: -webkit-box;
    overflow: hidden;
    font-size: clamp(7.5px, 2cqi, 8.5px);
    line-height: 1.3;
    text-overflow: clip;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.employee-details-v2 .employee-activity-item small[b-7ov57acdan] {
    font-size: clamp(7px, 1.85cqi, 8px);
    -webkit-line-clamp: 1;
}

.employee-details-v2 .employee-stats-list[b-7ov57acdan] {
    gap: 8px;
}

.employee-details-v2 .employee-stats-list dt[b-7ov57acdan] {
    font-size: clamp(8px, 2.15cqi, 9px);
}

.employee-details-v2 .employee-stats-list dd[b-7ov57acdan] {
    font-size: clamp(9px, 2.4cqi, 10px);
}

@keyframes employee-card-ambient-b-7ov57acdan {
    0%, 100% {
        transform: translate3d(-4%, -3%, 0) scale(1);
    }

    50% {
        transform: translate3d(6%, 5%, 0) scale(1.05);
    }
}

@container (max-width: 350px) {
    .employee-details-v2 .employee-panel-header[b-7ov57acdan] {
        min-height: 104px;
    }

    .employee-details-v2 .employee-panel-title-block[b-7ov57acdan] {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .employee-details-v2 .employee-panel-eyebrow[b-7ov57acdan] {
        margin-top: 0;
    }

    .employee-details-v2 .employee-profile-card[b-7ov57acdan] {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .employee-details-v2 .employee-planned-week-card[b-7ov57acdan] {
        grid-column: 1 / -1;
        min-height: 58px;
        grid-template-columns: auto 1fr auto;
        column-gap: 7px;
        text-align: left;
    }

    .employee-details-v2 .employee-planned-week-card small[b-7ov57acdan] {
        grid-column: 3;
    }

    .employee-details-v2 .employee-insights-grid[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .employee-details-v2 .employee-profile-card[b-7ov57acdan]::before,
    .employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before,
    .employee-details-v2 .employee-insight-card[b-7ov57acdan]::before {
        animation: none;
    }
}

.blacklist-reason-form textarea[b-7ov57acdan] {
    width: 100%;
    resize: vertical;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    padding: 9px 10px;
    color: var(--primary-text);
    background: var(--input-background);
    font: inherit;
    font-size: 12px;
}

.blacklist-confirm[b-7ov57acdan] {
    border-color: #991b1b;
    color: #ffffff;
    background: linear-gradient(135deg, #dc2626, #991b1b);
}

.acp-row.has-selected-employee-status-cue[b-7ov57acdan] {
    margin: 1px -3px;
    padding: 2px 3px;
    border-radius: 7px;
    background: color-mix(in srgb, #1769dc 10%, transparent);
    box-shadow: inset 0 0 0 1px rgba(23, 105, 220, 0.22);
}

.status-board-employee-cue[b-7ov57acdan] {
    display: inline-grid;
    width: 17px;
    height: 17px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(61, 139, 255, 0.75);
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 64%, #58acc0 100%);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
    pointer-events: none;
    animation: statusBoardEmployeeCuePulse-b-7ov57acdan 1.45s ease-in-out infinite;
}

@keyframes statusBoardEmployeeCuePulse-b-7ov57acdan {
    0%, 100% {
        transform: translateX(0) scale(1);
        box-shadow: 0 0 0 0 rgba(61, 139, 255, 0.42), 0 5px 12px rgba(23, 105, 220, 0.18);
    }

    50% {
        transform: translateX(3px) scale(1.08);
        box-shadow: 0 0 0 5px rgba(61, 139, 255, 0), 0 7px 16px rgba(23, 105, 220, 0.26);
    }
}

@media (prefers-reduced-motion: reduce) {
    .status-board-employee-cue[b-7ov57acdan] {
        animation: none;
    }

    .sb-entry.is-status-board-block-flash[b-7ov57acdan] {
        animation: none;
    }
}

/* =====================================================
   Available rail visual refresh. Size stays controlled by
   --manning-rail-width and existing right-column rules.
   ===================================================== */
.available-rail[b-7ov57acdan] {
    border-color: color-mix(in srgb, var(--border-color) 82%, #3d8bff 18%);
    border-radius: 14px;
    background:
        radial-gradient(circle at 14% 4%, color-mix(in srgb, #3d8bff 10%, transparent) 0 24%, transparent 46%),
        var(--panel-background);
    box-shadow: 0 12px 30px rgba(8, 15, 30, 0.18);
}

.available-rail-header[b-7ov57acdan] {
    align-items: flex-start;
    padding: 18px 18px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.available-rail-eyebrow[b-7ov57acdan] {
    color: #2f7df4;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 1px;
}

.available-rail-title h2[b-7ov57acdan] {
    margin-top: 3px;
    color: var(--primary-text);
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
}

.available-rail-close[b-7ov57acdan] {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--button-background) 78%, transparent);
    font-size: 22px;
    font-weight: 500;
}

.available-rail-tabs[b-7ov57acdan] {
    gap: 4px;
    padding: 0 18px 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.available-rail-tab[b-7ov57acdan] {
    min-height: 48px;
    gap: 8px;
    border-radius: 10px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 88%, var(--border-color) 12%);
    font-size: 14px;
    font-weight: 800;
}

.available-rail-tab svg[b-7ov57acdan] {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.available-rail-tab.active[b-7ov57acdan] {
    border-color: color-mix(in srgb, #3d8bff 70%, var(--border-color) 30%);
    color: #ffffff;
    background: linear-gradient(135deg, #2158d6 0%, #1769dc 62%, #48bfd2 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.available-rail-tab-count[b-7ov57acdan] {
    min-width: 26px;
    padding: 2px 8px;
    color: inherit;
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 13px;
}

.available-rail-tab.active .available-rail-tab-count[b-7ov57acdan] {
    background: rgba(255, 255, 255, 0.22);
}

.available-rail-search[b-7ov57acdan] {
    gap: 7px;
    padding: 10px 18px 0;
}

.available-search-field[b-7ov57acdan] {
    position: relative;
    display: block;
}

.available-search-field svg[b-7ov57acdan] {
    position: absolute;
    top: 50%;
    left: 12px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    fill: none;
    stroke: var(--secondary-text);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

.available-search-field input[b-7ov57acdan] {
    min-height: 40px;
    padding-left: 38px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background) 92%, var(--border-color) 8%);
    font-size: 13px;
}

.available-rail-body[b-7ov57acdan] {
    gap: 9px;
    padding: 12px 18px 12px;
}

.agency-employee-actions[b-7ov57acdan] {
    flex: 0 0 auto;
    padding: 10px 14px 12px;
    overflow: hidden;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 78%, #3d8bff 22%);
    background: color-mix(in srgb, var(--panel-background) 94%, #3d8bff 6%);
}

.agency-employee-action-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.agency-employee-add-trigger[b-7ov57acdan] {
    display: flex;
    width: 100%;
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border: 1px solid color-mix(in srgb, #1769dc 50%, var(--border-color) 50%);
    border-radius: 10px;
    color: var(--primary-text);
    background: linear-gradient(
        135deg,
        color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%),
        color-mix(in srgb, #58acc0 10%, var(--panel-background) 90%));
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.agency-employee-manage-trigger[b-7ov57acdan] {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 48px;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid color-mix(in srgb, #596a85 46%, var(--border-color) 54%);
    border-radius: 10px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 92%, #596a85 8%);
    text-align: left;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.agency-employee-manage-trigger:hover[b-7ov57acdan] {
    border-color: #596a85;
    box-shadow: 0 7px 18px rgba(43, 58, 82, 0.17);
    transform: translateY(-1px);
}

.agency-employee-manage-icon[b-7ov57acdan] {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #44536b, #70839f);
    box-shadow: 0 5px 12px rgba(43, 58, 82, 0.22);
    font-size: 19px;
    line-height: 1;
}

.agency-employee-manage-trigger > span:last-child[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.agency-employee-manage-trigger strong[b-7ov57acdan] {
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agency-employee-manage-trigger small[b-7ov57acdan] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agency-employee-add-trigger:hover[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: 0 7px 18px rgba(23, 105, 220, 0.18);
    transform: translateY(-1px);
}

.agency-employee-add-icon[b-7ov57acdan] {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd, #35a7c7);
    box-shadow: 0 5px 12px rgba(23, 105, 220, 0.25);
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
}

.agency-employee-add-trigger > span:last-child[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
}

.agency-employee-add-trigger strong[b-7ov57acdan] {
    font-size: 12.5px;
    font-weight: 850;
}

.agency-employee-add-trigger small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
}

.agency-employee-add-form[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform-origin: bottom center;
    animation: agency-employee-form-open-b-7ov57acdan 320ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.agency-employee-add-form.closing[b-7ov57acdan] {
    animation: agency-employee-form-close-b-7ov57acdan 240ms ease-in both;
}

.agency-employee-add-header[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.agency-employee-add-header > div[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.agency-employee-add-header span[b-7ov57acdan] {
    color: #1769dc;
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.agency-employee-add-header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 850;
}

.agency-employee-add-header button[b-7ov57acdan] {
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-size: 18px;
    cursor: pointer;
}

.agency-employee-add-fields[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.agency-employee-add-fields label[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.agency-employee-add-fields label > span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
}

.agency-employee-add-fields input[b-7ov57acdan] {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 34px;
    padding: 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--input-background);
    font: inherit;
    font-size: 11.5px;
}

.agency-employee-add-fields input:focus[b-7ov57acdan] {
    border-color: #1769dc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.13);
}

.agency-employee-add-buttons[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}

.agency-employee-add-buttons button[b-7ov57acdan] {
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 11px;
    font-weight: 800;
    cursor: pointer;
}

.agency-employee-add-buttons button.primary[b-7ov57acdan] {
    color: #ffffff;
    border-color: #1769dc;
    background: linear-gradient(135deg, #2158bd, #238ead);
}

.agency-employee-add-buttons button:disabled[b-7ov57acdan],
.agency-employee-add-header button:disabled[b-7ov57acdan] {
    cursor: not-allowed;
    opacity: 0.55;
}

.agency-employee-form-message[b-7ov57acdan] {
    margin-bottom: 8px;
    padding: 7px 9px;
    border-radius: 8px;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.35;
}

.agency-employee-form-message.error[b-7ov57acdan] {
    color: #9f2334;
    border: 1px solid rgba(216, 76, 95, 0.35);
    background: rgba(216, 76, 95, 0.10);
}

.agency-employee-form-message.success[b-7ov57acdan] {
    color: #10704f;
    border: 1px solid rgba(53, 201, 154, 0.35);
    background: rgba(53, 201, 154, 0.11);
    animation: agency-employee-success-in-b-7ov57acdan 240ms ease-out both;
}

.agency-employee-form-message.success.closing[b-7ov57acdan] {
    animation: agency-employee-success-out-b-7ov57acdan 250ms ease-in both;
}

@keyframes agency-employee-form-open-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(24px) scaleY(0.82);
    }

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

@keyframes agency-employee-form-close-b-7ov57acdan {
    from {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }

    to {
        opacity: 0;
        transform: translateY(20px) scaleY(0.84);
    }
}

@keyframes agency-employee-success-in-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

@keyframes agency-employee-success-out-b-7ov57acdan {
    from {
        max-height: 60px;
        margin-bottom: 8px;
        padding-block: 7px;
        opacity: 1;
        transform: translateY(0);
    }

    to {
        max-height: 0;
        margin-bottom: 0;
        padding-block: 0;
        opacity: 0;
        transform: translateY(-5px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .agency-employee-add-form[b-7ov57acdan],
    .agency-employee-add-form.closing[b-7ov57acdan],
    .agency-employee-form-message.success[b-7ov57acdan],
    .agency-employee-form-message.success.closing[b-7ov57acdan] {
        animation: none;
    }
}

@media (max-width: 600px) {
    .agency-employee-add-fields[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }

    .agency-employee-action-grid[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }
}

.agency-employee-manager[b-7ov57acdan] {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    min-height: min(720px, calc(100vh - 130px));
    max-height: calc(100vh - 130px);
    flex-direction: column;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, #3d8bff 24%);
    border-radius: 14px;
    background: var(--panel-background);
    box-shadow: 0 18px 44px rgba(8, 15, 30, 0.28);
    animation: agency-employee-manager-open-b-7ov57acdan 360ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.agency-employee-manager.closing[b-7ov57acdan] {
    animation: agency-employee-manager-close-b-7ov57acdan 280ms ease-in both;
}

.agency-employee-manager-header[b-7ov57acdan] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 16px 13px;
    border-bottom: 1px solid var(--border-color);
    background:
        radial-gradient(circle at 15% 0%, rgba(61, 139, 255, 0.14), transparent 48%),
        var(--panel-background);
}

.agency-employee-manager-header > div[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.agency-employee-manager-header span[b-7ov57acdan] {
    color: #1769dc;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.agency-employee-manager-header h2[b-7ov57acdan] {
    margin: 0;
    color: var(--primary-text);
    font-size: 20px;
    font-weight: 900;
}

.agency-employee-manager-header p[b-7ov57acdan] {
    margin: 0;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
}

.agency-employee-manager-header button[b-7ov57acdan] {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-size: 20px;
    cursor: pointer;
}

.agency-employee-manager-search[b-7ov57acdan] {
    position: relative;
    padding: 11px 14px 7px;
}

.agency-employee-manager-search > span[b-7ov57acdan] {
    position: absolute;
    top: 20px;
    left: 26px;
    z-index: 1;
    color: var(--secondary-text);
    font-size: 15px;
    pointer-events: none;
}

.agency-employee-manager-search input[b-7ov57acdan] {
    box-sizing: border-box;
    width: 100%;
    height: 38px;
    padding: 0 12px 0 34px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-text);
    background: var(--input-background);
    font: inherit;
    font-size: 11.5px;
}

.agency-employee-manager-search input:focus[b-7ov57acdan] {
    border-color: #1769dc;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.13);
}

.agency-employee-manager-summary[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 4px 15px 10px;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 650;
}

.agency-employee-manager-summary span[b-7ov57acdan] {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.agency-employee-manager-summary-left[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 8px;
}

.agency-employee-status-filter[b-7ov57acdan] {
    display: inline-grid;
    grid-template-columns: repeat(3, auto);
    padding: 2px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-background) 88%, var(--border-color) 12%);
}

.agency-employee-status-filter button[b-7ov57acdan] {
    min-height: 22px;
    padding: 0 7px;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 8.5px;
    font-weight: 800;
    cursor: pointer;
    transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.agency-employee-status-filter button.active[b-7ov57acdan] {
    color: #ffffff;
    background: linear-gradient(135deg, #1769dc, #238ead);
    box-shadow: 0 3px 8px rgba(23, 105, 220, 0.22);
}

.agency-employee-status-filter button.blacklisted.active[b-7ov57acdan] {
    background: linear-gradient(135deg, #1f2937, #475569);
    box-shadow: 0 3px 8px rgba(15, 23, 42, 0.24);
}

.agency-employee-manager-summary strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 850;
}

.agency-employee-manager-body[b-7ov57acdan] {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px 14px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.agency-employee-manager-list[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.agency-employee-manager-card[b-7ov57acdan] {
    padding: 8px 9px;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: color-mix(in srgb, var(--panel-background) 96%, #3d8bff 4%);
    box-shadow: 0 5px 13px rgba(8, 15, 30, 0.07);
    cursor: pointer;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.agency-employee-manager-card:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 46%, var(--border-color) 54%);
    transform: translateY(-1px);
}

.agency-employee-manager-card:focus-visible[b-7ov57acdan] {
    outline: 2px solid #1769dc;
    outline-offset: 2px;
}

.agency-employee-manager-card.selected[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow:
        0 0 0 2px rgba(23, 105, 220, 0.13),
        0 9px 22px rgba(23, 105, 220, 0.16);
}

.agency-employee-manager-card.inactive[b-7ov57acdan] {
    opacity: 0.78;
    background: color-mix(in srgb, var(--panel-background) 94%, #64748b 6%);
}

.agency-employee-manager-card.blacklisted[b-7ov57acdan] {
    border-color: color-mix(in srgb, #334155 54%, var(--border-color) 46%);
    background: color-mix(in srgb, var(--panel-background) 90%, #334155 10%);
}

.agency-employee-manager-card.blacklisted:hover[b-7ov57acdan],
.agency-employee-manager-card.blacklisted.selected[b-7ov57acdan] {
    border-color: #334155;
    box-shadow:
        0 0 0 2px rgba(51, 65, 85, 0.14),
        0 9px 22px rgba(15, 23, 42, 0.18);
}

.agency-employee-manager-card.blacklisted .agency-employee-manager-avatar[b-7ov57acdan] {
    background: linear-gradient(135deg, #1f2937, #64748b);
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.24);
}

.agency-employee-manager-person[b-7ov57acdan] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
}

.agency-employee-manager-avatar[b-7ov57acdan] {
    display: inline-flex;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd, #238ead);
    box-shadow: 0 5px 12px rgba(23, 105, 220, 0.22);
    font-size: 10px;
    font-weight: 850;
}

.agency-employee-manager-person > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.agency-employee-manager-person > div strong[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agency-employee-manager-person > div span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 8.5px;
    font-weight: 650;
}

.agency-employee-manager-metrics[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(78px, 0.8fr);
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 74%, transparent 26%);
}

.agency-employee-manager-metrics > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    padding: 0 8px;
}

.agency-employee-manager-metrics > div:first-child[b-7ov57acdan] {
    padding-left: 1px;
}

.agency-employee-manager-metrics > div + div[b-7ov57acdan] {
    border-left: 1px solid color-mix(in srgb, var(--border-color) 84%, #64748b 16%);
}

.agency-employee-manager-metrics span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 7.5px;
    font-weight: 750;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

.agency-employee-manager-metrics strong[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 9px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agency-employee-manager-countdown strong[b-7ov57acdan] {
    color: #10704f;
}

.agency-employee-manager-countdown.warning strong[b-7ov57acdan] {
    color: #8a5600;
}

.agency-employee-manager-countdown.urgent strong[b-7ov57acdan],
.agency-employee-manager-countdown.inactive strong[b-7ov57acdan] {
    color: #a62c3f;
}

.agency-employee-status-chip[b-7ov57acdan] {
    padding: 4px 7px;
    border-radius: 999px;
    color: #10704f;
    background: rgba(53, 201, 154, 0.14);
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.agency-employee-manager-card.inactive .agency-employee-status-chip[b-7ov57acdan] {
    color: #7a4d00;
    background: rgba(224, 165, 58, 0.18);
}

.agency-employee-manager-card.blacklisted .agency-employee-status-chip[b-7ov57acdan] {
    color: #ffffff;
    background: linear-gradient(135deg, #1f2937, #475569);
}

.agency-employee-manager-countdown.blacklisted strong[b-7ov57acdan] {
    color: #334155;
}

.agency-employee-manager-details[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px;
    margin-top: 6px;
}

.agency-employee-manager-details > div[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 1px;
    padding: 4px 7px;
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel-background) 88%, var(--border-color) 12%);
}

.agency-employee-manager-details .wide[b-7ov57acdan] {
    grid-column: 1 / -1;
}

.agency-employee-manager-details span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
}

.agency-employee-manager-details strong[b-7ov57acdan] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 9.5px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agency-employee-manager-activity[b-7ov57acdan] {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    margin-top: 6px;
}

.agency-inactive-countdown[b-7ov57acdan] {
    display: flex;
    min-height: 38px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(53, 201, 154, 0.35);
    border-radius: 9px;
    color: #10704f;
    background: rgba(53, 201, 154, 0.10);
}

.agency-inactive-countdown.warning[b-7ov57acdan] {
    color: #8a5600;
    border-color: rgba(224, 165, 58, 0.45);
    background: rgba(224, 165, 58, 0.12);
}

.agency-inactive-countdown.urgent[b-7ov57acdan],
.agency-inactive-countdown.inactive[b-7ov57acdan] {
    color: #a62c3f;
    border-color: rgba(216, 76, 95, 0.40);
    background: rgba(216, 76, 95, 0.10);
}

.agency-inactive-countdown strong[b-7ov57acdan] {
    font-size: 14px;
    font-weight: 900;
    line-height: 1;
}

.agency-inactive-countdown span[b-7ov57acdan] {
    margin-top: 2px;
    font-size: 7.5px;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
}

.agency-employee-activity-copy[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.agency-employee-activity-copy span[b-7ov57acdan],
.agency-employee-activity-copy small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 8.5px;
    font-weight: 650;
}

.agency-employee-activity-copy strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 9.5px;
    font-weight: 800;
}

.agency-employee-manager-state[b-7ov57acdan] {
    display: flex;
    min-height: 160px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 18px;
    color: var(--secondary-text);
    text-align: center;
}

.agency-employee-manager-state strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
}

.agency-employee-manager-state span[b-7ov57acdan] {
    font-size: 10px;
}

.agency-employee-manager-state.error[b-7ov57acdan] {
    color: #a62c3f;
}

.agency-employee-manager-state button[b-7ov57acdan] {
    min-height: 30px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.agency-employee-manager-action-error[b-7ov57acdan] {
    margin: 0 14px 8px;
    padding: 7px 9px;
    border: 1px solid rgba(216, 76, 95, 0.34);
    border-radius: 8px;
    color: #a62c3f;
    background: rgba(216, 76, 95, 0.10);
    font-size: 10px;
    font-weight: 700;
}

.agency-employee-manager-actions[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
    cursor: default;
    animation: agency-employee-actions-open-b-7ov57acdan 260ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.agency-employee-blacklist-manage-action[b-7ov57acdan] {
    display: flex;
    min-height: 44px;
    grid-column: 1 / -1;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    border: 1px solid #334155;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #1f2937, #475569);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
    transition: transform 160ms ease, box-shadow 160ms ease;
}

.agency-employee-blacklist-manage-action:hover[b-7ov57acdan] {
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(15, 23, 42, 0.24);
}

.agency-employee-blacklist-manage-action > span:first-child[b-7ov57acdan] {
    font-size: 20px;
    line-height: 1;
}

.agency-employee-blacklist-manage-action > span:last-child[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.agency-employee-blacklist-manage-action strong[b-7ov57acdan] {
    font-size: 11px;
    font-weight: 900;
}

.agency-employee-blacklist-manage-action small[b-7ov57acdan] {
    font-size: 8.5px;
    font-weight: 650;
    opacity: 0.82;
}

.agency-employee-secondary-actions[b-7ov57acdan] {
    display: grid;
    gap: 5px;
}

.agency-employee-edit-name-action[b-7ov57acdan] {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid color-mix(in srgb, #1769dc 44%, var(--border-color) 56%);
    border-radius: 8px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.agency-employee-edit-name-action:hover[b-7ov57acdan] {
    color: #ffffff;
    border-color: #1769dc;
    background: #1769dc;
}

.agency-employee-name-editor[b-7ov57acdan] {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
    border: 1px solid color-mix(in srgb, #1769dc 36%, var(--border-color) 64%);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 94%, #1769dc 6%);
}

.agency-employee-name-editor label[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.agency-employee-name-editor label span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 8px;
    font-weight: 750;
}

.agency-employee-name-editor input[b-7ov57acdan] {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--input-background);
    font-size: 10px;
    box-sizing: border-box;
}

.agency-employee-name-editor > div[b-7ov57acdan] {
    display: flex;
    grid-column: 1 / -1;
    justify-content: flex-end;
    gap: 6px;
}

.agency-employee-name-editor button[b-7ov57acdan] {
    min-height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.agency-employee-name-editor button.save[b-7ov57acdan] {
    color: #ffffff;
    border-color: #1769dc;
    background: linear-gradient(135deg, #1769dc, #238ead);
}

.agency-employee-edit-name-action:disabled[b-7ov57acdan],
.agency-employee-name-editor button:disabled[b-7ov57acdan] {
    cursor: wait;
    opacity: 0.58;
}

.agency-employee-status-action[b-7ov57acdan] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 44px;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    overflow: hidden;
    border: 1px solid rgba(53, 201, 154, 0.52);
    border-radius: 9px;
    color: #0e6f4d;
    background: linear-gradient(135deg, rgba(53, 201, 154, 0.17), rgba(53, 201, 154, 0.08));
    text-align: left;
    cursor: pointer;
    animation: agency-active-button-glow-b-7ov57acdan 1.7s ease-in-out infinite;
}

.agency-employee-status-action.inactive[b-7ov57acdan] {
    color: #8a5600;
    border-color: rgba(224, 165, 58, 0.55);
    background: linear-gradient(135deg, rgba(224, 165, 58, 0.18), rgba(224, 165, 58, 0.08));
    animation-name: agency-inactive-button-glow-b-7ov57acdan;
}

.agency-status-action-light[b-7ov57acdan] {
    width: 11px;
    height: 11px;
    flex: 0 0 auto;
    border: 2px solid rgba(255, 255, 255, 0.85);
    border-radius: 50%;
    background: #35c99a;
    box-shadow: 0 0 0 4px rgba(53, 201, 154, 0.17), 0 0 10px rgba(53, 201, 154, 0.60);
}

.agency-employee-status-action.inactive .agency-status-action-light[b-7ov57acdan] {
    background: #e0a53a;
    box-shadow: 0 0 0 4px rgba(224, 165, 58, 0.18), 0 0 10px rgba(224, 165, 58, 0.58);
}

.agency-employee-status-action > span:last-child[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.agency-employee-status-action strong[b-7ov57acdan] {
    font-size: 11px;
    font-weight: 900;
}

.agency-employee-status-action small[b-7ov57acdan] {
    font-size: 8.5px;
    font-weight: 700;
    opacity: 0.82;
}

.agency-employee-remove-action[b-7ov57acdan] {
    min-height: 44px;
    padding: 0 11px;
    border: 1px solid rgba(216, 76, 95, 0.42);
    border-radius: 9px;
    color: #a62c3f;
    background: rgba(216, 76, 95, 0.09);
    font-size: 9.5px;
    font-weight: 850;
    cursor: pointer;
}

.agency-employee-remove-action:hover[b-7ov57acdan] {
    color: #ffffff;
    border-color: #d84c5f;
    background: #d84c5f;
}

.agency-employee-status-action:disabled[b-7ov57acdan],
.agency-employee-remove-action:disabled[b-7ov57acdan] {
    cursor: wait;
    opacity: 0.58;
    animation: none;
}

.agency-employee-remove-confirmation[b-7ov57acdan] {
    display: flex;
    grid-column: 1 / -1;
    flex-direction: column;
    gap: 5px;
    padding: 9px;
    border: 1px solid rgba(216, 76, 95, 0.38);
    border-radius: 9px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 88%, #d84c5f 12%);
    animation: agency-remove-confirmation-open-b-7ov57acdan 220ms ease-out both;
}

.agency-employee-remove-confirmation > strong[b-7ov57acdan] {
    font-size: 11px;
    font-weight: 900;
}

.agency-employee-remove-confirmation > span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.35;
}

.agency-employee-remove-confirmation > div[b-7ov57acdan] {
    display: flex;
    gap: 7px;
    margin-top: 2px;
}

.agency-employee-remove-confirmation button[b-7ov57acdan] {
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 9px;
    font-weight: 850;
    cursor: pointer;
}

.agency-employee-remove-confirmation button.confirm[b-7ov57acdan] {
    color: #ffffff;
    border-color: #d84c5f;
    background: #d84c5f;
}

@keyframes agency-employee-actions-open-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

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

@keyframes agency-active-button-glow-b-7ov57acdan {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(53, 201, 154, 0.24);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(53, 201, 154, 0), 0 0 14px rgba(53, 201, 154, 0.24);
    }
}

@keyframes agency-inactive-button-glow-b-7ov57acdan {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(224, 165, 58, 0.24);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(224, 165, 58, 0), 0 0 14px rgba(224, 165, 58, 0.24);
    }
}

@keyframes agency-remove-confirmation-open-b-7ov57acdan {
    from {
        opacity: 0;
        transform: scaleY(0.86);
        transform-origin: top;
    }

    to {
        opacity: 1;
        transform: scaleY(1);
        transform-origin: top;
    }
}

.agency-employee-manager-spinner[b-7ov57acdan] {
    width: 24px;
    height: 24px;
    border: 3px solid color-mix(in srgb, #1769dc 20%, transparent 80%);
    border-top-color: #1769dc;
    border-radius: 50%;
    animation: agency-employee-manager-spin-b-7ov57acdan 700ms linear infinite;
}

@keyframes agency-employee-manager-open-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateX(34px) scale(0.985);
    }

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

@keyframes agency-employee-manager-close-b-7ov57acdan {
    from {
        opacity: 1;
        transform: translateX(0) scale(1);
    }

    to {
        opacity: 0;
        transform: translateX(34px) scale(0.985);
    }
}

@keyframes agency-employee-manager-spin-b-7ov57acdan {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .agency-employee-manager[b-7ov57acdan],
    .agency-employee-manager.closing[b-7ov57acdan],
    .agency-employee-manager-spinner[b-7ov57acdan],
    .agency-employee-manager-actions[b-7ov57acdan],
    .agency-employee-status-action[b-7ov57acdan],
    .agency-employee-status-action.inactive[b-7ov57acdan],
    .agency-employee-remove-confirmation[b-7ov57acdan] {
        animation: none;
    }
}

.available-rail-count[b-7ov57acdan] {
    align-items: center;
    gap: 10px;
    padding: 2px 0 1px;
}

.available-count-icon[b-7ov57acdan] {
    display: inline-grid;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, #3d8bff 36%, var(--border-color) 64%);
    border-radius: 50%;
    color: #2f7df4;
    background: color-mix(in srgb, #3d8bff 8%, var(--panel-background) 92%);
}

.available-count-icon svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.available-rail-count strong[b-7ov57acdan] {
    color: #2f7df4;
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

.available-rail-count span:not(.available-count-icon)[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
    text-transform: none;
}

.available-employee-list[b-7ov57acdan] {
    gap: 6px;
}

.available-employee-item[b-7ov57acdan] {
    min-height: 66px;
    gap: 12px;
    padding: 9px 12px;
    border-color: color-mix(in srgb, var(--border-color) 84%, transparent);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background) 93%, var(--border-color) 7%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent);
}

.available-employee-item:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, #3d8bff 50%, var(--border-color) 50%);
    box-shadow: 0 8px 16px rgba(8, 15, 30, 0.12);
}

.available-employee-initials[b-7ov57acdan] {
    width: 42px;
    height: 42px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 14px rgba(23, 105, 220, 0.18);
    font-size: 14px;
}

.available-employee-copy[b-7ov57acdan] {
    gap: 5px;
}

.available-employee-copy strong[b-7ov57acdan] {
    font-size: 14px;
    font-weight: 850;
}

.available-day-flags[b-7ov57acdan] {
    gap: 5px;
    margin-top: 0;
}

.available-day-flag[b-7ov57acdan] {
    width: 22px;
    height: 20px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 850;
}

.available-day-flag.free[b-7ov57acdan] {
    border-color: #25c895;
    color: #047857;
    background: color-mix(in srgb, #35c99a 24%, var(--panel-background) 76%);
}

.available-day-flag.busy[b-7ov57acdan] {
    border-color: color-mix(in srgb, var(--border-color) 72%, transparent);
    background: color-mix(in srgb, var(--button-background) 80%, var(--border-color) 20%);
}

.available-employee-badge[b-7ov57acdan] {
    min-width: 46px;
    padding: 4px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 11px;
}

.available-employee-badge.permanent[b-7ov57acdan] {
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 88%, var(--border-color) 12%);
}

.available-rail-footer[b-7ov57acdan] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 18px 14px;
    padding: 11px 12px;
    border: 1px solid color-mix(in srgb, var(--border-color) 84%, transparent);
    border-radius: 9px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 90%, var(--border-color) 10%);
    font-size: 12px;
    line-height: 1.45;
}

.available-footer-icon[b-7ov57acdan] {
    display: inline-grid;
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid #2f7df4;
    border-radius: 50%;
    color: #2f7df4;
    font-size: 15px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 600px) {
    .available-rail-title h2[b-7ov57acdan] {
        font-size: 20px;
    }

    .available-rail-header[b-7ov57acdan],
    .available-rail-body[b-7ov57acdan] {
        padding-inline: 14px;
    }

    .available-rail-tabs[b-7ov57acdan],
    .available-rail-search[b-7ov57acdan] {
        padding-inline: 14px;
    }

    .available-rail-footer[b-7ov57acdan] {
        margin-inline: 14px;
    }
}

/* Available rail compact pass: keep the refreshed look but fit more names. */
.available-rail-header[b-7ov57acdan] {
    padding: 14px 14px 10px;
}

.available-rail-title h2[b-7ov57acdan] {
    font-size: 22px;
}

.available-rail-tabs[b-7ov57acdan] {
    padding: 0 14px 8px;
}

.available-rail-tab[b-7ov57acdan] {
    min-height: 40px;
    gap: 6px;
    font-size: 12.5px;
}

.available-rail-tab svg[b-7ov57acdan] {
    width: 14px;
    height: 14px;
}

.available-rail-tab-count[b-7ov57acdan] {
    min-width: 22px;
    padding: 1px 7px;
    font-size: 11.5px;
}

.available-rail-search[b-7ov57acdan] {
    padding: 8px 14px 0;
}

.available-search-field input[b-7ov57acdan] {
    min-height: 36px;
    font-size: 12px;
}

.available-search-field svg[b-7ov57acdan] {
    width: 14px;
    height: 14px;
}

.available-rail-body[b-7ov57acdan] {
    gap: 7px;
    padding: 10px 14px 12px;
}

.available-rail-count[b-7ov57acdan] {
    gap: 8px;
}

.available-count-icon[b-7ov57acdan] {
    width: 26px;
    height: 26px;
}

.available-count-icon svg[b-7ov57acdan] {
    width: 14px;
    height: 14px;
}

.available-rail-count strong[b-7ov57acdan] {
    font-size: 22px;
}

.available-rail-count span:not(.available-count-icon)[b-7ov57acdan] {
    font-size: 11.5px;
    font-weight: 650;
}

.available-employee-list[b-7ov57acdan] {
    gap: 5px;
}

.available-employee-item[b-7ov57acdan] {
    min-height: 56px;
    gap: 9px;
    padding: 7px 10px;
}

.available-employee-initials[b-7ov57acdan] {
    width: 34px;
    height: 34px;
    font-size: 12px;
}

.available-employee-copy[b-7ov57acdan] {
    gap: 3px;
}

.available-employee-copy strong[b-7ov57acdan] {
    font-size: 12.5px;
    font-weight: 800;
}

.available-day-flags[b-7ov57acdan] {
    gap: 4px;
}

.available-day-flag[b-7ov57acdan] {
    width: 19px;
    height: 17px;
    border-radius: 4px;
    font-size: 9.5px;
    font-weight: 800;
}

.available-employee-badge[b-7ov57acdan] {
    min-width: 40px;
    padding: 3px 8px;
    font-size: 9.5px;
}

/* External agency availability: P = pending, C = confirmed, S = sick. */
.agency-availability-person[b-7ov57acdan] {
    border: 1px solid transparent;
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.agency-availability-person:hover[b-7ov57acdan] {
    transform: translateY(-1px);
}

.agency-availability-person.selected[b-7ov57acdan] {
    border-color: #2478ed;
    box-shadow: 0 0 0 2px rgba(36, 120, 237, 0.17), 0 8px 18px rgba(25, 74, 140, 0.12);
}

.agency-status-flags .available-day-flag[b-7ov57acdan],
.available-day-flag[class*="agency-state-"][b-7ov57acdan] {
    border-width: 1px;
    border-style: solid;
}

.available-day-flag.agency-state-pending[b-7ov57acdan] {
    color: #9a5800;
    background: #fff0c2;
    border-color: #e8aa25;
}

.available-day-flag.agency-state-confirmed[b-7ov57acdan] {
    color: #08734e;
    background: #d9f8e9;
    border-color: #48c99a;
}

.available-day-flag.agency-state-sick[b-7ov57acdan] {
    color: #a92a3a;
    background: #ffe1e5;
    border-color: #ed7686;
}

.available-day-flag.agency-state-pending.assigned-pending[b-7ov57acdan] {
    color: #744000;
    background: #f4bd4f;
    border-color: #bf7600;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.available-day-flag.assigned[b-7ov57acdan] {
    opacity: 0.42;
    filter: saturate(0.65);
}

.agency-availability-calendar-card[b-7ov57acdan] {
    overflow: visible;
}

.agency-availability-calendar-card .absence-calendar-title small[b-7ov57acdan] {
    display: block;
    max-width: 180px;
    margin-top: 2px;
    overflow: hidden;
    color: #52647f;
    font-size: 10px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.agency-availability-calendar-empty[b-7ov57acdan],
.agency-availability-calendar-help[b-7ov57acdan],
.agency-availability-calendar-error[b-7ov57acdan] {
    margin: 8px 12px;
    border-radius: 9px;
    padding: 8px 10px;
    font-size: 10.5px;
    line-height: 1.35;
}

.agency-availability-calendar-empty[b-7ov57acdan],
.agency-availability-calendar-help[b-7ov57acdan] {
    color: #52647f;
    background: rgba(226, 235, 248, 0.58);
}

.agency-availability-calendar-error[b-7ov57acdan] {
    color: #a51f32;
    background: #ffe5e8;
    border: 1px solid #f2a0aa;
}

.agency-availability-calendar-help kbd[b-7ov57acdan] {
    border: 1px solid #aebed3;
    border-bottom-width: 2px;
    border-radius: 4px;
    padding: 0 4px;
    color: #233750;
    background: #fff;
    font: inherit;
    font-weight: 850;
}

.agency-availability-calendar-grid[b-7ov57acdan] {
    user-select: none;
}

.agency-availability-cal-day[b-7ov57acdan] {
    position: relative;
    display: flex;
    min-width: 0;
    min-height: 43px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    border: 1px solid;
    border-radius: 7px;
    padding: 5px 6px;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.agency-availability-cal-day span[b-7ov57acdan] {
    font-size: 9px;
    font-weight: 700;
}

.agency-availability-cal-day strong[b-7ov57acdan] {
    align-self: flex-end;
    font-size: 11px;
    line-height: 1;
}

.agency-availability-cal-day.agency-state-pending[b-7ov57acdan] {
    color: #8c5000;
    background: #fff0bf;
    border-color: #e7a820;
}

.agency-availability-cal-day.agency-state-confirmed[b-7ov57acdan] {
    color: #06734c;
    background: #dcf8ea;
    border-color: #45c693;
}

.agency-availability-cal-day.agency-state-sick[b-7ov57acdan] {
    color: #a32638;
    background: #ffe2e6;
    border-color: #e66e80;
}

.agency-availability-cal-day:not(:disabled):hover[b-7ov57acdan] {
    transform: translateY(-1px);
    box-shadow: 0 4px 9px rgba(31, 60, 99, 0.15);
}

.agency-availability-cal-day.is-today[b-7ov57acdan] {
    box-shadow: inset 0 0 0 2px #1769dc;
}

.agency-availability-cal-day.is-today[b-7ov57acdan]::after {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1769dc;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.75);
    content: "";
}

.agency-availability-cal-day.selected[b-7ov57acdan] {
    z-index: 1;
    border-color: #1769dc;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(23, 105, 220, 0.7), 0 5px 12px rgba(23, 105, 220, 0.22);
}

.agency-availability-cal-day.disabled[b-7ov57acdan] {
    cursor: default;
    opacity: 0.38;
    filter: grayscale(0.5);
}

.agency-availability-legend[b-7ov57acdan] {
    display: flex;
    gap: 9px;
    margin: 9px 12px 12px;
    color: #52647f;
    font-size: 9px;
    font-weight: 700;
}

.agency-availability-legend span[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.agency-availability-legend i[b-7ov57acdan] {
    width: 8px;
    height: 8px;
    border: 1px solid;
    border-radius: 3px;
}

.agency-availability-legend .pending i[b-7ov57acdan] { background: #fff0bf; border-color: #e7a820; }
.agency-availability-legend .confirmed i[b-7ov57acdan] { background: #dcf8ea; border-color: #45c693; }
.agency-availability-legend .sick i[b-7ov57acdan] { background: #ffe2e6; border-color: #e66e80; }

.agency-status-menu-backdrop[b-7ov57acdan] {
    position: fixed;
    z-index: 10990;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    cursor: default;
    background: transparent;
}

.agency-status-menu[b-7ov57acdan] {
    position: fixed;
    z-index: 11000;
    display: flex;
    width: 196px;
    flex-direction: column;
    gap: 5px;
    border: 1px solid #b8c7da;
    border-radius: 12px;
    padding: 8px;
    color: #203149;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 38px rgba(28, 48, 77, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
    backdrop-filter: blur(12px);
    animation: agency-status-menu-in-b-7ov57acdan 150ms ease-out both;
}

.agency-status-menu-title[b-7ov57acdan] {
    padding: 2px 5px 4px;
    color: #64758d;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agency-status-menu-option[b-7ov57acdan] {
    display: grid;
    min-height: 37px;
    grid-template-columns: 25px 1fr 18px;
    align-items: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 5px 8px;
    cursor: pointer;
    text-align: left;
    transition: transform 130ms ease, box-shadow 130ms ease, border-color 130ms ease;
}

.agency-status-menu-option > span[b-7ov57acdan] {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
}

.agency-status-menu-option strong[b-7ov57acdan] {
    font-size: 11.5px;
    font-weight: 800;
}

.agency-status-menu-option i[b-7ov57acdan] {
    font-style: normal;
    font-weight: 900;
    text-align: center;
}

.agency-status-menu-option.agency-state-pending[b-7ov57acdan] {
    color: #8c5000;
    background: #fff4d2;
    border-color: #edc464;
}

.agency-status-menu-option.agency-state-confirmed[b-7ov57acdan] {
    color: #08734e;
    background: #e2f9ed;
    border-color: #76d4af;
}

.agency-status-menu-option.agency-state-sick[b-7ov57acdan] {
    color: #a32638;
    background: #ffe8eb;
    border-color: #ee98a4;
}

.agency-status-menu-option:not(:disabled):hover[b-7ov57acdan] {
    transform: translateX(2px);
    box-shadow: 0 4px 10px rgba(35, 55, 82, 0.12);
}

.agency-status-menu-option.current[b-7ov57acdan] {
    border-width: 2px;
    cursor: default;
}

.agency-status-menu-option:disabled[b-7ov57acdan] {
    opacity: 0.72;
}

@keyframes agency-status-menu-in-b-7ov57acdan {
    from { opacity: 0; transform: translateY(-5px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === Focus target flash for Manning navigation === */
.manning-assignment-cell.deep-link-flash[b-7ov57acdan] {
    animation: deep-link-flash-b-7ov57acdan 1.1s ease-in-out 3;
    position: relative;
    z-index: 2;
}

@keyframes deep-link-flash-b-7ov57acdan {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(23, 105, 220, 0); background: transparent; }
    45% { box-shadow: inset 0 0 0 3px rgba(23, 105, 220, 0.65); background: rgba(23, 105, 220, 0.12); }
}

@media (prefers-reduced-motion: reduce) {
    .manning-assignment-cell.deep-link-flash[b-7ov57acdan] {
        animation: none;
        box-shadow: inset 0 0 0 3px rgba(23, 105, 220, 0.55);
    }
}

/* ============================================================
   Weekly Manning - cell interaction system v2
   Replaces outline-based selection (3px rings + infinite glow)
   with an INK-FILL system:
     hover     -> soft tinted lift
     selected  -> filled cell + left accent bar + one-shot pop
     multi     -> the same fill, so a block reads as one region
     focus     -> brand ring (kills the browser's black outline)
   Works the same for empty (internal) and staffed (external)
   cells, in both themes.
   ============================================================ */

.manning-table-container[b-7ov57acdan],
.day-lines-grid[b-7ov57acdan] {
    --cell-accent: #1769dc;
    --cell-accent-soft: rgba(23, 105, 220, 0.16);
    --cell-fill-top: rgba(61, 139, 255, 0.20);
    --cell-fill-bottom: rgba(61, 139, 255, 0.09);
    --cell-ring: rgba(23, 105, 220, 0.34);
}

.app-shell.theme-dark .manning-table-container[b-7ov57acdan],
.app-shell.theme-dark .day-lines-grid[b-7ov57acdan] {
    --cell-accent: #58d1e4;
    --cell-accent-soft: rgba(88, 209, 228, 0.18);
    --cell-fill-top: rgba(88, 209, 228, 0.22);
    --cell-fill-bottom: rgba(31, 159, 237, 0.10);
    --cell-ring: rgba(88, 209, 228, 0.36);
}

/* --- 0. No black focus rings, anywhere ---------------------- */

.manning-cell-button:focus[b-7ov57acdan],
.empty-assignment:focus[b-7ov57acdan],
.day-empty-assignment:focus[b-7ov57acdan],
.employee-assignment:focus[b-7ov57acdan] {
    outline: none !important;
}

.manning-cell-button:focus-visible[b-7ov57acdan],
.empty-assignment:focus-visible[b-7ov57acdan],
.day-empty-assignment:focus-visible[b-7ov57acdan],
.employee-assignment:focus-visible[b-7ov57acdan] {
    outline: none !important;
    box-shadow:
        inset 0 0 0 1.5px var(--cell-accent),
        0 0 0 3px var(--cell-accent-soft) !important;
}

/* --- 1. Hover ----------------------------------------------- */

.empty-assignment:hover[b-7ov57acdan],
.day-empty-assignment:hover[b-7ov57acdan] {
    border-color: transparent;
    color: var(--cell-accent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--cell-accent) 12%, transparent),
        color-mix(in srgb, var(--cell-accent) 5%, transparent));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cell-accent) 34%, transparent),
        0 4px 10px color-mix(in srgb, var(--cell-accent) 12%, transparent);
    transform: translateY(-1px);
}

.employee-assignment:hover[b-7ov57acdan] {
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--cell-accent) 40%, transparent),
        0 6px 14px rgba(20, 44, 78, 0.14) !important;
    transform: translateY(-1px);
}

.manning-cell-button[b-7ov57acdan],
.empty-assignment[b-7ov57acdan],
.day-empty-assignment[b-7ov57acdan],
.employee-assignment[b-7ov57acdan] {
    transition:
        background 170ms ease,
        border-color 170ms ease,
        box-shadow 190ms ease,
        color 170ms ease,
        transform 190ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

/* --- 2. Selection: ink fill, no outline --------------------- */

.manning-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
.manning-assignment-cell.cell-selected .empty-assignment.tbc[b-7ov57acdan],
.manning-assignment-cell.batch-cell-selected .empty-assignment[b-7ov57acdan],
.manning-assignment-cell.batch-cell-selected .empty-assignment.tbc[b-7ov57acdan],
.day-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
.day-assignment-cell.cell-selected .day-empty-assignment[b-7ov57acdan],
.day-assignment-cell.cell-selected .day-empty-assignment.tbc[b-7ov57acdan] {
    outline: none !important;
    border-color: transparent !important;
    color: var(--cell-accent);
    background:
        linear-gradient(115deg,
            transparent 38%,
            color-mix(in srgb, var(--cell-accent) 12%, transparent) 50%,
            transparent 62%),
        linear-gradient(180deg, var(--cell-fill-top), var(--cell-fill-bottom));
    background-size: 260% 100%, 100% 100%;
    background-position: 150% 0, 0 0;
    box-shadow:
        inset 3px 0 0 0 var(--cell-accent),
        inset 0 0 0 1px var(--cell-ring),
        0 3px 10px color-mix(in srgb, var(--cell-accent) 16%, transparent) !important;
    animation:
        cellSelectPop-b-7ov57acdan 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both,
        cellSelectSheen-b-7ov57acdan 4.2s ease-in-out 240ms infinite !important;
}

/* Staffed cells keep their own colour, but gain the same language. */
.assignment.permanent.employee-assignment.selected[b-7ov57acdan],
.assignment.agency.employee-assignment.selected[b-7ov57acdan],
.assignment.permanent.employee-assignment.batch-selected[b-7ov57acdan],
.assignment.agency.employee-assignment.batch-selected[b-7ov57acdan] {
    z-index: 3;
    outline: none !important;
    border: 1px solid color-mix(in srgb, var(--cell-accent) 72%, transparent) !important;
    background-image: linear-gradient(180deg,
        rgba(255, 255, 255, 0.30) 0%,
        color-mix(in srgb, var(--cell-accent) 12%, transparent) 100%) !important;
    box-shadow:
        inset 3px 0 0 0 var(--cell-accent),
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        0 7px 18px color-mix(in srgb, var(--cell-accent) 24%, transparent) !important;
    transform: translateY(-1px);
    animation: cellSelectPop-b-7ov57acdan 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}

/* Selected table cell: a calm wash so a multi-selection reads as one block. */
.manning-assignment-cell.cell-selected[b-7ov57acdan],
.manning-assignment-cell.batch-cell-selected[b-7ov57acdan],
.day-assignment-cell.cell-selected[b-7ov57acdan],
.manning-assignment-cell:has(.batch-selected)[b-7ov57acdan],
.day-assignment-cell:has(.batch-selected)[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 90%, var(--cell-accent) 10%);
}

.manning-assignment-cell.batch-cell-selected[b-7ov57acdan] {
    z-index: 2;
    box-shadow: none;
}

.day-assignment-cell.cell-selected[b-7ov57acdan] {
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel-background) 90%, var(--cell-accent) 10%);
    box-shadow: none;
    animation: none;
}

/* --- 3. Drag / range preview: lighter version of selection --- */

.manning-cell-button.selection-preview[b-7ov57acdan],
.employee-assignment.selection-preview[b-7ov57acdan],
.assignment.permanent.employee-assignment.selection-preview[b-7ov57acdan],
.assignment.agency.employee-assignment.selection-preview[b-7ov57acdan] {
    outline: none !important;
    border-color: color-mix(in srgb, var(--cell-accent) 45%, transparent) !important;
    background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--cell-accent) 12%, transparent),
        color-mix(in srgb, var(--cell-accent) 5%, transparent)) !important;
    box-shadow:
        inset 2px 0 0 0 color-mix(in srgb, var(--cell-accent) 60%, transparent),
        inset 0 0 0 1px color-mix(in srgb, var(--cell-accent) 22%, transparent) !important;
    filter: none;
    animation: none !important;
}

/* --- 4. Keyframes ------------------------------------------- */

@keyframes cellSelectPop-b-7ov57acdan {
    from {
        transform: scale(0.975);
    }

    60% {
        transform: scale(1.012);
    }

    to {
        transform: scale(1);
    }
}

@keyframes cellSelectSheen-b-7ov57acdan {
    0%, 70% {
        background-position: 150% 0, 0 0;
    }

    100% {
        background-position: -60% 0, 0 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
    .manning-assignment-cell.batch-cell-selected .empty-assignment[b-7ov57acdan],
    .day-assignment-cell.cell-selected .empty-assignment[b-7ov57acdan],
    .assignment.permanent.employee-assignment.selected[b-7ov57acdan],
    .assignment.agency.employee-assignment.selected[b-7ov57acdan],
    .assignment.permanent.employee-assignment.batch-selected[b-7ov57acdan],
    .assignment.agency.employee-assignment.batch-selected[b-7ov57acdan],
    .empty-assignment:hover[b-7ov57acdan],
    .employee-assignment:hover[b-7ov57acdan] {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Area tabs v2 + search field
     - identical layout for internal and agency mode
     - F1..F12 shortcut chips always sit in the TOP-RIGHT corner
     - labels optically centred in the tab
     - the "employee is over here" arrow cue redrawn as a chevron
     - search field enlarged and given a real presence
   ============================================================ */

.area-tabs[b-7ov57acdan] {
    gap: 5px;
    padding: 4px;
    border-radius: 12px;
    box-shadow:
        0 4px 14px var(--shadow-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.app-shell.theme-dark .area-tabs[b-7ov57acdan] {
    border-color: rgba(111, 199, 199, 0.16);
    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.area-tab[b-7ov57acdan] {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 8px 30px 8px 14px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 750;
    letter-spacing: -0.05px;
    transition:
        color 160ms ease,
        background 160ms ease,
        box-shadow 180ms ease,
        transform 180ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.area-tab-label[b-7ov57acdan] {
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.15;
}

/* Shortcut chip: keycap style, always top-right, both modes. */
.area-tab-shortcut[b-7ov57acdan],
.manning-page.agency-mode .area-tab-shortcut[b-7ov57acdan],
.manning-page.agency-mode .area-tab.has-pending-agency-tbc .area-tab-shortcut[b-7ov57acdan] {
    top: 4px;
    right: 4px;
    left: auto;
    min-width: 20px;
    height: 15px;
    padding: 0 4px;
    border: 1px solid color-mix(in srgb, var(--secondary-text) 26%, transparent);
    border-radius: 5px;
    color: color-mix(in srgb, var(--secondary-text) 92%, transparent);
    background: color-mix(in srgb, var(--panel-background) 88%, var(--secondary-text) 12%);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--secondary-text) 22%, transparent);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: 0.3px;
    opacity: 0.72;
    transition: opacity 160ms ease, color 160ms ease, background 160ms ease, border-color 160ms ease;
}

.area-tab:hover .area-tab-shortcut[b-7ov57acdan] {
    opacity: 1;
}

.area-tab.active .area-tab-shortcut[b-7ov57acdan],
.manning-page.agency-mode .area-tab.has-pending-agency-tbc.active .area-tab-shortcut[b-7ov57acdan] {
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.45);
    background: rgba(255, 255, 255, 0.20);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.12);
    opacity: 1;
}

.area-tab:hover[b-7ov57acdan] {
    color: var(--primary-text);
    background: linear-gradient(180deg,
        color-mix(in srgb, #1769dc 10%, transparent),
        color-mix(in srgb, #1769dc 5%, transparent));
    box-shadow:
        inset 0 0 0 1px rgba(23, 105, 220, 0.18),
        0 6px 16px rgba(23, 105, 220, 0.12);
    transform: translateY(-1px);
}

.area-tab.active[b-7ov57acdan] {
    color: #ffffff;
    background: linear-gradient(135deg, #1f4fae 0%, #1769dc 55%, #2f9fd0 100%);
    box-shadow:
        0 10px 22px rgba(23, 105, 220, 0.26),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.app-shell.theme-dark .area-tab.active[b-7ov57acdan] {
    background: linear-gradient(135deg, #17539f 0%, #1f7fd0 58%, #3fb6cf 100%);
    box-shadow:
        0 10px 24px rgba(0, 0, 0, 0.36),
        0 0 18px rgba(88, 209, 228, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

/* Employee cue: a chevron that leans toward the tab, not a pulsing bubble. */
.area-tab.has-selected-employee-cue[b-7ov57acdan] {
    padding-left: 30px;
}

.area-tab-employee-cue[b-7ov57acdan] {
    left: 8px;
    width: 17px;
    height: 17px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #1f4fae 0%, #2f9fd0 100%);
    box-shadow: 0 3px 8px rgba(23, 105, 220, 0.32);
    font-size: 10px;
    animation: areaCueNudge-b-7ov57acdan 2.4s cubic-bezier(0.45, 0, 0.35, 1) infinite;
}

.area-tab.active .area-tab-employee-cue[b-7ov57acdan] {
    background: rgba(255, 255, 255, 0.22);
    box-shadow: none;
}

@keyframes areaCueNudge-b-7ov57acdan {
    0%, 62%, 100% {
        transform: translateY(-50%) translateX(0);
    }

    72% {
        transform: translateY(-50%) translateX(3px);
    }

    82% {
        transform: translateY(-50%) translateX(0);
    }
}

/* --- Search field ------------------------------------------- */

.manning-search[b-7ov57acdan] {
    min-width: 220px;
    max-width: 340px;
    flex: 1 1 260px;
    min-height: 40px;
    gap: 8px;
    padding: 0 12px;
    border-radius: 11px;
    box-shadow:
        0 3px 10px var(--shadow-color),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.app-shell.theme-dark .manning-search[b-7ov57acdan] {
    border-color: rgba(111, 199, 199, 0.18);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.manning-search-icon[b-7ov57acdan] {
    width: 16px;
    height: 16px;
}

.manning-search-input[b-7ov57acdan] {
    font-size: 13px;
    font-weight: 650;
}

.manning-search-input[b-7ov57acdan]::placeholder {
    font-size: 12.5px;
    opacity: 0.75;
}

.manning-search:focus-within[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow:
        0 0 0 3px rgba(23, 105, 220, 0.16),
        0 6px 16px rgba(23, 105, 220, 0.12);
}

.app-shell.theme-dark .manning-search:focus-within[b-7ov57acdan] {
    border-color: rgba(88, 209, 228, 0.7);
    box-shadow:
        0 0 0 3px rgba(88, 209, 228, 0.16),
        0 8px 18px rgba(0, 0, 0, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .area-tab-employee-cue[b-7ov57acdan],
    .area-tab[b-7ov57acdan] {
        animation: none !important;
        transform: none !important;
    }
}

/* ============================================================
   Round 3: delete motion, landing pads, pending legibility,
   and a livelier area-tab cue.
   ============================================================ */

/* --- 1. Delete: staggered dissolve --------------------------- */

.manning-deleting[b-7ov57acdan] {
    z-index: 5;
    pointer-events: none;
    transform-origin: center;
    animation: manningDelete-b-7ov57acdan 300ms cubic-bezier(0.4, 0, 0.6, 1) var(--delete-delay, 0ms) both !important;
}

@keyframes manningDelete-b-7ov57acdan {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }

    22% {
        opacity: 1;
        transform: scale(1.035);
        box-shadow:
            inset 0 0 0 1px rgba(216, 76, 95, 0.85),
            0 6px 18px rgba(216, 76, 95, 0.30);
        filter: saturate(0.7);
    }

    100% {
        opacity: 0;
        transform: scale(0.82) translateY(4px);
        filter: saturate(0) blur(2.5px);
    }
}

/* --- 2. Armed employee: free days become landing pads -------- */

.empty-assignment.armed-target[b-7ov57acdan],
.day-empty-assignment.armed-target[b-7ov57acdan] {
    position: relative;
    color: #148f66 !important;
    border: 1px solid transparent !important;
    background:
        linear-gradient(115deg,
            transparent 40%,
            rgba(53, 201, 154, 0.20) 50%,
            transparent 60%),
        linear-gradient(180deg,
            rgba(53, 201, 154, 0.16),
            rgba(53, 201, 154, 0.07)) !important;
    background-size: 260% 100%, 100% 100% !important;
    background-position: 150% 0, 0 0 !important;
    box-shadow:
        inset 0 0 0 1px rgba(20, 143, 102, 0.30),
        inset 0 -2px 0 0 rgba(20, 143, 102, 0.28),
        0 3px 10px rgba(20, 143, 102, 0.10) !important;
    font-weight: 800;
    animation: armedTargetSweep-b-7ov57acdan 2.8s ease-in-out infinite !important;
}

.app-shell.theme-dark .empty-assignment.armed-target[b-7ov57acdan],
.app-shell.theme-dark .day-empty-assignment.armed-target[b-7ov57acdan] {
    color: #6ff0bc !important;
    background:
        linear-gradient(115deg,
            transparent 40%,
            rgba(53, 209, 138, 0.26) 50%,
            transparent 60%),
        linear-gradient(180deg,
            rgba(53, 209, 138, 0.20),
            rgba(53, 209, 138, 0.07)) !important;
    background-size: 260% 100%, 100% 100% !important;
    box-shadow:
        inset 0 0 0 1px rgba(111, 240, 188, 0.32),
        inset 0 -2px 0 0 rgba(111, 240, 188, 0.34),
        0 4px 12px rgba(0, 0, 0, 0.28) !important;
}

.empty-assignment.armed-target:hover[b-7ov57acdan],
.day-empty-assignment.armed-target:hover[b-7ov57acdan] {
    transform: translateY(-2px);
    box-shadow:
        inset 0 0 0 1.5px rgba(20, 143, 102, 0.55),
        inset 0 -2px 0 0 rgba(20, 143, 102, 0.5),
        0 8px 18px rgba(20, 143, 102, 0.22) !important;
}

@keyframes armedTargetSweep-b-7ov57acdan {
    0%, 62% {
        background-position: 150% 0, 0 0;
    }

    100% {
        background-position: -60% 0, 0 0;
    }
}

/* --- 3. Pending (awaiting confirmation): readable in both themes */

.assignment.agency.awaiting-confirmation[b-7ov57acdan] {
    border: 1px solid rgba(224, 165, 58, 0.85) !important;
    border-style: solid !important;
    color: #5a3c07 !important;
    background-color: color-mix(in srgb, #f2c94c 34%, var(--panel-background) 66%) !important;
    background-image:
        repeating-linear-gradient(-45deg,
            transparent 0 7px,
            rgba(255, 255, 255, 0.30) 7px 9px) !important;
    box-shadow:
        inset 4px 0 0 0 #e0a53a,
        inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;
    font-weight: 800;
}

.app-shell.theme-dark .assignment.agency.awaiting-confirmation[b-7ov57acdan] {
    color: #ffe6ad !important;
    border-color: rgba(240, 190, 92, 0.7) !important;
    background-color: rgba(122, 84, 20, 0.55) !important;
    background-image:
        repeating-linear-gradient(-45deg,
            transparent 0 7px,
            rgba(255, 214, 130, 0.13) 7px 9px) !important;
    box-shadow:
        inset 4px 0 0 0 #f0be5c,
        inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
}

.confirmation-badge[b-7ov57acdan] {
    left: 4px;
    bottom: 2px;
    padding: 0 4px;
    border-radius: 4px;
    color: #5a3c07;
    background: #ffe9a8;
    box-shadow: 0 1px 3px rgba(90, 60, 7, 0.28);
    font-size: 7.5px;
    letter-spacing: 0.2px;
}

.app-shell.theme-dark .confirmation-badge[b-7ov57acdan] {
    color: #3a2703;
    background: #f5c96a;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}

/* --- 4. Area tab cue: bigger, with a clear direction --------- */

.area-tab.has-selected-employee-cue[b-7ov57acdan] {
    padding-left: 36px;
}

.area-tab-employee-cue[b-7ov57acdan] {
    left: 8px;
    width: 22px;
    height: 22px;
    border-radius: 7px;
    color: #ffffff;
    background: linear-gradient(135deg, #1f4fae 0%, #1769dc 55%, #35c99a 100%);
    box-shadow:
        0 4px 12px rgba(23, 105, 220, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.32);
    font-size: 13px;
    font-weight: 900;
    animation: areaCuePush-b-7ov57acdan 1.9s cubic-bezier(0.4, 0, 0.3, 1) infinite !important;
}

.area-tab.active .area-tab-employee-cue[b-7ov57acdan] {
    background: rgba(255, 255, 255, 0.24);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}

@keyframes areaCuePush-b-7ov57acdan {
    0%, 48%, 100% {
        transform: translateY(-50%) translateX(0) scale(1);
        box-shadow:
            0 4px 12px rgba(23, 105, 220, 0.34),
            0 0 0 0 rgba(53, 201, 154, 0.45);
    }

    62% {
        transform: translateY(-50%) translateX(4px) scale(1.12);
        box-shadow:
            0 6px 16px rgba(23, 105, 220, 0.46),
            0 0 0 6px rgba(53, 201, 154, 0);
    }

    78% {
        transform: translateY(-50%) translateX(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-deleting[b-7ov57acdan],
    .empty-assignment.armed-target[b-7ov57acdan],
    .day-empty-assignment.armed-target[b-7ov57acdan],
    .area-tab-employee-cue[b-7ov57acdan] {
        animation: none !important;
    }

    .manning-deleting[b-7ov57acdan] {
        opacity: 0;
    }
}

/* ============================================================
   Fixes: keep deleted cells hidden until Blazor re-renders,
   and make selection visible on Pending (agency) cells, whose
   amber !important styling was swallowing the selection.
   ============================================================ */

.manning-deleting[b-7ov57acdan] {
    animation-fill-mode: both !important;
    opacity: 0;
}

/* Selected Pending cell: amber identity kept, selection unmistakable. */
.assignment.agency.employee-assignment.awaiting-confirmation.selected[b-7ov57acdan],
.assignment.agency.employee-assignment.awaiting-confirmation.batch-selected[b-7ov57acdan] {
    z-index: 4;
    color: #3b2802 !important;
    border-color: #1769dc !important;
    background-color: color-mix(in srgb, #f2c94c 52%, #ffffff 48%) !important;
    background-image:
        repeating-linear-gradient(-45deg,
            transparent 0 7px,
            rgba(255, 255, 255, 0.42) 7px 9px) !important;
    box-shadow:
        inset 4px 0 0 0 #1769dc,
        inset 0 0 0 2px rgba(23, 105, 220, 0.55),
        0 0 0 3px rgba(23, 105, 220, 0.22),
        0 8px 20px rgba(23, 105, 220, 0.28) !important;
    transform: translateY(-1px) !important;
    animation: cellSelectPop-b-7ov57acdan 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}

.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.selected[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.batch-selected[b-7ov57acdan] {
    color: #fff4d8 !important;
    border-color: #58d1e4 !important;
    background-color: rgba(150, 106, 28, 0.72) !important;
    background-image:
        repeating-linear-gradient(-45deg,
            transparent 0 7px,
            rgba(255, 226, 160, 0.18) 7px 9px) !important;
    box-shadow:
        inset 4px 0 0 0 #58d1e4,
        inset 0 0 0 2px rgba(88, 209, 228, 0.60),
        0 0 0 3px rgba(88, 209, 228, 0.22),
        0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

/* The Pending chip must stay legible on the selected variant too. */
.assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan],
.assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan] {
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.app-shell.theme-dark .assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan] {
    color: #06222c;
    background: #58d1e4;
}

/* ============================================================
   Delete v2 (ghost layer) + Pending redesign
   ============================================================ */

/* Ghost clones render on a fixed layer above everything and dissolve there,
   so Blazor's re-render underneath is never visible. */
.manning-delete-ghost-layer[b-7ov57acdan] {
    position: fixed;
    z-index: 4000;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.manning-delete-ghost[b-7ov57acdan] {
    position: fixed !important;
    margin: 0 !important;
    pointer-events: none !important;
    transform-origin: center;
    animation: manningGhostDissolve-b-7ov57acdan 320ms cubic-bezier(0.4, 0, 0.6, 1) var(--delete-delay, 0ms) both !important;
}

@keyframes manningGhostDissolve-b-7ov57acdan {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: none;
    }

    20% {
        opacity: 1;
        transform: scale(1.03);
        filter: saturate(0.75) brightness(1.05);
    }

    100% {
        opacity: 0;
        transform: scale(0.84) translateY(5px);
        filter: saturate(0) blur(3px);
    }
}

/* The live cell no longer needs the old class-based animation. */
.manning-deleting[b-7ov57acdan] {
    animation: none !important;
    opacity: 1;
}

/* --- Pending: flat amber card, no hatching ------------------- */

.assignment.agency.awaiting-confirmation[b-7ov57acdan] {
    border: 1px solid rgba(214, 155, 46, 0.75) !important;
    border-style: solid !important;
    color: #4a3204 !important;
    background-color: color-mix(in srgb, #f7d98a 78%, var(--panel-background) 22%) !important;
    background-image: none !important;
    box-shadow:
        inset 4px 0 0 0 #e0a53a,
        inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
    font-weight: 800;
    text-shadow: none;
}

.app-shell.theme-dark .assignment.agency.awaiting-confirmation[b-7ov57acdan] {
    color: #ffe9bd !important;
    border-color: rgba(226, 168, 72, 0.55) !important;
    background-color: rgba(84, 60, 20, 0.85) !important;
    background-image: none !important;
    box-shadow:
        inset 4px 0 0 0 #e2a848,
        inset 0 1px 0 rgba(255, 255, 255, 0.07) !important;
    text-shadow: none;
}

/* A quiet amber pip marks "waiting for the agency" instead of stripes. */
.assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
    left: 4px;
    bottom: 2px;
    padding: 0 5px 0 12px;
    border-radius: 4px;
    color: #4a3204;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: none;
    font-size: 7.5px;
    letter-spacing: 0.2px;
}

.app-shell.theme-dark .assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
    color: #ffe9bd;
    background: rgba(255, 255, 255, 0.10);
}

.assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan]::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #e0a53a;
    transform: translateY(-50%);
    animation: pendingPip-b-7ov57acdan 2.2s ease-in-out infinite;
}

@keyframes pendingPip-b-7ov57acdan {
    0%, 100% {
        opacity: 0.45;
        box-shadow: 0 0 0 0 rgba(224, 165, 58, 0.5);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 0 3px rgba(224, 165, 58, 0);
    }
}

/* --- Pending + selected: the standard selection language ----- */

.assignment.agency.employee-assignment.awaiting-confirmation.selected[b-7ov57acdan],
.assignment.agency.employee-assignment.awaiting-confirmation.batch-selected[b-7ov57acdan] {
    z-index: 4;
    color: #3b2802 !important;
    border-color: rgba(23, 105, 220, 0.9) !important;
    background-color: color-mix(in srgb, #f7d98a 62%, #dceafd 38%) !important;
    background-image: none !important;
    box-shadow:
        inset 4px 0 0 0 #1769dc,
        0 0 0 3px rgba(23, 105, 220, 0.20),
        0 8px 20px rgba(23, 105, 220, 0.22) !important;
    transform: translateY(-1px) !important;
    animation: cellSelectPop-b-7ov57acdan 240ms cubic-bezier(0.2, 0.9, 0.3, 1) both !important;
}

.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.selected[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.batch-selected[b-7ov57acdan] {
    color: #fff3d9 !important;
    border-color: rgba(88, 209, 228, 0.85) !important;
    background-color: rgba(96, 78, 46, 0.92) !important;
    box-shadow:
        inset 4px 0 0 0 #58d1e4,
        0 0 0 3px rgba(88, 209, 228, 0.22),
        0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

.assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan]::before,
.assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan]::before {
    background: #1769dc;
    animation: none;
    opacity: 1;
}

.app-shell.theme-dark .assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan]::before,
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan]::before {
    background: #58d1e4;
}

@media (prefers-reduced-motion: reduce) {
    .manning-delete-ghost[b-7ov57acdan],
    .assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan]::before {
        animation: none !important;
    }
}

/* ============================================================
   Pending v3 - "awaiting confirmation" as a progress state
   The amber slab always fought whatever selection we put on it.
   New model: the card stays close to a normal assignment card
   (name fully legible), and the *pending* status is carried by
   an animated amber progress line along the bottom edge plus
   the amber chip. Selection can then use the normal accent
   language without any colour clash.
   ============================================================ */

.assignment.agency.employee-assignment.awaiting-confirmation[b-7ov57acdan] {
    position: relative;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, #e0a53a 55%, var(--border-color) 45%) !important;
    border-style: solid !important;
    color: var(--primary-text) !important;
    background-color: color-mix(in srgb, var(--panel-background) 82%, #f2c94c 18%) !important;
    background-image:
        linear-gradient(90deg,
            rgba(224, 165, 58, 0) 0%,
            rgba(224, 165, 58, 0.95) 45%,
            rgba(255, 214, 128, 1) 55%,
            rgba(224, 165, 58, 0) 100%) !important;
    background-size: 55% 3px !important;
    background-repeat: no-repeat !important;
    background-position: -55% 100% !important;
    box-shadow:
        inset 0 -3px 0 0 color-mix(in srgb, #e0a53a 26%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
    font-weight: 750;
    text-shadow: none;
    animation: pendingProgress-b-7ov57acdan 2.6s cubic-bezier(0.45, 0, 0.55, 1) infinite !important;
}

.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation[b-7ov57acdan] {
    color: #eef4fb !important;
    border-color: rgba(226, 168, 72, 0.45) !important;
    background-color: rgba(48, 60, 78, 0.92) !important;
    background-image:
        linear-gradient(90deg,
            rgba(240, 190, 92, 0) 0%,
            rgba(240, 190, 92, 0.95) 45%,
            rgba(255, 226, 160, 1) 55%,
            rgba(240, 190, 92, 0) 100%) !important;
    box-shadow:
        inset 0 -3px 0 0 rgba(240, 190, 92, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06) !important;
}

@keyframes pendingProgress-b-7ov57acdan {
    0% {
        background-position: -55% 100%;
    }

    100% {
        background-position: 155% 100%;
    }
}

/* The compact clock keeps a fixed, non-interactive status slot in every state. */
.assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan],
.assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan],
.assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan] {
    position: absolute;
    left: 4px;
    top: 50%;
    bottom: auto;
    display: grid;
    width: 17px;
    height: 17px;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(224, 165, 58, 0.5);
    border-radius: 50%;
    color: #8a5a08;
    background: #fff1c9;
    box-shadow: none;
    box-sizing: border-box;
    pointer-events: none;
    transform: translateY(-50%);
}

.assignment.agency.awaiting-confirmation .confirmation-badge svg[b-7ov57acdan] {
    width: 11px;
    height: 11px;
    stroke-width: 1.8;
}

.app-shell.theme-dark .assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan] {
    color: #f3c96f;
    border-color: rgba(240, 190, 92, 0.48);
    background: rgba(88, 67, 30, 0.88);
}

.assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan]::before,
.assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan]::before,
.assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan]::before,
.app-shell.theme-dark .assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan]::before,
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.selected .confirmation-badge[b-7ov57acdan]::before,
.app-shell.theme-dark .assignment.agency.awaiting-confirmation.batch-selected .confirmation-badge[b-7ov57acdan]::before {
    content: none;
    animation: none;
}

.assignment .agency-badge[b-7ov57acdan] {
    pointer-events: none;
}

/* Selected pending: the standard accent language, amber status untouched. */
.assignment.agency.employee-assignment.awaiting-confirmation.selected[b-7ov57acdan],
.assignment.agency.employee-assignment.awaiting-confirmation.batch-selected[b-7ov57acdan] {
    z-index: 4;
    color: var(--primary-text) !important;
    border-color: rgba(23, 105, 220, 0.85) !important;
    background-color: color-mix(in srgb, var(--panel-background) 74%, #3d8bff 26%) !important;
    box-shadow:
        inset 4px 0 0 0 #1769dc,
        inset 0 -3px 0 0 color-mix(in srgb, #e0a53a 34%, transparent),
        0 0 0 3px rgba(23, 105, 220, 0.18),
        0 8px 20px rgba(23, 105, 220, 0.22) !important;
    transform: translateY(-1px) !important;
}

.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.selected[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.batch-selected[b-7ov57acdan] {
    color: #eef8ff !important;
    border-color: rgba(88, 209, 228, 0.75) !important;
    background-color: rgba(30, 74, 96, 0.95) !important;
    box-shadow:
        inset 4px 0 0 0 #58d1e4,
        inset 0 -3px 0 0 rgba(240, 190, 92, 0.35),
        0 0 0 3px rgba(88, 209, 228, 0.20),
        0 10px 24px rgba(0, 0, 0, 0.45) !important;
}

@media (prefers-reduced-motion: reduce) {
    .assignment.agency.employee-assignment.awaiting-confirmation[b-7ov57acdan] {
        animation: none !important;
        background-position: 50% 100% !important;
    }
}

/* ============================================================
   Drag-select feedback on Pending cells + a stronger delete
   dissolve for agency cards.
   ============================================================ */

/* While dragging across cells JS adds .selection-preview. The amber Pending
   rules were !important and swallowed it, so nothing showed until mouse-up. */
.assignment.agency.employee-assignment.awaiting-confirmation.selection-preview[b-7ov57acdan],
.assignment.agency.employee-assignment.awaiting-confirmation.selection-preview.selected[b-7ov57acdan],
.assignment.agency.employee-assignment.awaiting-confirmation.selection-preview.batch-selected[b-7ov57acdan] {
    z-index: 4;
    color: var(--primary-text) !important;
    border-color: rgba(23, 105, 220, 0.75) !important;
    background-color: color-mix(in srgb, var(--panel-background) 80%, #3d8bff 20%) !important;
    box-shadow:
        inset 4px 0 0 0 #1769dc,
        inset 0 -3px 0 0 color-mix(in srgb, #e0a53a 34%, transparent),
        0 0 0 2px rgba(23, 105, 220, 0.16) !important;
    transform: none !important;
    animation: none !important;
}

.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.selection-preview[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.selection-preview.selected[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.employee-assignment.awaiting-confirmation.selection-preview.batch-selected[b-7ov57acdan] {
    color: #eef8ff !important;
    border-color: rgba(88, 209, 228, 0.7) !important;
    background-color: rgba(30, 74, 96, 0.9) !important;
    box-shadow:
        inset 4px 0 0 0 #58d1e4,
        inset 0 -3px 0 0 rgba(240, 190, 92, 0.35),
        0 0 0 2px rgba(88, 209, 228, 0.18) !important;
}

/* Same for regular agency / permanent cards, so the drag always reads. */
.assignment.permanent.employee-assignment.selection-preview[b-7ov57acdan],
.assignment.agency.employee-assignment.selection-preview[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 60%, transparent) !important;
    box-shadow:
        inset 3px 0 0 0 #1769dc,
        inset 0 0 0 1px rgba(23, 105, 220, 0.28),
        0 0 0 2px rgba(23, 105, 220, 0.14) !important;
}

.app-shell.theme-dark .assignment.permanent.employee-assignment.selection-preview[b-7ov57acdan],
.app-shell.theme-dark .assignment.agency.employee-assignment.selection-preview[b-7ov57acdan] {
    border-color: rgba(88, 209, 228, 0.7) !important;
    box-shadow:
        inset 3px 0 0 0 #58d1e4,
        inset 0 0 0 1px rgba(88, 209, 228, 0.30),
        0 0 0 2px rgba(88, 209, 228, 0.16) !important;
}

/* --- Delete dissolve v3: more presence, works on amber cards --- */

.manning-delete-ghost[b-7ov57acdan] {
    animation: manningGhostBurn-b-7ov57acdan 360ms cubic-bezier(0.35, 0, 0.5, 1) var(--delete-delay, 0ms) both !important;
}

.manning-delete-ghost *[b-7ov57acdan] {
    animation: none !important;
}

@keyframes manningGhostBurn-b-7ov57acdan {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: none;
    }

    18% {
        opacity: 1;
        transform: scale(1.045) translateY(-2px);
        box-shadow:
            inset 0 0 0 2px rgba(216, 76, 95, 0.9),
            0 10px 26px rgba(216, 76, 95, 0.35);
        filter: brightness(1.12) saturate(1.15);
    }

    46% {
        opacity: 0.85;
        transform: scale(0.99) translateY(1px);
        filter: brightness(0.92) saturate(0.35) blur(0.6px);
    }

    100% {
        opacity: 0;
        transform: scale(0.86) scaleY(0.5) translateY(10px);
        filter: brightness(0.7) saturate(0) blur(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-delete-ghost[b-7ov57acdan] {
        animation: none !important;
        opacity: 0;
    }
}

/* ============================================================
   Delete on Pending cards - "shutter close"
   The generic burn dissolve reads poorly on the pending card
   (busy bottom bar + chip + amber tint = the fade just looks
   muddy). Pending gets its own exit instead: the amber progress
   bar snaps out, the card flashes and then closes in on itself
   from both edges like a shutter, leaving nothing behind.
   ============================================================ */

.manning-delete-ghost.awaiting-confirmation[b-7ov57acdan] {
    overflow: hidden;
    background-image: none !important;
    animation: pendingGhostShutter-b-7ov57acdan 380ms cubic-bezier(0.5, 0, 0.35, 1) var(--delete-delay, 0ms) both !important;
}

/* Chip and pip die first, so they don't smear across the wipe. */
.manning-delete-ghost.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
    animation: pendingGhostChip-b-7ov57acdan 160ms ease-in var(--delete-delay, 0ms) both !important;
}

@keyframes pendingGhostShutter-b-7ov57acdan {
    0% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 6px);
        transform: scale(1);
        filter: none;
    }

    16% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 6px);
        transform: scale(1.035);
        border-color: rgba(216, 76, 95, 0.95) !important;
        box-shadow:
            inset 0 0 0 2px rgba(216, 76, 95, 0.85),
            0 10px 24px rgba(216, 76, 95, 0.30) !important;
        filter: brightness(1.1);
    }

    38% {
        opacity: 1;
        clip-path: inset(0 6% 0 6% round 6px);
        transform: scale(1);
        filter: saturate(0.5);
    }

    100% {
        opacity: 0;
        clip-path: inset(0 50% 0 50% round 6px);
        transform: scaleY(0.92);
        filter: saturate(0) blur(1px);
    }
}

@keyframes pendingGhostChip-b-7ov57acdan {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.7);
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-delete-ghost.awaiting-confirmation[b-7ov57acdan],
    .manning-delete-ghost.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
        animation: none !important;
        opacity: 0;
    }
}

/* ============================================================
   Pending: placement animation + a brand new delete
   ============================================================ */

/* 1. Placement. The pending card runs its progress-bar animation with
   !important, which was cancelling the standard just-placed flash - so a
   person dropped from Available simply appeared with no motion at all.
   Both animations now run together. */
.assignment.agency.employee-assignment.awaiting-confirmation.just-placed[b-7ov57acdan] {
    z-index: 3;
    animation:
        pendingPlaceDrop-b-7ov57acdan 620ms cubic-bezier(0.16, 0.9, 0.3, 1) both,
        pendingProgress-b-7ov57acdan 2.6s cubic-bezier(0.45, 0, 0.55, 1) 620ms infinite !important;
}

@keyframes pendingPlaceDrop-b-7ov57acdan {
    0% {
        opacity: 0;
        transform: translateY(-14px) scale(0.9);
        box-shadow:
            inset 0 -3px 0 0 rgba(224, 165, 58, 0.9),
            0 0 0 6px rgba(53, 201, 154, 0.30),
            0 16px 30px rgba(23, 105, 220, 0.28);
        filter: brightness(1.2);
    }

    45% {
        opacity: 1;
        transform: translateY(2px) scale(1.03);
    }

    70% {
        transform: translateY(-1px) scale(0.995);
        box-shadow:
            inset 0 -3px 0 0 rgba(224, 165, 58, 0.55),
            0 0 0 3px rgba(53, 201, 154, 0.16),
            0 8px 18px rgba(23, 105, 220, 0.14);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: none;
    }
}

/* Permanent / normal agency cards get a matching, calmer drop. */
.employee-assignment.just-placed:not(.awaiting-confirmation)[b-7ov57acdan] {
    animation: standardPlaceDrop-b-7ov57acdan 560ms cubic-bezier(0.16, 0.9, 0.3, 1) both !important;
}

@keyframes standardPlaceDrop-b-7ov57acdan {
    0% {
        opacity: 0;
        transform: translateY(-12px) scale(0.9);
        box-shadow: 0 0 0 5px rgba(53, 201, 154, 0.30), 0 14px 28px rgba(23, 105, 220, 0.26);
    }

    50% {
        opacity: 1;
        transform: translateY(2px) scale(1.03);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: none;
    }
}

/* 2. Delete v3 for Pending: the card tips over and falls into the board.
   Pure geometry (3D rotation), so it reads identically on white and on
   navy - no reliance on blur or brightness, which is what made the
   previous attempts look washed out on the amber card. */
.manning-delete-ghost.awaiting-confirmation[b-7ov57acdan] {
    overflow: visible;
    clip-path: none !important;
    background-image: none !important;
    transform-origin: 50% 100%;
    animation: pendingGhostTipOver-b-7ov57acdan 460ms cubic-bezier(0.55, 0.05, 0.35, 1) var(--delete-delay, 0ms) both !important;
}

.manning-delete-ghost.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
    animation: pendingGhostChip-b-7ov57acdan 140ms ease-in var(--delete-delay, 0ms) both !important;
}

@keyframes pendingGhostTipOver-b-7ov57acdan {
    0% {
        opacity: 1;
        transform: perspective(760px) rotateX(0deg) translateY(0) scale(1);
    }

    14% {
        opacity: 1;
        transform: perspective(760px) rotateX(-6deg) translateY(-3px) scale(1.03);
        border-color: rgba(216, 76, 95, 0.95) !important;
        box-shadow:
            inset 0 0 0 2px rgba(216, 76, 95, 0.9),
            0 14px 30px rgba(216, 76, 95, 0.32) !important;
    }

    100% {
        opacity: 0;
        transform: perspective(760px) rotateX(82deg) translateY(6px) scale(0.96);
        box-shadow: 0 0 0 0 rgba(216, 76, 95, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .assignment.agency.employee-assignment.awaiting-confirmation.just-placed[b-7ov57acdan],
    .employee-assignment.just-placed:not(.awaiting-confirmation)[b-7ov57acdan],
    .manning-delete-ghost.awaiting-confirmation[b-7ov57acdan] {
        animation: none !important;
    }

    .manning-delete-ghost.awaiting-confirmation[b-7ov57acdan] {
        opacity: 0;
    }
}

/* ============================================================
   Pending delete v4 - "toss off the board"
   Previous versions inherited the generic dissolve/clip work and
   still looked wrong. This one is a single, purpose-built gesture:
   the card is picked up off the sheet, tilts, and is flicked away
   to the top-left, shrinking as it goes. Pure transform + opacity,
   so it never depends on background colour or blur.
   ============================================================ */

.manning-delete-ghost.awaiting-confirmation[b-7ov57acdan] {
    overflow: visible;
    clip-path: none !important;
    background-image: none !important;
    transform-origin: 30% 60%;
    animation: pendingGhostToss-b-7ov57acdan 480ms cubic-bezier(0.35, 0, 0.2, 1) var(--delete-delay, 0ms) both !important;
}

.manning-delete-ghost.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
    animation: pendingGhostChip-b-7ov57acdan 150ms ease-in var(--delete-delay, 0ms) both !important;
}

@keyframes pendingGhostToss-b-7ov57acdan {
    0% {
        opacity: 1;
        transform: translate(0, 0) rotate(0deg) scale(1);
    }

    22% {
        opacity: 1;
        transform: translate(0, -7px) rotate(-1.5deg) scale(1.05);
        box-shadow:
            0 18px 34px rgba(12, 26, 48, 0.32),
            0 0 0 2px rgba(216, 76, 95, 0.55) !important;
    }

    38% {
        opacity: 1;
        transform: translate(6px, -5px) rotate(1deg) scale(1.03);
    }

    100% {
        opacity: 0;
        transform: translate(-64px, -40px) rotate(-16deg) scale(0.72);
        box-shadow: 0 0 0 0 rgba(12, 26, 48, 0) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .manning-delete-ghost.awaiting-confirmation[b-7ov57acdan] {
        animation: none !important;
        opacity: 0;
    }
}

/* ============================================================
   Responsive week-grid density
   The table adapts to its own available width, so opening the
   Available rail is handled independently of monitor resolution.
   ============================================================ */

.manning-table-container[b-7ov57acdan] {
    container-name: weekly-manning-grid;
    container-type: inline-size;
}

/* Keep symmetrical side slots in every agency card so status changes never
   move the centred name and neither indicator can overlap it. */

@container weekly-manning-grid (max-width: 1500px) {
    .line-column[b-7ov57acdan] {
        width: min(var(--line-column-width), 150px);
    }

    .position-column[b-7ov57acdan] {
        width: min(var(--position-column-width), 120px);
    }

    .manning-table th[b-7ov57acdan],
    .manning-table td[b-7ov57acdan] {
        padding-right: 1px;
        padding-left: 1px;
    }

    .assignment[b-7ov57acdan],
    .empty-assignment[b-7ov57acdan] {
        padding-right: 3px;
        padding-left: 3px;
        font-size: 11px;
    }

    .assignment.agency[b-7ov57acdan] {
        padding-right: 4px;
        padding-left: 4px;
    }

    .assignment.agency .employee-name[b-7ov57acdan],
    .assignment.agency.has-custom-hours .employee-name[b-7ov57acdan] {
        width: calc(100% - 68px);
    }

    .agency-badge[b-7ov57acdan] {
        right: 3px;
        min-width: 23px;
        height: 13px;
        padding: 0 3px;
        font-size: 7.4px;
    }

    .assignment.agency.awaiting-confirmation .confirmation-badge[b-7ov57acdan] {
        left: 2px;
    }
}

@container weekly-manning-grid (max-width: 1250px) {
    .position-column[b-7ov57acdan] {
        width: min(var(--position-column-width), 110px);
    }

    .assignment[b-7ov57acdan],
    .empty-assignment[b-7ov57acdan] {
        font-size: 10.5px;
        letter-spacing: -0.05px;
    }

    .assignment-hours[b-7ov57acdan],
    .tbc-required-hours[b-7ov57acdan] {
        font-size: 8.7px;
    }

    .assignment.agency .employee-name[b-7ov57acdan],
    .assignment.agency.has-custom-hours .employee-name[b-7ov57acdan] {
        width: calc(100% - 62px);
    }

    .agency-badge[b-7ov57acdan] {
        right: 2px;
        min-width: 20px;
        height: 12px;
        padding: 0 2px;
        font-size: 7px;
    }

    .day-name[b-7ov57acdan] {
        font-size: 13.5px;
    }
}

/* =====================================================================
   Employee Details v6 — Jul 2026 request pack.
   - Week selector stretched on top, "Employee Details" title below it.
   - Bigger typography everywhere (readable on FHD *and* 2K).
   - Animated ambient colour washes on the inner cards (light + dark).
   - Tile-style Quick Status buttons with larger icons.
   - Gradient "Apply to rest of week" button with a moving sheen.
   - Name → badge separator, "Selected: …" chip, day-tile duration row,
     Recent Activity icon alignment + font bump.
   Appended last on purpose so it wins over v2/v5.
   ===================================================================== */

/* ---- Header: full-width week selector above the title ---- */
.employee-details-v2 .employee-panel-header[b-7ov57acdan] {
    min-height: 0;
    align-items: stretch;
    padding: 11px 13px 12px;
}

.employee-details-v2 .employee-panel-title-block[b-7ov57acdan] {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
}

.employee-details-v2 .employee-week-selector[b-7ov57acdan] {
    width: 100%;
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
}

.employee-details-v2 .employee-week-selector > button[b-7ov57acdan] {
    min-height: 40px;
    border-radius: 10px;
    font-size: 20px;
}

.employee-details-v2 .employee-week-selector .employee-week-selector-date[b-7ov57acdan] {
    justify-content: center;
    gap: 9px;
    padding: 5px 10px;
}

.employee-details-v2 .employee-week-selector-date svg[b-7ov57acdan] {
    width: 18px;
    height: 18px;
}

.employee-details-v2 .employee-week-selector-date > span[b-7ov57acdan] {
    align-items: center;
}

.employee-details-v2 .employee-week-selector-date small[b-7ov57acdan] {
    overflow: visible;
    font-size: clamp(9px, 2.4cqi, 10.5px);
    text-overflow: clip;
}

.employee-details-v2 .employee-week-selector-date strong[b-7ov57acdan] {
    overflow: visible;
    font-size: clamp(12px, 3.1cqi, 13.5px);
    text-overflow: clip;
}

.employee-details-v2 .employee-panel-eyebrow[b-7ov57acdan] {
    margin-top: 2px;
    font-size: clamp(18px, 5cqi, 21px);
    letter-spacing: 0.5px;
    text-align: left;
}

/* ---- Identity card: bigger name + animated separator line ---- */
.employee-details-v2 .employee-name-row > strong[b-7ov57acdan] {
    font-size: clamp(17px, 4.7cqi, 19.5px);
}

.employee-name-separator[b-7ov57acdan] {
    display: block;
    width: 100%;
    height: 2px;
    margin: 3px 0 4px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        color-mix(in srgb, var(--employee-accent) 75%, transparent) 22%,
        #7f6bd9 50%,
        color-mix(in srgb, var(--employee-accent) 75%, transparent) 78%,
        transparent 100%);
    background-size: 220% 100%;
    opacity: 0.85;
    animation: employee-separator-flow-b-7ov57acdan 6s linear infinite;
}

@keyframes employee-separator-flow-b-7ov57acdan {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.employee-details-v2 .employee-type-badge[b-7ov57acdan],
.employee-details-v2 .employee-access-badge[b-7ov57acdan] {
    min-height: 24px;
    padding: 4px 11px;
    font-size: clamp(10px, 2.7cqi, 11.5px);
}

.employee-details-v2 .employee-profile-meta[b-7ov57acdan] {
    font-size: clamp(11px, 2.9cqi, 12.5px);
}

.employee-details-v2 .employee-profile-meta svg[b-7ov57acdan] {
    width: 14px;
    height: 14px;
}

.employee-details-v2 .employee-planned-week-card span[b-7ov57acdan],
.employee-details-v2 .employee-planned-week-card small[b-7ov57acdan] {
    font-size: clamp(9px, 2.4cqi, 10.5px);
}

.employee-details-v2 .employee-planned-week-card strong[b-7ov57acdan] {
    font-size: clamp(20px, 5.4cqi, 23px);
}

/* ---- Animated ambient colour on the inner cards (light theme base) ---- */
.employee-details-v2 .employee-profile-card[b-7ov57acdan],
.employee-details-v2 .employee-planned-week-card[b-7ov57acdan],
.employee-details-v2 .selected-assignment-card[b-7ov57acdan],
.employee-details-v2 .employee-insight-card[b-7ov57acdan],
.employee-details-v2 .manual-other-form[b-7ov57acdan] {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.employee-details-v2 .employee-profile-card[b-7ov57acdan]::before,
.employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before,
.employee-details-v2 .selected-assignment-card[b-7ov57acdan]::before,
.employee-details-v2 .employee-insight-card[b-7ov57acdan]::before {
    position: absolute;
    z-index: -1;
    inset: -60%;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 24% 30%, color-mix(in srgb, var(--employee-accent) 16%, transparent) 0 15%, transparent 44%),
        radial-gradient(circle at 76% 22%, color-mix(in srgb, #7f6bd9 12%, transparent) 0 13%, transparent 40%),
        radial-gradient(circle at 58% 78%, color-mix(in srgb, #23b8a2 10%, transparent) 0 12%, transparent 38%);
    opacity: 0.7;
    animation: employee-card-aurora-b-7ov57acdan 13s ease-in-out infinite alternate;
}

.employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before { animation-delay: -3.2s; }
.employee-details-v2 .selected-assignment-card[b-7ov57acdan]::before { animation-delay: -5.1s; }
.employee-details-v2 .employee-insight-card:nth-child(2)[b-7ov57acdan]::before { animation-delay: -7.4s; }

@keyframes employee-card-aurora-b-7ov57acdan {
    0% {
        transform: translate3d(-5%, -4%, 0) rotate(0deg) scale(1);
    }

    50% {
        transform: translate3d(5%, 4%, 0) rotate(4deg) scale(1.07);
    }

    100% {
        transform: translate3d(-3%, 5%, 0) rotate(-3deg) scale(1.03);
    }
}

/* Dark theme: deeper, slightly stronger wash */
.app-shell.theme-dark .employee-details-v2 .employee-profile-card[b-7ov57acdan]::before,
.app-shell.theme-dark .employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before,
.app-shell.theme-dark .employee-details-v2 .selected-assignment-card[b-7ov57acdan]::before,
.app-shell.theme-dark .employee-details-v2 .employee-insight-card[b-7ov57acdan]::before {
    background:
        radial-gradient(circle at 24% 30%, rgba(61, 139, 255, 0.20) 0 15%, transparent 46%),
        radial-gradient(circle at 76% 22%, rgba(127, 107, 217, 0.16) 0 13%, transparent 42%),
        radial-gradient(circle at 58% 78%, rgba(35, 184, 162, 0.13) 0 12%, transparent 40%);
    opacity: 0.85;
}

/* ---- Section headings + "Selected: …" chip ---- */
.employee-details-v2 .employee-section-heading .section-icon[b-7ov57acdan] {
    width: 28px;
    height: 28px;
    border-radius: 8px;
}

.employee-details-v2 .employee-section-heading .section-icon svg[b-7ov57acdan] {
    width: 16px;
    height: 16px;
}

.employee-details-v2 .employee-section-heading > span[b-7ov57acdan] {
    font-size: clamp(13px, 3.5cqi, 14.5px);
}

.employee-details-v2 .employee-section-heading small[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 4px 10px;
    border: 1px solid color-mix(in srgb, var(--employee-accent) 42%, var(--border-color) 58%);
    border-radius: 999px;
    color: var(--employee-accent);
    background: color-mix(in srgb, var(--employee-accent) 9%, transparent);
    font-size: clamp(11px, 3cqi, 12.5px);
    font-weight: 800;
    letter-spacing: 0.1px;
    line-height: 1;
    white-space: nowrap;
}

/* ---- Selected Assignment: role + selects readable, hero Apply button ---- */
.employee-details-v2 .selected-assignment-role strong[b-7ov57acdan] {
    font-size: clamp(15px, 4cqi, 16.5px);
}

.employee-details-v2 .inline-hours-select[b-7ov57acdan] {
    height: 42px;
    font-size: 14.5px;
}

.employee-details-v2 .inline-hours-hint[b-7ov57acdan] {
    font-size: 11.5px;
}

.employee-details-v2 .inline-hours-apply[b-7ov57acdan] {
    position: relative;
    overflow: hidden;
    min-height: 44px;
    border: 0;
    border-radius: 11px;
    color: #ffffff;
    background: linear-gradient(120deg, #1f6fe0 0%, #3d8bff 46%, #7f6bd9 100%);
    background-size: 220% 100%;
    background-position: 0% 0;
    box-shadow:
        0 9px 22px rgba(31, 111, 224, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
    font-size: clamp(12.5px, 3.3cqi, 14px);
    font-weight: 800;
    letter-spacing: 0.25px;
    cursor: pointer;
    transition:
        background-position 420ms ease,
        transform 150ms ease,
        box-shadow 200ms ease,
        filter 180ms ease;
}

.employee-details-v2 .inline-hours-apply[b-7ov57acdan]::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 42%;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 100%);
    transform: skewX(-14deg);
    animation: employee-apply-sheen-b-7ov57acdan 3.4s ease-in-out infinite;
}

@keyframes employee-apply-sheen-b-7ov57acdan {
    0%, 55% { left: -60%; }
    85%, 100% { left: 130%; }
}

.employee-details-v2 .inline-hours-apply:hover:not(:disabled)[b-7ov57acdan] {
    background-position: 100% 0;
    transform: translateY(-1px);
    box-shadow:
        0 12px 26px rgba(31, 111, 224, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.employee-details-v2 .inline-hours-apply:active:not(:disabled)[b-7ov57acdan] {
    transform: translateY(0);
}

.employee-details-v2 .inline-hours-apply:disabled[b-7ov57acdan] {
    border: 1px solid color-mix(in srgb, var(--border-color) 76%, transparent);
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--button-background) 82%, var(--border-color) 18%);
    box-shadow: none;
    opacity: 0.72;
    cursor: not-allowed;
    transform: none;
}

.employee-details-v2 .inline-hours-apply:disabled[b-7ov57acdan]::after {
    animation: none;
    content: none;
}

/* ---- Quick Status Actions: tile buttons with big icons (like the mock) ---- */
.employee-details-v2 .manual-status-options[b-7ov57acdan] {
    gap: 8px;
}

.employee-details-v2 .manual-status[b-7ov57acdan] {
    --ms-color: var(--employee-accent);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 68px;
    padding: 10px 6px;
    border: 1px solid color-mix(in srgb, var(--ms-color) 46%, var(--border-color) 54%);
    border-radius: 13px;
    color: var(--ms-color);
    background:
        radial-gradient(130% 95% at 50% 0%, color-mix(in srgb, var(--ms-color) 20%, transparent) 0%, transparent 58%),
        color-mix(in srgb, var(--ms-color) 5%, var(--employee-card));
    box-shadow:
        0 6px 16px color-mix(in srgb, var(--ms-color) 14%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    font-size: clamp(11.5px, 3cqi, 12.5px);
    font-weight: 800;
    filter: none;
    transition:
        transform 140ms ease,
        box-shadow 180ms ease,
        border-color 160ms ease,
        filter 160ms ease;
}

.employee-details-v2 .manual-status .ms-icon[b-7ov57acdan] {
    width: 25px;
    height: 25px;
    stroke-width: 1.9;
}

.employee-details-v2 .manual-status .ms-label[b-7ov57acdan] {
    line-height: 1.1;
    text-align: center;
}

.employee-details-v2 .manual-status.training[b-7ov57acdan] { --ms-color: #17a983; }
.employee-details-v2 .manual-status.holiday[b-7ov57acdan] { --ms-color: #3d8bff; }
.employee-details-v2 .manual-status.sick[b-7ov57acdan] { --ms-color: #ee5561; }
.employee-details-v2 .manual-status.other[b-7ov57acdan] { --ms-color: #9a76e8; }
.employee-details-v2 .manual-status.blacklist[b-7ov57acdan] { --ms-color: #64748b; }

.employee-details-v2 .manual-status:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--ms-color) 72%, var(--border-color) 28%);
    box-shadow:
        0 10px 22px color-mix(in srgb, var(--ms-color) 24%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
    filter: none;
}

.employee-details-v2 .manual-status.active[b-7ov57acdan] {
    outline: 2px solid color-mix(in srgb, var(--ms-color) 85%, #ffffff 15%);
    outline-offset: -2px;
}

.employee-details-v2 .manual-status.blacklist[b-7ov57acdan] {
    flex-direction: row;
    gap: 9px;
    min-height: 50px;
}

/* Dark theme: darker tile body so the coloured glow reads like the mock */
.app-shell.theme-dark .employee-details-v2 .manual-status[b-7ov57acdan] {
    color: color-mix(in srgb, var(--ms-color) 82%, #ffffff 18%);
    background:
        radial-gradient(130% 95% at 50% 0%, color-mix(in srgb, var(--ms-color) 26%, transparent) 0%, transparent 60%),
        color-mix(in srgb, #0b1424 82%, var(--ms-color) 8%);
    box-shadow:
        0 7px 18px color-mix(in srgb, var(--ms-color) 18%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.employee-details-v2 .manual-status:disabled[b-7ov57acdan] {
    border-color: color-mix(in srgb, var(--border-color) 82%, transparent);
    color: color-mix(in srgb, var(--secondary-text) 82%, transparent);
    background: color-mix(in srgb, var(--button-background) 72%, #808894 28%);
    box-shadow: none;
    filter: grayscale(0.8) saturate(0.45);
    opacity: 0.58;
    cursor: not-allowed;
    transform: none;
}

.employee-details-v2 .manual-status-note[b-7ov57acdan] {
    font-size: 11.5px;
    line-height: 1.45;
}

.employee-details-v2 .employee-read-only-notice strong[b-7ov57acdan] {
    font-size: 12px;
}

.employee-details-v2 .employee-read-only-notice span[b-7ov57acdan] {
    font-size: 10.5px;
}

/* ---- This Week Overview: bigger tiles, duration row, selected tick ---- */
.employee-details-v2 .employee-day-tile[b-7ov57acdan] {
    position: relative;
    overflow: visible;
    min-height: 118px;
    gap: 6px;
    padding: 9px 7px;
    border-radius: 11px;
}

.employee-details-v2 .day-tile-head[b-7ov57acdan] {
    padding-bottom: 5px;
}

.employee-details-v2 .day-tile-head strong[b-7ov57acdan] {
    font-size: clamp(11px, 3cqi, 12.5px);
}

.employee-details-v2 .day-tile-head span[b-7ov57acdan] {
    font-size: clamp(9.5px, 2.55cqi, 10.5px);
}

.employee-details-v2 .day-tile-body[b-7ov57acdan] {
    gap: 2px;
}

.employee-details-v2 .day-tile-body strong[b-7ov57acdan] {
    font-size: clamp(10.5px, 2.8cqi, 11.5px);
}

.employee-details-v2 .day-tile-body span[b-7ov57acdan],
.employee-details-v2 .day-tile-available[b-7ov57acdan],
.employee-details-v2 .day-tile-status[b-7ov57acdan] {
    font-size: clamp(9.5px, 2.55cqi, 10.5px);
}

.employee-details-v2 .day-tile-hours[b-7ov57acdan] {
    font-size: clamp(9.5px, 2.55cqi, 10.5px);
    line-height: 1.15;
}

.employee-details-v2 .day-tile-confirmation[b-7ov57acdan] {
    font-size: clamp(8.5px, 2.3cqi, 9.5px) !important;
    padding: 3px 6px;
}

.employee-details-v2 .day-tile-duration[b-7ov57acdan] {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    padding-top: 5px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 88%, transparent);
    color: var(--primary-text);
    font-size: clamp(10px, 2.7cqi, 11px);
    font-weight: 800;
    line-height: 1;
}

.employee-details-v2 .day-tile-duration svg[b-7ov57acdan] {
    width: 13px;
    height: 13px;
    flex: 0 0 auto;
    fill: none;
    stroke: var(--employee-accent);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.employee-details-v2 .day-tile-duration > span[b-7ov57acdan] {
    overflow: visible;
    color: var(--primary-text);
    font-size: inherit;
    text-overflow: clip;
    white-space: nowrap;
}

.employee-details-v2 .employee-day-tile.selected[b-7ov57acdan]::after {
    position: absolute;
    top: -7px;
    right: -6px;
    z-index: 2;
    display: grid;
    width: 19px;
    height: 19px;
    place-items: center;
    content: "✓";
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(145deg, #3d8bff, #1f6fe0);
    box-shadow:
        0 3px 9px rgba(61, 139, 255, 0.48),
        0 0 0 2px var(--panel-background);
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
}

/* ---- Recent Activity + Stats: bigger fonts, icons aligned to the text ---- */
.employee-details-v2 .employee-insight-heading > span[b-7ov57acdan] {
    gap: 7px;
    font-size: clamp(12.5px, 3.3cqi, 14px);
}

.employee-details-v2 .employee-insight-heading svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
}

.employee-details-v2 .employee-insight-heading button[b-7ov57acdan] {
    padding: 5px 9px;
    border-radius: 8px;
    font-size: clamp(9.5px, 2.55cqi, 10.5px);
}

.employee-details-v2 .employee-activity-list[b-7ov57acdan] {
    gap: 10px;
}

.employee-details-v2 .employee-activity-item[b-7ov57acdan] {
    grid-template-columns: 32px minmax(0, 1fr);
    align-items: start;
    gap: 9px;
}

.employee-details-v2 .employee-activity-icon[b-7ov57acdan] {
    width: 32px;
    height: 32px;
    align-self: start;
    margin-top: 1px;
    border-radius: 9px;
}

.employee-details-v2 .employee-activity-icon svg[b-7ov57acdan] {
    width: 17px;
    height: 17px;
}

.employee-details-v2 .employee-activity-item > div[b-7ov57acdan] {
    gap: 2px;
}

.employee-details-v2 .employee-activity-item strong[b-7ov57acdan] {
    font-size: clamp(11px, 3cqi, 12.5px);
}

.employee-details-v2 .employee-activity-item span[b-7ov57acdan] {
    font-size: clamp(10px, 2.7cqi, 11.5px);
    line-height: 1.35;
}

.employee-details-v2 .employee-activity-item small[b-7ov57acdan] {
    font-size: clamp(9px, 2.45cqi, 10px);
}

.employee-details-v2 .employee-insight-state[b-7ov57acdan] {
    font-size: clamp(10.5px, 2.8cqi, 11.5px);
}

.employee-details-v2 .employee-stats-list[b-7ov57acdan] {
    gap: 9px;
}

.employee-details-v2 .employee-stats-list dt[b-7ov57acdan] {
    font-size: clamp(10.5px, 2.8cqi, 12px);
}

.employee-details-v2 .employee-stats-list dd[b-7ov57acdan] {
    font-size: clamp(12px, 3.1cqi, 13.5px);
}

/* ---- Forms inside the panel: keep text readable too ---- */
.employee-details-v2 .manual-status-duration-head strong[b-7ov57acdan] {
    font-size: 13px;
}

.employee-details-v2 .manual-status-duration-head span[b-7ov57acdan] {
    font-size: 11px;
}

/* ---- Wider rail (and therefore panel) on QHD/2K+ monitors ---- */
@media (min-width: 1900px) {
    .manning-page[b-7ov57acdan] {
        --manning-rail-width: clamp(340px, 20vw, 480px);
    }
}

/* ---- Reduced motion: freeze all v6 animations ---- */
@media (prefers-reduced-motion: reduce) {
    .employee-name-separator[b-7ov57acdan],
    .employee-details-v2 .inline-hours-apply[b-7ov57acdan]::after,
    .employee-details-v2 .employee-profile-card[b-7ov57acdan]::before,
    .employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before,
    .employee-details-v2 .selected-assignment-card[b-7ov57acdan]::before,
    .employee-details-v2 .employee-insight-card[b-7ov57acdan]::before {
        animation: none;
    }
}

/* =====================================================================
   Employee Details v7 — Jul 2026 interaction pack.
   - Activity icons vertically centred in their column (no more top-left).
   - Hover animation on the small form buttons (Apply / Confirm / Cancel).
   - Distinct colour + animated sheen on the duration-form Apply button.
   - Red "sweep ring" that races once around a day tile on delete.
   Appended last so it wins.
   ===================================================================== */

/* ---- Recent Activity: centre the icon chip against the whole text block ---- */
.employee-details-v2 .employee-activity-item[b-7ov57acdan] {
    align-items: center;
}

.employee-details-v2 .employee-activity-icon[b-7ov57acdan] {
    align-self: center;
    margin-top: 0;
}

/* ---- Small form buttons: lift + glow on hover ---- */
.employee-details-v2 .manual-other-confirm[b-7ov57acdan],
.employee-details-v2 .manual-status-cancel[b-7ov57acdan],
.employee-details-v2 .blacklist-confirm[b-7ov57acdan] {
    position: relative;
    overflow: hidden;
    transition:
        transform 140ms ease,
        box-shadow 200ms ease,
        filter 160ms ease,
        background-position 420ms ease;
}

.employee-details-v2 .manual-status-cancel:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.18);
}

.employee-details-v2 .blacklist-confirm[b-7ov57acdan] {
    background: linear-gradient(120deg, #ef4444 0%, #dc2626 48%, #991b1b 100%);
    background-size: 200% 100%;
    background-position: 0% 0;
}

.employee-details-v2 .blacklist-confirm:hover:not(:disabled)[b-7ov57acdan] {
    background-position: 100% 0;
    transform: translateY(-1px);
    box-shadow: 0 9px 20px rgba(220, 38, 38, 0.38);
}

/* ---- Duration-form Apply: teal/emerald identity + moving sheen ---- */
.employee-details-v2 .manual-other-confirm[b-7ov57acdan] {
    border: 0;
    color: #ffffff;
    background: linear-gradient(120deg, #0ea5a3 0%, #14b8a6 46%, #22c55e 100%);
    background-size: 220% 100%;
    background-position: 0% 0;
    box-shadow:
        0 8px 18px rgba(16, 185, 166, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.24);
    font-weight: 800;
    letter-spacing: 0.2px;
}

.employee-details-v2 .manual-other-confirm[b-7ov57acdan]::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    content: "";
    pointer-events: none;
    background: linear-gradient(100deg, transparent 0%, rgba(255, 255, 255, 0.2) 50%, transparent 100%);
    transform: skewX(-14deg);
    animation: employee-apply-sheen-b-7ov57acdan 3.4s ease-in-out infinite;
}

.employee-details-v2 .manual-other-confirm:hover:not(:disabled)[b-7ov57acdan] {
    background-position: 100% 0;
    transform: translateY(-1px);
    filter: none;
    box-shadow:
        0 11px 24px rgba(16, 185, 166, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.employee-details-v2 .manual-other-confirm:active:not(:disabled)[b-7ov57acdan] {
    transform: translateY(0);
}

/* ---- Delete sweep ring: one quick red lap around the tile, then gone ---- */
.employee-details-v2 .employee-day-tile.is-delete-sweep[b-7ov57acdan] {
    position: relative;
}

.employee-details-v2 .employee-day-tile.is-delete-sweep[b-7ov57acdan]::after {
    position: absolute;
    z-index: 5;
    inset: -2px;
    content: "";
    pointer-events: none;
    border-radius: 13px;
    padding: 2px;
    /* A single bright red arc rotating around the border. */
    background: conic-gradient(
        from 0deg,
        #ff2d2d 0deg,
        #ff2d2d 46deg,
        transparent 92deg,
        transparent 360deg);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    animation: employee-delete-sweep-b-7ov57acdan 620ms linear 1 forwards;
}

@keyframes employee-delete-sweep-b-7ov57acdan {
    0% {
        transform: rotate(0deg);
        opacity: 1;
    }

    82% {
        opacity: 1;
    }

    100% {
        transform: rotate(360deg);
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .employee-details-v2 .manual-other-confirm[b-7ov57acdan]::after {
        animation: none;
        content: none;
    }

    .employee-details-v2 .employee-day-tile.is-delete-sweep[b-7ov57acdan]::after {
        animation: none;
        opacity: 0;
    }
}

/* =====================================================================
   Employee Details v8 — Jul 2026 fixes.
   1. Kill the browser's bright focus frame around the whole panel
      (no replacement ring — the per-tile red delete sweep is enough).
   2. Force the small icon chips (activity + duration) to truly centre
      their glyph so the calendar no longer sits in the top-left corner.
   Appended last so it wins.
   ===================================================================== */

/* ---- 1. Panel focus: remove the raw browser outline entirely ---- */
.employee-details-panel:focus[b-7ov57acdan],
.employee-details-panel:focus-visible[b-7ov57acdan],
.employee-details-v2:focus[b-7ov57acdan],
.employee-details-v2:focus-visible[b-7ov57acdan] {
    outline: none;
}

/* ---- 2. Icon chips: dead-centre the glyph ---- */
.employee-details-v2 .employee-activity-icon[b-7ov57acdan] {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    margin: 0;
    padding: 0;
    line-height: 0;
}

.employee-details-v2 .employee-activity-icon svg[b-7ov57acdan] {
    display: block;
    width: 16px;
    height: 16px;
    margin: 0;
}

.employee-details-v2 .employee-activity-item .employee-activity-description[b-7ov57acdan] {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.employee-details-v2 .day-tile-duration svg[b-7ov57acdan] {
    display: block;
}

/* Weekly Manning editing actions */
.manning-toolbar-separator[b-7ov57acdan] {
    width: 1px;
    height: 28px;
    flex: 0 0 1px;
    margin-inline: 1px;
    background: color-mix(in srgb, var(--border-color) 86%, transparent);
}

.weekly-manning-undo-button[b-7ov57acdan] {
    position: relative;
    display: inline-flex;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, #1769dc 25%, var(--border-color));
    border-radius: 10px;
    color: #1769dc;
    background: color-mix(in srgb, var(--button-background) 92%, #1769dc 8%);
    cursor: pointer;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 180ms ease;
}

.weekly-manning-undo-button svg[b-7ov57acdan] {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 170ms ease;
}

.weekly-manning-undo-button.is-available[b-7ov57acdan] {
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.08), 0 7px 16px rgba(23, 105, 220, 0.15);
}

.weekly-manning-undo-button.is-available:not(:hover):not(:focus-visible):not(.is-running):not(:disabled) svg[b-7ov57acdan] {
    animation: weeklyManningUndoAttention-b-7ov57acdan 3.6s ease-in-out infinite;
}

.weekly-manning-undo-button:focus-visible[b-7ov57acdan] {
    outline: 3px solid color-mix(in srgb, #1769dc 46%, transparent);
    outline-offset: 3px;
}

@keyframes weeklyManningUndoAttention-b-7ov57acdan {
    0%, 8%, 18%, 100% {
        transform: rotate(0) translateY(0);
    }

    11% {
        transform: rotate(-7deg) translateY(-1px);
    }

    14% {
        transform: rotate(4deg) translateY(0);
    }
}

.weekly-manning-undo-button:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-1px);
    border-color: rgba(23, 105, 220, 0.48);
    background: color-mix(in srgb, var(--button-background) 82%, #1769dc 18%);
    box-shadow: 0 0 15px rgba(23, 105, 220, 0.18), 0 9px 18px rgba(23, 105, 220, 0.16);
}

.weekly-manning-undo-button:hover:not(:disabled) svg[b-7ov57acdan] {
    transform: rotate(-8deg) translateY(-1px);
}

.weekly-manning-undo-button:active:not(:disabled)[b-7ov57acdan] {
    transform: scale(0.93);
}

.weekly-manning-undo-button:disabled[b-7ov57acdan] {
    cursor: not-allowed;
    opacity: 0.42;
    box-shadow: none;
}

.theme-dark .weekly-manning-undo-button[b-7ov57acdan] {
    border-color: rgba(111, 199, 199, 0.24);
    color: #8edce9;
    background: rgba(111, 199, 199, 0.08);
}

.weekly-manning-undo-spinner[b-7ov57acdan] {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: weekly-manning-action-spin-b-7ov57acdan 700ms linear infinite;
}

/* Viewport-level Copy Previous Week confirmation */
.week-copy-modal-overlay[b-7ov57acdan] {
    position: fixed;
    z-index: 10000;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    overflow-y: auto;
    background: rgba(8, 20, 38, 0.46);
    backdrop-filter: blur(5px);
    animation: week-copy-overlay-in-b-7ov57acdan 160ms ease both;
}

.week-copy-modal[b-7ov57acdan] {
    width: min(560px, calc(100vw - 32px));
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 24px;
    border: 1px solid color-mix(in srgb, #1769dc 22%, var(--border-color));
    border-radius: 20px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 97%, #1769dc 3%);
    box-shadow: 0 28px 80px rgba(4, 15, 32, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.12) inset;
    animation: week-copy-modal-in-b-7ov57acdan 190ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.week-copy-modal-header[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.week-copy-modal-icon[b-7ov57acdan] {
    display: grid;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    place-items: center;
    border: 1px solid rgba(23, 105, 220, 0.18);
    border-radius: 14px;
    color: #1769dc;
    background: rgba(23, 105, 220, 0.10);
}

.week-copy-modal-icon svg[b-7ov57acdan] {
    width: 27px;
    height: 27px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.week-copy-modal-eyebrow[b-7ov57acdan] {
    display: block;
    margin-bottom: 2px;
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.week-copy-modal h2[b-7ov57acdan] {
    margin: 0;
    font-size: 23px;
    line-height: 1.2;
    letter-spacing: -0.35px;
}

.week-copy-date-transfer[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    margin-top: 22px;
    padding: 14px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: color-mix(in srgb, var(--button-background) 78%, transparent);
}

.week-copy-date-transfer > div[b-7ov57acdan] {
    min-width: 0;
}

.week-copy-date-transfer > div:last-child[b-7ov57acdan] {
    text-align: right;
}

.week-copy-date-transfer span[b-7ov57acdan] {
    display: block;
    margin-bottom: 4px;
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
}

.week-copy-date-transfer strong[b-7ov57acdan] {
    display: block;
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
}

.week-copy-date-transfer > svg[b-7ov57acdan] {
    width: 24px;
    height: 24px;
    justify-self: center;
    fill: none;
    stroke: #1769dc;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.week-copy-modal-description[b-7ov57acdan] {
    margin: 20px 0 12px;
    color: var(--primary-text);
    font-size: 13.5px;
    line-height: 1.55;
}

.week-copy-modal-information[b-7ov57acdan] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.week-copy-modal-information li[b-7ov57acdan] {
    position: relative;
    padding-left: 22px;
    color: var(--secondary-text);
    font-size: 12.5px;
    line-height: 1.45;
}

.week-copy-modal-information li[b-7ov57acdan]::before {
    position: absolute;
    top: 0;
    left: 2px;
    color: #20a66a;
    content: "✓";
    font-weight: 900;
}

.week-copy-modal-error[b-7ov57acdan] {
    margin-top: 16px;
    padding: 10px 12px;
    border: 1px solid rgba(204, 61, 75, 0.28);
    border-radius: 10px;
    color: #a32235;
    background: rgba(204, 61, 75, 0.08);
    font-size: 12.5px;
    line-height: 1.4;
}

.theme-dark .week-copy-modal-error[b-7ov57acdan] {
    color: #ffabb6;
    background: rgba(255, 108, 124, 0.10);
}

.week-copy-modal-actions[b-7ov57acdan] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 22px;
    padding-top: 17px;
    border-top: 1px solid var(--border-color);
}

.week-copy-modal-actions button[b-7ov57acdan] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 17px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 150ms ease, box-shadow 170ms ease, filter 150ms ease;
}

.week-copy-modal-cancel[b-7ov57acdan] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
}

.week-copy-modal-confirm[b-7ov57acdan] {
    min-width: 124px;
    border: 1px solid rgba(23, 105, 220, 0.44);
    color: #ffffff;
    background: linear-gradient(135deg, #1f4fae, #1769dc 64%, #2f9fd0);
    box-shadow: 0 9px 22px rgba(23, 105, 220, 0.24);
}

.week-copy-modal-actions button:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-1px);
    filter: saturate(1.05);
}

.week-copy-modal-actions button:active:not(:disabled)[b-7ov57acdan] {
    transform: scale(0.97);
}

.week-copy-modal-actions button:disabled[b-7ov57acdan] {
    cursor: wait;
    opacity: 0.58;
}

.week-copy-modal-spinner[b-7ov57acdan] {
    width: 15px;
    height: 15px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: weekly-manning-action-spin-b-7ov57acdan 700ms linear infinite;
}

@keyframes week-copy-overlay-in-b-7ov57acdan {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes week-copy-modal-in-b-7ov57acdan {
    from { opacity: 0; transform: translateY(8px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes weekly-manning-action-spin-b-7ov57acdan {
    to { transform: rotate(360deg); }
}

@media (max-width: 620px) {
    .week-copy-modal-overlay[b-7ov57acdan] {
        padding: 16px;
    }

    .week-copy-modal[b-7ov57acdan] {
        padding: 19px;
    }

    .week-copy-date-transfer[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }

    .week-copy-date-transfer > div:last-child[b-7ov57acdan] {
        text-align: left;
    }

    .week-copy-date-transfer > svg[b-7ov57acdan] {
        transform: rotate(90deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .weekly-manning-undo-button[b-7ov57acdan],
    .weekly-manning-undo-button svg[b-7ov57acdan],
    .week-copy-modal-actions button[b-7ov57acdan] {
        transition: none;
    }

    .week-copy-modal-overlay[b-7ov57acdan],
    .week-copy-modal[b-7ov57acdan],
    .weekly-manning-undo-spinner[b-7ov57acdan],
    .week-copy-modal-spinner[b-7ov57acdan] {
        animation: none;
    }

    .weekly-manning-undo-button.is-available:not(:hover):not(:focus-visible):not(.is-running):not(:disabled) svg[b-7ov57acdan] {
        animation: none;
    }

    .weekly-manning-undo-button:hover:not(:disabled)[b-7ov57acdan],
    .weekly-manning-undo-button:hover:not(:disabled) svg[b-7ov57acdan],
    .week-copy-modal-actions button:hover:not(:disabled)[b-7ov57acdan],
    .week-copy-modal-actions button:active:not(:disabled)[b-7ov57acdan] {
        transform: none;
    }
}
@keyframes remote-assignment-update-flash-b-7ov57acdan {
    0%, 100% { box-shadow: inset 0 0 0 2px transparent; }
    35% { background-color: color-mix(in srgb, #2fb99a 24%, transparent); box-shadow: inset 0 0 0 2px #2caa94; }
}

@keyframes remote-tbc-update-flash-b-7ov57acdan {
    0%, 100% { box-shadow: inset 0 0 0 2px transparent; }
    35% { background-color: color-mix(in srgb, #e9aa35 27%, transparent); box-shadow: inset 0 0 0 2px #d69a29; }
}

@keyframes remote-conflict-update-flash-b-7ov57acdan {
    0%, 100% { box-shadow: inset 0 0 0 2px transparent; }
    25%, 70% { background-color: color-mix(in srgb, #df3d4a 25%, transparent); box-shadow: inset 0 0 0 2px #d42f3d; }
}

.manning-assignment-cell.remote-assignment-update[b-7ov57acdan],
.day-assignment-cell.remote-assignment-update[b-7ov57acdan] {
    animation: remote-assignment-update-flash-b-7ov57acdan 900ms ease-out;
}

.manning-assignment-cell.remote-tbc-update[b-7ov57acdan],
.day-assignment-cell.remote-tbc-update[b-7ov57acdan] {
    animation: remote-tbc-update-flash-b-7ov57acdan 900ms ease-out;
}

.manning-assignment-cell.remote-conflict-update[b-7ov57acdan],
.day-assignment-cell.remote-conflict-update[b-7ov57acdan] {
    animation: remote-conflict-update-flash-b-7ov57acdan 1300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .manning-assignment-cell.remote-assignment-update[b-7ov57acdan],
    .day-assignment-cell.remote-assignment-update[b-7ov57acdan] {
        animation: none;
        box-shadow: inset 0 0 0 2px #2caa94;
    }

    .manning-assignment-cell.remote-tbc-update[b-7ov57acdan],
    .day-assignment-cell.remote-tbc-update[b-7ov57acdan] {
        animation: none;
        box-shadow: inset 0 0 0 2px #d69a29;
    }


    .manning-assignment-cell.remote-conflict-update[b-7ov57acdan],
    .day-assignment-cell.remote-conflict-update[b-7ov57acdan] {
        animation: none;
        box-shadow: inset 0 0 0 2px #d42f3d;
    }
}

/* =====================================================================
   Weekly Manning toolbar — zoom-safe responsive composition
   ---------------------------------------------------------------------
   Uses the actual available width of the Manning page rather than the
   physical monitor resolution. Browser zoom, Windows scaling, sidebar
   width and the Available rail are therefore all handled consistently.
   Wide desktop layout remains unchanged.
   ===================================================================== */

.manning-page[b-7ov57acdan] {
    container-name: weekly-manning-page-shell;
    container-type: inline-size;
}

/* First response: keep one row and let the search field shrink smoothly.
   This is the normal behaviour for 110% / 125% browser zoom. */
@container weekly-manning-page-shell (max-width: 1450px) {
    .manning-navigation-row[b-7ov57acdan] {
        gap: 6px;
    }

    .manning-navigation-row .area-tabs[b-7ov57acdan] {
        min-width: 0;
        max-width: 800px;
        flex: 1 1 680px;
    }

    .manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
        min-width: 0;
        flex: 1 1 500px;
        gap: 5px;
    }

    .manning-view-toolbar .manning-search[b-7ov57acdan] {
        min-width: 130px;
        max-width: 240px;
        flex: 1 1 170px;
    }

    .manning-search-input[b-7ov57acdan] {
        text-overflow: ellipsis;
    }
}

/* At stronger zoom the search becomes more compact, but the toolbar still
   remains on one row. The input itself is allowed to contract first. */
@container weekly-manning-page-shell (max-width: 1220px) {
    .manning-navigation-row .area-tabs[b-7ov57acdan] {
        flex-basis: 670px;
    }

    .manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
        flex-basis: 440px;
        gap: 4px;
    }

    .manning-view-toolbar .manning-search[b-7ov57acdan] {
        min-width: 96px;
        max-width: 180px;
        flex: 1 1 120px;
        gap: 5px;
        padding-inline: 8px;
    }

    .manning-search-input[b-7ov57acdan]::placeholder {
        font-size: 11.5px;
    }
}

/* Only when the actual Manning page is genuinely too narrow do the area
   tabs and actions move into two controlled rows. */
@container weekly-manning-page-shell (max-width: 1080px) {
    .manning-navigation-row[b-7ov57acdan] {
        align-items: stretch;
        flex-direction: column;
        gap: 7px;
        margin-top: -8px;
    }

    .manning-navigation-row .area-tabs[b-7ov57acdan] {
        width: 100%;
        max-width: none;
        flex: 0 1 auto;
    }

    .manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
        width: 100%;
        min-width: 0;
        flex: 0 1 auto;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .manning-view-toolbar .manning-search[b-7ov57acdan] {
        min-width: 180px;
        max-width: none;
        flex: 1 1 260px;
    }
}

/* At very narrow widths the search receives a full row so the remaining
   actions never overlap it. */
@container weekly-manning-page-shell (max-width: 820px) {
    .manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
        justify-content: flex-start;
    }

    .manning-view-toolbar .manning-search[b-7ov57acdan] {
        width: 100%;
        min-width: 0;
        flex: 1 0 100%;
    }

    .manning-view-toolbar .summary-toggle-button[b-7ov57acdan],
    .manning-view-toolbar .weekly-manning-undo-button[b-7ov57acdan],
    .manning-view-toolbar .view-toggle[b-7ov57acdan] {
        flex: 0 0 auto;
    }
}

/* Final narrow-width cleanup. This does not move or resize the Manning
   grid; it only removes decorative labels that consume toolbar space. */
@container weekly-manning-page-shell (max-width: 720px) {
    .manning-view-toolbar .manning-toolbar-separator[b-7ov57acdan],
    .manning-view-toolbar .view-label[b-7ov57acdan] {
        display: none;
    }
}

/* Weekly Manning Bulk Clear selection. The overlay never participates in
   layout, so headers and cells keep their exact current dimensions. */
.manning-table thead th.bulk-clear-locked[b-7ov57acdan],
.manning-assignment-cell.bulk-clear-locked[b-7ov57acdan],
.unavailable-assignment-cell.bulk-clear-locked[b-7ov57acdan],
.area-tab.bulk-clear-locked[b-7ov57acdan] {
    position: relative;
}

.manning-table thead th.bulk-clear-locked[b-7ov57acdan]::after,
.manning-assignment-cell.bulk-clear-locked[b-7ov57acdan]::after,
.unavailable-assignment-cell.bulk-clear-locked[b-7ov57acdan]::after {
    content: "";
    position: absolute;
    z-index: 8;
    inset: 1px;
    border: 1px solid color-mix(in srgb, #ef4444 58%, transparent);
    border-radius: 4px;
    background: color-mix(in srgb, #ef4444 10%, transparent);
    box-shadow: inset 0 0 12px color-mix(in srgb, #dc2626 10%, transparent);
    pointer-events: none;
    animation: bulkClearSoftPulse-b-7ov57acdan 1.25s ease-in-out infinite;
}

.manning-table thead th.bulk-clear-confirmed[b-7ov57acdan]::after,
.manning-assignment-cell.bulk-clear-confirmed[b-7ov57acdan]::after,
.unavailable-assignment-cell.bulk-clear-confirmed[b-7ov57acdan]::after {
    border-color: color-mix(in srgb, #ff4d4d 88%, transparent);
    background: color-mix(in srgb, #dc2626 19%, transparent);
    box-shadow:
        inset 0 0 16px color-mix(in srgb, #dc2626 22%, transparent),
        0 0 8px color-mix(in srgb, #ef4444 30%, transparent);
    animation-name: bulkClearConfirmedPulse-b-7ov57acdan;
    animation-duration: 0.82s;
}

.area-tab.bulk-clear-locked[b-7ov57acdan] {
    color: #fff;
    background: linear-gradient(135deg, #7f1d1d, #dc2626 62%, #ef4444);
    box-shadow:
        inset 0 0 0 1px rgba(254, 202, 202, 0.72),
        0 0 14px rgba(239, 68, 68, 0.34);
    animation: bulkClearTabPulse-b-7ov57acdan 1.25s ease-in-out infinite;
}

.area-tab.bulk-clear-confirmed[b-7ov57acdan] {
    background: linear-gradient(135deg, #991b1b, #ef4444 58%, #fb7185);
    box-shadow:
        inset 0 0 0 2px rgba(255, 255, 255, 0.62),
        0 0 20px rgba(239, 68, 68, 0.58);
    animation-duration: 0.82s;
}

@keyframes bulkClearSoftPulse-b-7ov57acdan {
    0%, 100% { opacity: 0.48; }
    50% { opacity: 0.86; }
}

@keyframes bulkClearConfirmedPulse-b-7ov57acdan {
    0%, 100% { opacity: 0.68; }
    50% { opacity: 1; }
}

@keyframes bulkClearTabPulse-b-7ov57acdan {
    0%, 100% { filter: saturate(0.9) brightness(0.94); }
    50% { filter: saturate(1.12) brightness(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .manning-table thead th.bulk-clear-locked[b-7ov57acdan]::after,
    .manning-assignment-cell.bulk-clear-locked[b-7ov57acdan]::after,
    .unavailable-assignment-cell.bulk-clear-locked[b-7ov57acdan]::after,
    .area-tab.bulk-clear-locked[b-7ov57acdan] {
        animation: none !important;
    }
}

/* =====================================================================
   Employee Details v9 — restrained professional surface treatment.
   ===================================================================== */
.employee-details-v2 .employee-profile-card[b-7ov57acdan],
.employee-details-v2 .employee-planned-week-card[b-7ov57acdan],
.employee-details-v2 .selected-assignment-card[b-7ov57acdan],
.employee-details-v2 .employee-insight-card[b-7ov57acdan] {
    background: color-mix(in srgb, var(--employee-card) 96%, var(--panel-background) 4%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.employee-details-v2 .employee-profile-card[b-7ov57acdan]::before,
.employee-details-v2 .employee-planned-week-card[b-7ov57acdan]::before,
.employee-details-v2 .selected-assignment-card[b-7ov57acdan]::before,
.employee-details-v2 .employee-insight-card[b-7ov57acdan]::before {
    animation: none;
    content: none;
}

.employee-details-v2 .employee-name-separator[b-7ov57acdan] {
    height: 1px;
    background: color-mix(in srgb, var(--employee-accent) 38%, var(--employee-card-border) 62%);
    background-size: auto;
    opacity: 0.72;
    animation: none;
}

.employee-details-v2 .selected-assignment-card[b-7ov57acdan] {
    grid-template-columns: minmax(128px, 0.62fr) minmax(0, 1.38fr);
    column-gap: 10px;
}

.employee-details-v2 .inline-hours[b-7ov57acdan] {
    padding-left: 8px;
}

.employee-details-v2 .inline-hours-row[b-7ov57acdan] {
    justify-content: flex-start;
    gap: 5px;
}

.employee-details-v2 .inline-hours-select[b-7ov57acdan] {
    min-width: 72px;
    max-width: 92px;
    flex: 1 1 82px;
}

.employee-details-v2 .selected-assignment-card .inline-hours-duration[b-7ov57acdan] {
    display: inline-flex;
    min-width: 58px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: flex-start;
    padding-left: 3px;
    color: var(--secondary-text);
    font-size: clamp(10px, 2.7cqi, 11.5px);
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    text-transform: none;
    white-space: nowrap;
}

.employee-details-v2 .inline-hours-apply[b-7ov57acdan] {
    background: #2f7df4;
    background-size: auto;
    box-shadow: 0 5px 13px rgba(31, 111, 224, 0.22);
    transition:
        background-color 160ms ease,
        border-color 160ms ease,
        box-shadow 180ms ease,
        transform 140ms ease;
}

.employee-details-v2 .inline-hours-apply[b-7ov57acdan]::after {
    animation: none;
    content: none;
}

.employee-details-v2 .inline-hours-apply:hover:not(:disabled)[b-7ov57acdan] {
    background: #286fda;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(31, 111, 224, 0.26);
}

.employee-details-v2 .manual-other-confirm[b-7ov57acdan] {
    border: 0;
    color: #ffffff;
    background: #2f7df4;
    background-size: auto;
    box-shadow: 0 5px 13px rgba(31, 111, 224, 0.22);
    transition:
        background-color 160ms ease,
        box-shadow 180ms ease,
        transform 140ms ease;
}

.employee-details-v2 .manual-other-confirm[b-7ov57acdan]::after {
    animation: none;
    content: none;
}

.employee-details-v2 .manual-other-confirm:hover:not(:disabled)[b-7ov57acdan] {
    background: #286fda;
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(31, 111, 224, 0.26);
}

.employee-details-v2.is-permanent-worker .manual-status-options[b-7ov57acdan] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.employee-details-v2.is-permanent-worker .manual-status[b-7ov57acdan] {
    min-height: 64px;
    gap: 6px;
    padding: 8px 4px;
    border-color: color-mix(in srgb, var(--ms-color) 38%, var(--employee-card-border) 62%);
    border-radius: 9px;
    background: color-mix(in srgb, var(--employee-card) 96%, var(--ms-color) 4%);
    box-shadow: none;
}

.employee-details-v2.is-permanent-worker .manual-status .ms-icon[b-7ov57acdan] {
    width: 22px;
    height: 22px;
    stroke-width: 1.8;
}

.employee-details-v2.is-permanent-worker .manual-status .ms-label[b-7ov57acdan] {
    font-size: clamp(9px, 2.4cqi, 10.5px);
}

.employee-details-v2.is-permanent-worker .manual-status:hover:not(:disabled)[b-7ov57acdan] {
    border-color: color-mix(in srgb, var(--ms-color) 58%, var(--employee-card-border) 42%);
    background: color-mix(in srgb, var(--employee-card) 91%, var(--ms-color) 9%);
    box-shadow: 0 3px 9px rgba(15, 23, 42, 0.1);
    transform: translateY(-1px);
}

.app-shell.theme-dark .employee-details-v2 .employee-profile-card[b-7ov57acdan],
.app-shell.theme-dark .employee-details-v2 .employee-planned-week-card[b-7ov57acdan],
.app-shell.theme-dark .employee-details-v2 .selected-assignment-card[b-7ov57acdan],
.app-shell.theme-dark .employee-details-v2 .employee-insight-card[b-7ov57acdan] {
    background: color-mix(in srgb, var(--employee-card) 96%, #111827 4%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.app-shell.theme-dark .employee-details-v2.is-permanent-worker .manual-status[b-7ov57acdan] {
    color: color-mix(in srgb, var(--ms-color) 84%, #ffffff 16%);
    background: color-mix(in srgb, var(--employee-card) 96%, var(--ms-color) 4%);
    box-shadow: none;
}

@container (max-width: 430px) {
    .employee-details-v2 .selected-assignment-card[b-7ov57acdan] {
        grid-template-columns: 1fr;
    }

    .employee-details-v2 .inline-hours[b-7ov57acdan] {
        padding-top: 9px;
        padding-left: 0;
        border-top: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
        border-left: 0;
    }
}

/* =====================================================================
   Weekly Manning mobile shell
   ===================================================================== */

.area-tab-label-mobile[b-7ov57acdan],
.manning-search-trigger[b-7ov57acdan],
.manning-search-close[b-7ov57acdan],
.available-mobile-backdrop[b-7ov57acdan] {
    display: none;
}

@media (max-width: 820px),
       (pointer: coarse),
       (hover: none),
       (max-width: 900px) and (max-height: 500px) {
    .area-tab-shortcut[b-7ov57acdan],
    .manning-page.agency-mode .area-tab-shortcut[b-7ov57acdan],
    .manning-page.agency-mode .area-tab.has-pending-agency-tbc .area-tab-shortcut[b-7ov57acdan] {
        display: none;
    }
}

@media (max-width: 820px),
       (max-width: 1024px) and (pointer: coarse),
       (max-width: 900px) and (max-height: 500px) {
    .manning-page[b-7ov57acdan] {
        max-width: 100%;
    }

    .manning-navigation-row[b-7ov57acdan] {
        width: 100%;
        max-width: 100%;
        align-items: stretch;
        flex-direction: column;
        gap: 4px;
        margin-top: -8px;
    }

    .manning-navigation-row .area-tabs[b-7ov57acdan] {
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        flex: 0 0 auto;
        height: 48px;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        touch-action: pan-x;
    }

    .manning-navigation-row .area-tabs[b-7ov57acdan]::-webkit-scrollbar {
        display: none;
    }

    .area-tab[b-7ov57acdan] {
        min-width: 96px;
        height: 40px;
        min-height: 40px;
        flex: 0 0 auto;
        padding: 4px 10px;
        scroll-snap-align: nearest;
    }

    .area-tab.has-selected-employee-cue[b-7ov57acdan] {
        padding-left: 30px;
    }

    .area-tab-label-desktop[b-7ov57acdan] {
        display: none;
    }

    .area-tab-label-mobile[b-7ov57acdan] {
        display: block;
    }

    .manning-navigation-row .manning-view-toolbar[b-7ov57acdan] {
        position: relative;
        width: 100%;
        max-width: 100%;
        height: 44px;
        min-width: 0;
        flex: 0 0 auto;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-start;
        gap: 4px;
    }

    .manning-view-toolbar .manning-search[b-7ov57acdan] {
        position: absolute;
        z-index: 430;
        top: calc(100% + 4px);
        right: 0;
        left: 0;
        display: none;
        box-sizing: border-box;
        width: 100%;
        min-width: 0;
        max-width: none;
        min-height: 44px;
        flex: none;
        box-shadow: 0 12px 30px rgba(15, 23, 42, 0.22);
    }

    .manning-view-toolbar .manning-search.mobile-open[b-7ov57acdan] {
        display: flex;
    }

    .manning-search-trigger[b-7ov57acdan] {
        display: inline-flex;
        width: auto;
        min-width: 44px;
        height: 44px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        gap: 5px;
        padding: 0 10px;
        border: 1px solid var(--border-color);
        border-radius: 10px;
        color: var(--primary-text);
        background: var(--button-background);
        font: inherit;
        font-size: 11.5px;
        font-weight: 800;
        cursor: pointer;
    }

    .manning-search-trigger.active[b-7ov57acdan],
    .manning-search-trigger:focus-visible[b-7ov57acdan] {
        border-color: #1769dc;
        color: #1769dc;
        outline: none;
        box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.14);
    }

    .manning-search-trigger svg[b-7ov57acdan] {
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .manning-search-close[b-7ov57acdan] {
        display: inline-flex;
        width: 40px;
        min-width: 40px;
        height: 40px;
        align-items: center;
        justify-content: center;
        padding: 0;
        border: 0;
        border-left: 1px solid var(--border-color);
        color: var(--secondary-text);
        background: transparent;
        font: inherit;
        font-size: 21px;
        cursor: pointer;
    }

    .manning-view-toolbar .summary-toggle-button[b-7ov57acdan],
    .manning-view-toolbar .weekly-manning-undo-button[b-7ov57acdan] {
        min-height: 44px;
    }

    .manning-view-toolbar .summary-toggle-button[b-7ov57acdan] {
        padding-inline: 12px;
    }

    .manning-view-toolbar .weekly-manning-undo-button[b-7ov57acdan] {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .manning-view-toolbar .manning-toolbar-separator[b-7ov57acdan],
    .manning-view-toolbar .view-label[b-7ov57acdan] {
        display: none;
    }

    .manning-view-toolbar .view-toggle[b-7ov57acdan] {
        width: 112px;
        min-width: 112px;
        height: 42px;
        min-height: 42px;
        flex: 0 0 112px;
        grid-template-columns: repeat(2, minmax(54px, 1fr));
        padding: 2px;
    }

    .manning-view-toolbar .view-toggle-thumb[b-7ov57acdan] {
        top: 2px;
        bottom: 2px;
        left: 2px;
        width: calc(50% - 2px);
    }

    .manning-view-toolbar .view-toggle-button[b-7ov57acdan] {
        min-width: 52px;
        min-height: 38px;
        padding-inline: 7px;
    }

    .manning-page.has-rail[b-7ov57acdan] {
        display: flex;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .manning-page.has-rail .manning-navigation-row[b-7ov57acdan],
    .manning-page.has-rail .manning-main-column[b-7ov57acdan] {
        width: 100%;
    }

    .available-mobile-backdrop[b-7ov57acdan] {
        position: fixed;
        z-index: 890;
        inset: var(--app-header-height, 112px) 0 0;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(7, 15, 28, 0.48);
        backdrop-filter: blur(2px);
        cursor: default;
    }

    .manning-page.has-rail .manning-right-column[b-7ov57acdan] {
        position: fixed;
        z-index: 900;
        top: var(--app-header-height, 112px);
        right: 0;
        bottom: 0;
        display: flex;
        width: min(100vw, 520px);
        max-height: none;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        grid-column: auto;
        grid-row: auto;
        background: var(--panel-background);
        animation: available-mobile-drawer-in-b-7ov57acdan 180ms ease-out both;
    }

    .manning-page.has-rail .manning-right-column .available-rail[b-7ov57acdan] {
        position: static;
        width: 100%;
        height: 100%;
        min-height: 100%;
        flex: 0 0 100%;
        max-height: none;
        border-radius: 16px 0 0 16px;
        box-shadow: -20px 0 48px rgba(7, 15, 28, 0.28);
    }

    .manning-page.has-rail .manning-right-column .available-rail-body[b-7ov57acdan] {
        max-height: none;
    }

    .available-rail-close[b-7ov57acdan] {
        width: 44px;
        height: 44px;
    }

    .day-navigation[b-7ov57acdan] {
        box-sizing: border-box;
        height: 90px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 32px 44px;
        align-items: center;
        gap: 4px;
        padding: 5px 6px;
    }

    .selected-day[b-7ov57acdan] {
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 6px;
        overflow: hidden;
        text-align: center;
        white-space: nowrap;
    }

    .selected-day-name[b-7ov57acdan] {
        flex: 0 0 auto;
        font-size: 12px;
        line-height: 1;
    }

    .selected-day-context[b-7ov57acdan] {
        min-width: 0;
        flex-wrap: nowrap;
        justify-content: center;
        gap: 4px;
        overflow: hidden;
        font-size: 10px;
        white-space: nowrap;
    }

    .selected-day-context strong[b-7ov57acdan] {
        flex: 0 0 auto;
        font-size: 10.5px;
    }

    .selected-day-context > span:not(.selected-day-separator):not(.selected-day-today-chip)[b-7ov57acdan] {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .selected-day-today-chip[b-7ov57acdan] {
        flex: 0 0 auto;
    }

    .day-tabs[b-7ov57acdan] {
        height: 44px;
        gap: 4px;
    }

    .day-tab[b-7ov57acdan] {
        height: 42px;
        min-height: 42px;
        flex-direction: row;
        gap: 4px;
        padding: 3px;
    }

    .day-line-header[b-7ov57acdan] {
        height: 60px;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: 24px 18px;
        column-gap: 6px;
        row-gap: 4px;
        padding: 6px 8px;
    }

    .day-line-name[b-7ov57acdan] {
        max-height: 24px;
        font-size: 13px;
        line-height: 1;
    }

    .day-line-meta[b-7ov57acdan] {
        gap: 3px;
    }

    .day-line-meta span[b-7ov57acdan] {
        padding: 2px 4px;
        font-size: 8.75px;
    }

    .day-line-position-count[b-7ov57acdan] {
        font-size: 9.5px;
    }

    .day-line-agency-summary[b-7ov57acdan] {
        height: 18px;
        gap: 3px;
    }

    .day-line-header .day-line-agency-summary .line-agency-chip[b-7ov57acdan] {
        height: 18px;
        min-height: 18px;
        padding: 0 5px;
        font-size: 8.5px;
        line-height: 1;
    }

    .day-position-row[b-7ov57acdan] {
        box-sizing: border-box;
        height: 48px;
        min-height: 48px;
        grid-template-columns: minmax(92px, 0.68fr) minmax(0, 1.5fr);
        gap: 6px;
        padding: 1px 6px;
    }

    .day-assignment[b-7ov57acdan],
    .day-empty-assignment[b-7ov57acdan] {
        min-height: 44px;
    }
}

@media (max-width: 520px) {
    .manning-search-trigger[b-7ov57acdan] {
        width: 44px;
        flex: 0 0 44px;
        padding: 0;
    }

    .manning-search-trigger > span[b-7ov57acdan] {
        display: none;
    }

    .manning-view-toolbar .summary-toggle-button[b-7ov57acdan] {
        position: relative;
        width: 44px;
        min-width: 44px;
        flex: 0 0 44px;
        justify-content: center;
        padding: 0;
    }

    .manning-view-toolbar .summary-toggle-button > span:not(.available-pulse-dot)[b-7ov57acdan] {
        display: none;
    }

    .manning-view-toolbar .available-pulse-dot[b-7ov57acdan] {
        position: absolute;
        top: 5px;
        right: 5px;
        width: 7px;
        height: 7px;
        margin: 0;
    }

    .manning-page.has-rail .manning-right-column[b-7ov57acdan] {
        left: 0;
        width: 100vw;
    }

    .manning-page.has-rail .manning-right-column .available-rail[b-7ov57acdan] {
        border-radius: 0;
    }
}

@keyframes available-mobile-drawer-in-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateX(18px);
    }

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

@media (prefers-reduced-motion: reduce) {
    .manning-page.has-rail .manning-right-column[b-7ov57acdan] {
        animation: none;
    }

    .manning-navigation-row .area-tabs[b-7ov57acdan] {
        scroll-behavior: auto;
    }
}

/* =====================================================================
   Weekly Manning Stage A1/A2 - Internal tabbed right rail
   ===================================================================== */

.manning-page.has-rail .manning-right-column.internal-manning-rail[b-7ov57acdan] {
    max-height: calc(100vh - var(--manning-rail-top-offset));
}

.manning-page.has-rail .manning-right-column.internal-manning-rail .available-rail[b-7ov57acdan] {
    width: 100%;
    height: calc(100vh - var(--manning-rail-top-offset));
    max-height: calc(100vh - var(--manning-rail-top-offset));
}

.manning-page.has-rail .manning-right-column.internal-manning-rail .available-rail-body[b-7ov57acdan] {
    max-height: none;
}

.manning-rail-header[b-7ov57acdan] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
}

.manning-rail-tabs[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 80%, var(--border-color) 20%);
}

.manning-rail-tab[b-7ov57acdan] {
    display: inline-flex;
    min-width: 0;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.manning-rail-tab:hover[b-7ov57acdan] {
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 7%, transparent);
}

.manning-rail-tab.active[b-7ov57acdan] {
    color: color-mix(in srgb, #1769dc 82%, var(--primary-text) 18%);
    background: var(--panel-background);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1769dc 38%, var(--border-color) 62%);
}

.manning-rail-tab:focus-visible[b-7ov57acdan],
.manning-rail-header .available-rail-close:focus-visible[b-7ov57acdan] {
    outline: 2px solid color-mix(in srgb, #1769dc 58%, transparent);
    outline-offset: 2px;
}

.manning-rail-tab-count[b-7ov57acdan] {
    min-width: 24px;
    padding: 2px 7px;
    border-radius: 999px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--border-color) 58%, transparent);
    font-family: var(--font-manning-mono);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
}

.manning-rail-tab.active .manning-rail-tab-count[b-7ov57acdan] {
    color: color-mix(in srgb, #1769dc 74%, var(--secondary-text) 26%);
    background: color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%);
}

.manning-rail-free-panel[b-7ov57acdan] {
    display: flex;
    min-height: 0;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
}

.manning-rail-free-panel[hidden][b-7ov57acdan],
.manning-rail-tabpanel[hidden][b-7ov57acdan] {
    display: none;
}

.manning-page.agency-mode .manning-rail-free-panel[b-7ov57acdan] {
    display: contents;
}

.manning-rail-tabpanel[b-7ov57acdan] {
    min-height: 0;
    flex: 1 1 auto;
}

.internal-tabbed-rail .available-rail-close[b-7ov57acdan] {
    background: transparent;
    box-shadow: none;
}

.internal-tabbed-rail .available-rail-close:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 48%, var(--border-color) 52%);
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 6%, transparent);
}

.internal-tabbed-rail .available-rail-tabs[b-7ov57acdan] {
    gap: 4px;
    padding-top: 7px;
    padding-bottom: 7px;
    background: transparent;
}

.internal-tabbed-rail .available-rail-tab[b-7ov57acdan] {
    min-height: 32px;
    border-radius: 7px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 11px;
    font-weight: 650;
    box-shadow: none;
}

.internal-tabbed-rail .available-rail-tab:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 42%, var(--border-color) 58%);
    color: color-mix(in srgb, #1769dc 76%, var(--primary-text) 24%);
    background: color-mix(in srgb, #1769dc 5%, var(--panel-background) 95%);
    box-shadow: none;
}

.internal-tabbed-rail .available-rail-tab.active[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 35%, var(--border-color) 65%);
    color: color-mix(in srgb, #1769dc 78%, var(--primary-text) 22%);
    background: color-mix(in srgb, #1769dc 8%, var(--panel-background) 92%);
    box-shadow: none;
}

.internal-tabbed-rail .available-rail-tab-count[b-7ov57acdan],
.internal-tabbed-rail .available-rail-tab.active .available-rail-tab-count[b-7ov57acdan] {
    min-width: 20px;
    padding: 1px 6px;
    color: inherit;
    background: color-mix(in srgb, currentColor 9%, transparent);
    font-size: 10px;
}

.summary-toggle-button.available-toggle-button.internal-panel-toggle[b-7ov57acdan] {
    width: 124px;
    min-width: 124px;
    max-width: 124px;
    flex: 0 0 124px;
    justify-content: flex-start;
    gap: 6px;
    padding: 0 9px;
    box-shadow: none;
}

.manning-view-toolbar .summary-toggle-button.internal-panel-toggle > .workforce-label[b-7ov57acdan] {
    display: inline !important;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.manning-view-toolbar .summary-toggle-button.internal-panel-toggle > .workforce-count[b-7ov57acdan] {
    display: inline-flex !important;
    box-sizing: border-box;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border-radius: 999px;
    color: inherit;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-family: var(--font-manning-mono);
    font-size: 10px;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.summary-toggle-button.available-toggle-button.internal-panel-toggle .available-pulse-dot[b-7ov57acdan] {
    display: none;
}

.summary-toggle-button.available-toggle-button.internal-panel-toggle:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 58%, var(--border-color) 42%);
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 6%, var(--button-background) 94%);
    box-shadow: none;
}

.summary-toggle-button.available-toggle-button.internal-panel-toggle.active[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 44%, var(--border-color) 56%);
    color: color-mix(in srgb, #1769dc 82%, var(--primary-text) 18%);
    background: color-mix(in srgb, #1769dc 9%, var(--button-background) 91%);
    box-shadow: none;
}

.summary-toggle-button.available-toggle-button.internal-panel-toggle.has-available:not(.active)[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1d9d76 48%, var(--border-color) 52%);
    color: color-mix(in srgb, #0f6b4f 78%, var(--primary-text) 22%);
    background: color-mix(in srgb, #35c99a 8%, var(--button-background) 92%);
    box-shadow: none;
    animation: none;
}

.summary-toggle-button.available-toggle-button.internal-panel-toggle.has-available.active[b-7ov57acdan] {
    box-shadow: none;
}

.manning-rail-absences-panel[b-7ov57acdan] {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.theme-dark .manning-rail-tab.active[b-7ov57acdan] {
    color: #58d1e4;
    background: color-mix(in srgb, #58d1e4 9%, var(--panel-background) 91%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #58d1e4 38%, var(--border-color) 62%);
}

.theme-dark .manning-rail-tab.active .manning-rail-tab-count[b-7ov57acdan] {
    color: #80dce9;
    background: color-mix(in srgb, #58d1e4 12%, var(--panel-background) 88%);
}

.theme-dark .summary-toggle-button.available-toggle-button.internal-panel-toggle.active[b-7ov57acdan] {
    border-color: color-mix(in srgb, #58d1e4 38%, var(--border-color) 62%);
    color: #80dce9;
    background: color-mix(in srgb, #58d1e4 8%, var(--button-background) 92%);
}

@media (max-width: 1366px) {
    .manning-page.has-rail:not(.agency-mode)[b-7ov57acdan] {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }

    .manning-page.has-rail:not(.agency-mode) .manning-navigation-row[b-7ov57acdan] {
        grid-column: 1;
        grid-row: 1;
    }

    .manning-page.has-rail:not(.agency-mode) .manning-main-column[b-7ov57acdan] {
        width: 100%;
        grid-column: 1;
        grid-row: 2;
    }

    .manning-page.has-rail:not(.agency-mode) .internal-rail-backdrop[b-7ov57acdan] {
        position: fixed;
        z-index: 890;
        inset: var(--manning-rail-top-offset) 0 0;
        display: block;
        padding: 0;
        border: 0;
        background: rgba(7, 15, 28, 0.48);
        backdrop-filter: blur(2px);
        cursor: default;
    }

    .manning-page.has-rail:not(.agency-mode) .manning-right-column.internal-manning-rail[b-7ov57acdan] {
        position: fixed;
        z-index: 900;
        top: var(--manning-rail-top-offset);
        right: 0;
        bottom: 0;
        left: auto;
        display: flex;
        width: min(100vw, var(--manning-rail-width));
        max-height: none;
        overflow: hidden;
        grid-column: auto;
        grid-row: auto;
        background: var(--panel-background);
        animation: available-mobile-drawer-in-b-7ov57acdan 180ms ease-out both;
    }

    .manning-page.has-rail:not(.agency-mode) .manning-right-column.internal-manning-rail .available-rail[b-7ov57acdan] {
        position: static;
        width: 100%;
        height: 100%;
        min-height: 100%;
        flex: 0 0 100%;
        max-height: none;
        border-radius: 16px 0 0 16px;
        box-shadow: -20px 0 48px rgba(7, 15, 28, 0.28);
    }
}

@media (max-width: 820px),
       (max-width: 1024px) and (pointer: coarse),
       (max-width: 900px) and (max-height: 500px) {
    .manning-page.has-rail:not(.agency-mode) .internal-rail-backdrop[b-7ov57acdan] {
        inset: var(--app-header-height, 112px) 0 0;
    }

    .manning-page.has-rail:not(.agency-mode) .manning-right-column.internal-manning-rail[b-7ov57acdan] {
        top: var(--app-header-height, 112px);
        width: min(100vw, 520px);
        overflow-x: hidden;
        overflow-y: hidden;
        overscroll-behavior: contain;
    }
}

/* ============================================================
   Weekly Manning - controlled IBM Plex typography
   Human-readable interface content inherits Sans. Mono is limited
   to short operational labels, dates, times, badges and metrics.
   ============================================================ */

.manning-page[b-7ov57acdan],
.absence-board[b-7ov57acdan],
.employee-details-panel[b-7ov57acdan],
.week-copy-modal[b-7ov57acdan],
.tbc-context-menu[b-7ov57acdan] {
    font-family: var(--font-manning-sans);
}

.area-tab-shortcut[b-7ov57acdan],
.manning-search-count[b-7ov57acdan],
.manning-table .day-name[b-7ov57acdan],
.manning-table thead small[b-7ov57acdan],
.line-shift[b-7ov57acdan],
.line-site[b-7ov57acdan],
.line-position-count[b-7ov57acdan],
.assignment-hours[b-7ov57acdan],
.agency-badge[b-7ov57acdan],
.line-cell button.line-agency-chip[b-7ov57acdan],
.day-line-agency-summary button.line-agency-chip[b-7ov57acdan],
.day-tab-name[b-7ov57acdan],
.day-tab-date[b-7ov57acdan],
.day-line-meta[b-7ov57acdan],
.day-line-position-count[b-7ov57acdan],
.available-rail-eyebrow[b-7ov57acdan],
.available-rail-tab-count[b-7ov57acdan],
.available-rail-count > strong[b-7ov57acdan],
.available-day-flag[b-7ov57acdan],
.available-employee-badge[b-7ov57acdan],
.absence-cal-eyebrow[b-7ov57acdan],
.absence-calendar-title > strong[b-7ov57acdan],
.absence-cal-weekday[b-7ov57acdan],
.absence-cal-day[b-7ov57acdan],
.agency-availability-cal-day[b-7ov57acdan],
.week-copy-modal-eyebrow[b-7ov57acdan],
.week-copy-date-transfer[b-7ov57acdan],
.absence-board-handle-label small[b-7ov57acdan],
.absence-board-day-header[b-7ov57acdan],
.absence-status-count[b-7ov57acdan],
.sb-entry-meta[b-7ov57acdan],
.board-agency-badge[b-7ov57acdan],
.employee-panel-eyebrow[b-7ov57acdan],
.employee-week-selector-date[b-7ov57acdan],
.day-tile-head[b-7ov57acdan],
.day-tile-hours[b-7ov57acdan],
.day-tile-duration[b-7ov57acdan],
.inline-hours-duration[b-7ov57acdan],
.inline-hours-select[b-7ov57acdan],
.employee-stats-list dd[b-7ov57acdan] {
    font-family: var(--font-manning-mono);
    font-variant-numeric: tabular-nums;
}

.manning-page[b-7ov57acdan]  .readiness-all-areas-heading > span,
.manning-page[b-7ov57acdan]  .readiness-eyebrow,
.manning-page[b-7ov57acdan]  .readiness-week-range,
.manning-page[b-7ov57acdan]  .readiness-live-value,
.manning-page[b-7ov57acdan]  .staffing-level-summary,
.manning-page[b-7ov57acdan]  .readiness-day-segment header,
.manning-page[b-7ov57acdan]  .readiness-day-score,
.manning-page[b-7ov57acdan]  .readiness-day-support,
.manning-page[b-7ov57acdan]  .readiness-day-arithmetic,
.manning-page[b-7ov57acdan]  .readiness-day-segment footer,
.manning-page[b-7ov57acdan]  .workforce-availability-strip b,
.manning-page[b-7ov57acdan]  .line-readiness-row.is-header,
.manning-page[b-7ov57acdan]  .line-readiness-cell > span,
.manning-page[b-7ov57acdan]  .additional-support-indicator,
.manning-page[b-7ov57acdan]  .line-readiness-detail-card dd,
.manning-page[b-7ov57acdan]  .global-summary-card > strong,
.manning-page[b-7ov57acdan]  .global-summary-card > div > strong,
.manning-page[b-7ov57acdan]  .global-summary-card > span:not(.global-metric-icon),
.manning-page[b-7ov57acdan]  .area-metric-group > strong,
.manning-page[b-7ov57acdan]  .area-metric-group > span,
.manning-page[b-7ov57acdan]  .area-inactive-days,
.manning-page[b-7ov57acdan]  .area-day-status > b,
.manning-page[b-7ov57acdan]  .area-day-status > strong {
    font-family: var(--font-manning-mono);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   Weekly Manning segmented control polish
   The area selector is primary. Week/Day uses the quieter
   secondary treatment shared with the Readiness scope control.
   External Agency controls and functional alert states retain
   their existing presentation.
   ============================================================ */

.manning-page[b-7ov57acdan] {
    --manning-segment-surface: color-mix(in srgb, var(--panel-background) 96%, var(--border-color) 4%);
    --manning-segment-border: color-mix(in srgb, var(--border-color) 86%, var(--secondary-text) 14%);
    --manning-segment-divider: color-mix(in srgb, var(--border-color) 78%, transparent);
    --manning-segment-hover-surface: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
    --manning-segment-active-surface: color-mix(in srgb, var(--panel-background) 84%, #1769dc 16%);
    --manning-segment-active-text: color-mix(in srgb, var(--primary-text) 58%, #1769dc 42%);
    --manning-segment-accent: #1769dc;
    --manning-segment-focus: color-mix(in srgb, #1769dc 78%, var(--primary-text) 22%);
}

.app-shell.theme-dark .manning-page[b-7ov57acdan] {
    --manning-segment-surface: color-mix(in srgb, var(--panel-background) 92%, #ffffff 8%);
    --manning-segment-border: color-mix(in srgb, var(--border-color) 72%, #9eb8d6 28%);
    --manning-segment-divider: color-mix(in srgb, var(--border-color) 82%, transparent);
    --manning-segment-hover-surface: color-mix(in srgb, var(--panel-background) 86%, #58acc0 14%);
    --manning-segment-active-surface: color-mix(in srgb, var(--panel-background) 76%, #3d8bff 24%);
    --manning-segment-active-text: #e7f1ff;
    --manning-segment-accent: #58acc0;
    --manning-segment-focus: #73c5d7;
}

/* Primary segmented control: operational area selection. */
.manning-page:not(.agency-mode) .area-tabs[b-7ov57acdan] {
    box-sizing: border-box;
    gap: 0;
    padding: 3px;
    border-color: var(--manning-segment-border);
    border-radius: 10px;
    background: var(--manning-segment-surface);
    box-shadow: none;
}

.manning-page:not(.agency-mode) .area-tabs:hover[b-7ov57acdan] {
    box-shadow: none;
}

.manning-page:not(.agency-mode) .area-tab[b-7ov57acdan] {
    box-sizing: border-box;
    border-radius: 0;
}

.manning-page:not(.agency-mode) .area-tab:first-child[b-7ov57acdan] {
    border-radius: 6px 0 0 6px;
}

.manning-page:not(.agency-mode) .area-tab:last-child[b-7ov57acdan] {
    border-radius: 0 6px 6px 0;
}

.manning-page:not(.agency-mode) .area-tab + .area-tab[b-7ov57acdan] {
    border-left: 1px solid var(--manning-segment-divider);
}

.manning-page:not(.agency-mode) .area-tab:not(.bulk-clear-locked):not(.bulk-clear-confirmed):not(.spring-load-hover)[b-7ov57acdan] {
    color: var(--secondary-text);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    animation: none;
}

.manning-page:not(.agency-mode) .area-tab:not(.active):not(.bulk-clear-locked):not(.bulk-clear-confirmed):not(.spring-load-hover):hover[b-7ov57acdan] {
    color: var(--primary-text);
    background: var(--manning-segment-hover-surface);
    box-shadow: none;
    transform: none;
}

.manning-page:not(.agency-mode) .area-tab.active:not(.bulk-clear-locked):not(.bulk-clear-confirmed):not(.spring-load-hover)[b-7ov57acdan] {
    color: var(--manning-segment-active-text);
    background: var(--manning-segment-active-surface);
    box-shadow:
        inset 0 -3px 0 var(--manning-segment-accent),
        inset 0 0 0 1px color-mix(in srgb, var(--manning-segment-accent) 20%, transparent);
    text-shadow: none;
    transform: none;
    animation: none;
}

.manning-page:not(.agency-mode) .area-tab.active:not(.bulk-clear-locked):not(.bulk-clear-confirmed):not(.spring-load-hover)[b-7ov57acdan]::before {
    content: none;
    animation: none;
}

.manning-page:not(.agency-mode) .area-tab:focus-visible[b-7ov57acdan] {
    z-index: 5;
    outline: 2px solid var(--manning-segment-focus);
    outline-offset: -2px;
}

.manning-page:not(.agency-mode) .area-tab.active:not(.bulk-clear-locked):not(.bulk-clear-confirmed) .area-tab-shortcut[b-7ov57acdan] {
    color: var(--manning-segment-active-text);
    border-color: color-mix(in srgb, var(--manning-segment-accent) 44%, transparent);
    background: color-mix(in srgb, var(--panel-background) 78%, var(--manning-segment-accent) 22%);
    box-shadow: none;
}

.manning-page:not(.agency-mode) .area-tab-employee-cue[b-7ov57acdan] {
    border: 1px solid color-mix(in srgb, var(--manning-segment-accent) 48%, transparent);
    color: var(--manning-segment-active-text);
    background: var(--manning-segment-active-surface);
    box-shadow: none;
    animation: none !important;
}

/* Secondary segmented control: Week/Day view selection. */
.manning-page:not(.agency-mode) .view-toggle[b-7ov57acdan] {
    box-sizing: border-box;
    border-color: var(--manning-segment-border);
    background: var(--manning-segment-surface);
    box-shadow: none;
}

.manning-page:not(.agency-mode) .view-toggle:hover[b-7ov57acdan] {
    box-shadow: none;
}

.manning-page:not(.agency-mode) .view-toggle-thumb[b-7ov57acdan] {
    background: var(--manning-segment-active-surface);
    box-shadow:
        inset 0 -2px 0 var(--manning-segment-accent),
        inset 0 0 0 1px color-mix(in srgb, var(--manning-segment-accent) 16%, transparent);
}

.manning-page:not(.agency-mode) .view-toggle-button[b-7ov57acdan] {
    box-sizing: border-box;
    color: var(--secondary-text);
    text-shadow: none;
}

.manning-page:not(.agency-mode) .view-toggle-button:hover[b-7ov57acdan] {
    color: var(--primary-text);
    transform: none;
}

.manning-page:not(.agency-mode) .view-toggle-button.active[b-7ov57acdan] {
    color: var(--manning-segment-active-text);
    text-shadow: none;
}

.manning-page:not(.agency-mode) .view-toggle-button:active[b-7ov57acdan] {
    transform: none;
}

.manning-page:not(.agency-mode) .view-toggle-button:focus-visible[b-7ov57acdan] {
    outline: 2px solid var(--manning-segment-focus);
    outline-offset: -2px;
}

/* Keep both secondary options fully inside the 390px toolbar without
   changing its height or the surrounding Workforce controls. */
@media (max-width: 400px) {
    .manning-page:not(.agency-mode) .manning-view-toolbar .view-toggle[b-7ov57acdan] {
        width: 102px;
        min-width: 102px;
        flex-basis: 102px;
        grid-template-columns: repeat(2, minmax(49px, 1fr));
    }

    .manning-page:not(.agency-mode) .manning-view-toolbar .view-toggle-button[b-7ov57acdan] {
        min-width: 48px;
        padding-inline: 5px;
    }
}

/* Day View weekday navigation: one compact, flat segmented control. */
.manning-page:not(.agency-mode) .day-tabs[b-7ov57acdan] {
    box-sizing: border-box;
    gap: 0;
    border: 1px solid var(--manning-segment-border);
    border-radius: 10px;
    background: var(--manning-segment-surface);
    box-shadow: none;
    overflow: hidden;
}

.manning-page:not(.agency-mode) .day-tab[b-7ov57acdan] {
    box-sizing: border-box;
    border: 0;
    border-radius: 0;
    color: var(--secondary-text);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    transition:
        color 140ms ease,
        background 140ms ease;
}

.manning-page:not(.agency-mode) .day-tab + .day-tab[b-7ov57acdan] {
    border-left: 1px solid var(--manning-segment-divider);
}

.manning-page:not(.agency-mode) .day-tab:not(.active):hover[b-7ov57acdan] {
    border-color: transparent;
    color: var(--primary-text);
    background: var(--manning-segment-hover-surface);
    box-shadow: none;
    transform: none;
}

.manning-page:not(.agency-mode) .day-tab:active[b-7ov57acdan] {
    transform: none;
}

.manning-page:not(.agency-mode) .day-tab:focus-visible[b-7ov57acdan] {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--manning-segment-focus);
    outline-offset: -2px;
}

.manning-page:not(.agency-mode) .day-tab.active[b-7ov57acdan] {
    border-color: transparent;
    color: var(--manning-segment-active-text);
    background: var(--manning-segment-active-surface);
    box-shadow: inset 0 -3px 0 var(--manning-segment-accent);
    text-shadow: none;
    transform: none;
}

.manning-page:not(.agency-mode) .day-tab.is-today:not(.active)[b-7ov57acdan] {
    border-color: transparent;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--manning-segment-accent) 38%, transparent);
}

.manning-page:not(.agency-mode) .day-tab-name[b-7ov57acdan] {
    font-family: var(--font-manning-mono);
    font-weight: 600;
}

.manning-page:not(.agency-mode) .day-tab-date[b-7ov57acdan] {
    color: var(--secondary-text);
    font-family: var(--font-manning-mono);
    font-size: 11px;
    font-weight: 600;
}

.manning-page:not(.agency-mode) .day-tab.active .day-tab-date[b-7ov57acdan] {
    color: color-mix(in srgb, var(--manning-segment-active-text) 76%, var(--secondary-text) 24%);
}
/* /Components/Pages/LinesAndPositions.razor.rz.scp.css */
.configuration-page[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 16px;
    font-size: 14px;
}

.configuration-header[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    padding: 4px 2px 0;
}

.configuration-header > div:first-child[b-xvrunmq69b] {
    width: min(760px, 100%);
}

.configuration-header h1[b-xvrunmq69b] {
    margin: 5px 0 5px;
    color: var(--primary-text);
    font-size: 28px;
    font-weight: 650;
    letter-spacing: -0.45px;
}

.configuration-header p[b-xvrunmq69b] {
    max-width: 820px;
    margin: 0;
    color: var(--secondary-text);
    font-size: 14px;
    line-height: 1.5;
}

.configuration-eyebrow[b-xvrunmq69b] {
    color: #1769dc;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

.header-actions[b-xvrunmq69b] {
    display: flex;
    margin-left: 4px;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
}

.primary-action[b-xvrunmq69b],
.secondary-header-action[b-xvrunmq69b],
.secondary-action[b-xvrunmq69b],
.save-action[b-xvrunmq69b],
.refresh-button[b-xvrunmq69b],
.panel-add-button[b-xvrunmq69b] {
    font-family: inherit;
    cursor: pointer;
}

.primary-action[b-xvrunmq69b],
.secondary-header-action[b-xvrunmq69b] {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 650;
}

.primary-action[b-xvrunmq69b] {
    border: 1px solid #1769dc;
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.2);
}

.primary-action:hover:not(:disabled)[b-xvrunmq69b] {
    background: #125dbf;
}

.secondary-header-action[b-xvrunmq69b] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
}

.secondary-header-action:hover:not(:disabled)[b-xvrunmq69b] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.primary-action span[b-xvrunmq69b],
.secondary-header-action span[b-xvrunmq69b] {
    font-size: 18px;
    font-weight: 400;
    line-height: 1;
}

.configuration-workspace[b-xvrunmq69b] {
    display: grid;
    min-width: 0;
    min-height: 600px;
    grid-template-columns:
        minmax(230px, 280px)
        minmax(250px, 310px)
        minmax(270px, 330px)
        minmax(390px, 1fr);
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: var(--panel-background);
    box-shadow: 0 4px 14px var(--shadow-color);
}

.selection-panel[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    border-right: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--panel-background) 92%, var(--button-hover) 8%);
}

.lines-panel[b-xvrunmq69b] {
    background: color-mix(in srgb, var(--panel-background) 96%, var(--button-hover) 4%);
}

.panel-heading[b-xvrunmq69b],
.editor-heading[b-xvrunmq69b] {
    display: flex;
    min-height: 70px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--border-color);
}

.panel-heading[b-xvrunmq69b] {
    padding: 14px 17px;
}

.editor-heading[b-xvrunmq69b] {
    padding: 16px 56px;
}

.panel-heading > div[b-xvrunmq69b],
.editor-heading > div:first-child[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.panel-heading span[b-xvrunmq69b],
.editor-heading span[b-xvrunmq69b] {
    color: var(--primary-text);
    font-size: 15px;
    font-weight: 700;
}

.panel-heading small[b-xvrunmq69b],
.editor-heading small[b-xvrunmq69b] {
    color: var(--secondary-text);
    font-size: 11px;
}

.refresh-button[b-xvrunmq69b],
.panel-add-button[b-xvrunmq69b] {
    display: inline-grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--primary-text);
    background: var(--button-background);
    font-size: 19px;
}

.refresh-button:hover:not(:disabled)[b-xvrunmq69b],
.panel-add-button:hover:not(:disabled)[b-xvrunmq69b] {
    border-color: #1769dc;
    background: var(--button-hover);
}

.selection-list[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
    overflow-y: auto;
    padding: 12px;
}

.selection-list-item[b-xvrunmq69b] {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 66px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, box-shadow 130ms ease;
}

.draggable-tile[b-xvrunmq69b] {
    cursor: grab;
    touch-action: pan-y;
    user-select: none;
    transition:
        border-color 130ms ease,
        background 130ms ease,
        box-shadow 130ms ease,
        opacity 130ms ease,
        transform 130ms ease;
}

.draggable-tile:active[b-xvrunmq69b] {
    cursor: grabbing;
}

.draggable-tile.dragging[b-xvrunmq69b] {
    opacity: 0.42;
    transform: scale(0.985);
}

.draggable-tile.drag-over[b-xvrunmq69b] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    box-shadow: 0 0 0 2px rgba(23, 105, 220, 0.14);
}

.sortable-list.is-sorting[b-xvrunmq69b] {
    overflow: hidden;
}

.sortable-drag-ghost[b-xvrunmq69b] {
    border-color: #1769dc;
    background: var(--panel-background);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.24);
}

.draggable-tile .item-order[b-xvrunmq69b] {
    touch-action: none;
}

.draggable-tile .item-order[b-xvrunmq69b]::before {
    content: "⋮";
    margin-right: 2px;
    color: color-mix(in srgb, #1769dc 72%, var(--secondary-text) 28%);
    font-size: 13px;
    line-height: 1;
}

.line-list-item[b-xvrunmq69b],
.position-list-item[b-xvrunmq69b] {
    grid-template-columns: 42px minmax(0, 1fr) auto auto;
}

.selection-list-item:hover:not(:disabled)[b-xvrunmq69b] {
    border-color: var(--border-color);
    background: var(--button-hover);
}

.selection-list-item.selected[b-xvrunmq69b] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 84%, #1769dc 16%);
    box-shadow: 0 3px 9px rgba(23, 105, 220, 0.12);
}

.item-order[b-xvrunmq69b] {
    display: grid;
    width: 38px;
    height: 32px;
    place-items: center;
    grid-auto-flow: column;
    justify-content: center;
    border-radius: 8px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    font-size: 12px;
    font-weight: 750;
}

.item-copy[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.item-copy strong[b-xvrunmq69b],
.item-copy small[b-xvrunmq69b] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.item-copy strong[b-xvrunmq69b] {
    font-size: 13.5px;
    font-weight: 650;
}

.item-copy small[b-xvrunmq69b] {
    color: var(--secondary-text);
    font-size: 10.5px;
    letter-spacing: 0.2px;
}

.item-status[b-xvrunmq69b],
.site-badge[b-xvrunmq69b],
.headcount-badge[b-xvrunmq69b] {
    display: inline-flex;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    border-radius: 6px;
    font-size: 9.5px;
    font-weight: 750;
    white-space: nowrap;
}

.item-status.active[b-xvrunmq69b] {
    color: #166543;
    border: 1px solid #86cfaf;
    background: #dcf4e9;
}

.item-status.inactive[b-xvrunmq69b] {
    color: #6f3e45;
    border: 1px solid #df9298;
    background: #fde5e7;
}

.site-badge[b-xvrunmq69b] {
    color: #244f83;
    border: 1px solid #9abbe2;
    background: #e5f0fd;
}

.headcount-badge[b-xvrunmq69b] {
    color: #5d4678;
    border: 1px solid #bba5d5;
    background: #f0e9f8;
}

.panel-state[b-xvrunmq69b] {
    display: flex;
    min-height: 250px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 26px;
    color: var(--secondary-text);
    font-size: 13px;
    text-align: center;
}

.panel-state strong[b-xvrunmq69b] {
    color: var(--primary-text);
    font-size: 14px;
}

.panel-state span[b-xvrunmq69b] {
    max-width: 240px;
    line-height: 1.5;
}

.loading-indicator[b-xvrunmq69b],
.button-spinner[b-xvrunmq69b] {
    display: inline-block;
    border: 2px solid var(--border-color);
    border-top-color: #1769dc;
    border-radius: 50%;
    animation: configuration-spin-b-xvrunmq69b 700ms linear infinite;
}

.loading-indicator[b-xvrunmq69b] {
    width: 26px;
    height: 26px;
}

.editor-panel[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--panel-background);
}

.editor-empty-state[b-xvrunmq69b] {
    display: flex;
    min-height: 500px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: var(--secondary-text);
    text-align: center;
}

.editor-empty-state strong[b-xvrunmq69b] {
    color: var(--primary-text);
    font-size: 16px;
}

.editor-empty-state span[b-xvrunmq69b] {
    font-size: 13px;
}

.editor-empty-icon[b-xvrunmq69b] {
    display: grid;
    width: 54px;
    height: 54px;
    margin-bottom: 4px;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 13px;
    color: #1769dc;
    background: var(--button-hover);
    font-size: 23px;
}


.editor-panel[b-xvrunmq69b]  form.editor-form {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 34px 56px 40px;
}

.form-grid[b-xvrunmq69b] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 34px;
    row-gap: 30px;
}

.form-field[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.form-field.full-width[b-xvrunmq69b] {
    grid-column: 1 / -1;
}

.form-field label[b-xvrunmq69b] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 700;
}

.form-field > small[b-xvrunmq69b] {
    color: var(--secondary-text);
    font-size: 10.5px;
    line-height: 1.4;
}

.form-input[b-xvrunmq69b] {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 14px;
    font-weight: 550;
}

.form-input:focus[b-xvrunmq69b] {
    outline: 2px solid rgba(23, 105, 220, 0.16);
    border-color: #1769dc;
}

.code-input[b-xvrunmq69b] {
    font-family: Consolas, "Courier New", monospace;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}

.status-field[b-xvrunmq69b] {
    display: flex;
    min-height: 82px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--button-hover);
}

.compact-status-field[b-xvrunmq69b] {
    min-height: 82px;
}

.status-field > div[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.status-field small[b-xvrunmq69b] {
    max-width: 480px;
    color: var(--secondary-text);
    font-size: 10.5px;
    line-height: 1.45;
}

.status-switch[b-xvrunmq69b] {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 9px;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.status-switch input[b-xvrunmq69b] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.switch-track[b-xvrunmq69b] {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: #aeb8c5;
    transition: background 140ms ease;
}

.switch-track[b-xvrunmq69b]::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    content: "";
    transition: transform 140ms ease;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.22);
}

.status-switch input:checked + .switch-track[b-xvrunmq69b] {
    background: #249363;
}

.status-switch input:checked + .switch-track[b-xvrunmq69b]::after {
    transform: translateX(18px);
}

[b-xvrunmq69b] .validation-message,
[b-xvrunmq69b] .validation-summary {
    color: #c33a45;
    font-size: 11px;
}

[b-xvrunmq69b] .validation-summary {
    margin-top: 16px;
}

[b-xvrunmq69b] .validation-summary:empty {
    display: none;
}

.future-configuration-card[b-xvrunmq69b] {
    display: flex;
    margin-top: 18px;
    flex-direction: column;
    gap: 5px;
    padding: 14px 15px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background) 92%, var(--button-hover) 8%);
}

.future-configuration-card span[b-xvrunmq69b] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.future-configuration-card strong[b-xvrunmq69b] {
    color: var(--primary-text);
    font-size: 13px;
}

.future-configuration-card p[b-xvrunmq69b] {
    margin: 0;
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.45;
}

.editor-actions[b-xvrunmq69b] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;
    margin-top: 38px;
    padding-top: 24px;
    border-top: 1px solid var(--border-color);
}

.editor-actions-right[b-xvrunmq69b] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    order: -1;
    gap: 9px;
}

.editor-danger-zone[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    align-items: center;
    margin-left: auto;
}

.secondary-action[b-xvrunmq69b],
.save-action[b-xvrunmq69b],
.danger-action[b-xvrunmq69b],
.confirm-delete-action[b-xvrunmq69b] {
    min-height: 44px;
    padding: 0 18px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.secondary-action[b-xvrunmq69b] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
}

.secondary-action:hover:not(:disabled)[b-xvrunmq69b] {
    background: var(--button-hover);
}

.save-action[b-xvrunmq69b] {
    display: inline-flex;
    min-width: 142px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid #1769dc;
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 5px 12px rgba(23, 105, 220, 0.18);
}

.save-action:hover:not(:disabled)[b-xvrunmq69b] {
    background: #125dbf;
}

.save-action:disabled[b-xvrunmq69b] {
    border-color: var(--border-color);
    color: var(--secondary-text);
    background: var(--button-background);
    box-shadow: none;
}

.button-spinner[b-xvrunmq69b] {
    width: 15px;
    height: 15px;
    border-color: rgba(255, 255, 255, 0.45);
    border-top-color: #ffffff;
}

.danger-action[b-xvrunmq69b] {
    border: 1px solid #df9298;
    color: #a72834;
    background: color-mix(in srgb, var(--panel-background) 72%, #fde5e7 28%);
    box-shadow: 0 3px 9px rgba(195, 58, 69, 0.08);
}

.danger-action:hover:not(:disabled)[b-xvrunmq69b] {
    color: #8e1f2a;
    border-color: #c94f5a;
    background: #fde5e7;
}

.delete-confirmation[b-xvrunmq69b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 28px;
    padding: 13px 14px;
    border: 1px solid #df9298;
    border-radius: 10px;
    color: #762b33;
    background: color-mix(in srgb, var(--panel-background) 72%, #fde5e7 28%);
}

.delete-confirmation > div:first-child[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.delete-confirmation strong[b-xvrunmq69b] {
    font-size: 13px;
    font-weight: 750;
}

.delete-confirmation span[b-xvrunmq69b] {
    color: color-mix(in srgb, #762b33 82%, var(--secondary-text) 18%);
    font-size: 11px;
    line-height: 1.45;
}

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

.confirm-delete-action[b-xvrunmq69b] {
    border: 1px solid #c33a45;
    color: #ffffff;
    background: #c33a45;
}

.confirm-delete-action:hover:not(:disabled)[b-xvrunmq69b] {
    background: #a92d37;
}

.configuration-toast[b-xvrunmq69b] {
    position: fixed;
    top: 106px;
    left: 50%;
    right: auto;
    z-index: 1200;
    display: flex;
    min-width: 260px;
    max-width: min(420px, calc(100vw - 40px));
    min-height: 48px;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #86cfaf;
    border-radius: 10px;
    color: #166543;
    background: color-mix(in srgb, var(--panel-background) 78%, #dcf4e9 22%);
    font-size: 12px;
    font-weight: 650;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18);
    pointer-events: none;
    transform: translateX(-50%);
    animation: configuration-toast-in-b-xvrunmq69b 180ms ease-out;
}

.configuration-toast-icon[b-xvrunmq69b] {
    display: grid;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #249363;
    font-size: 13px;
    font-weight: 800;
}

.feedback-message[b-xvrunmq69b] {
    padding: 11px 13px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 600;
}

.success-message[b-xvrunmq69b] {
    color: #166543;
    border: 1px solid #86cfaf;
    background: #dcf4e9;
}

.error-message[b-xvrunmq69b] {
    color: #762b33;
    border: 1px solid #df9298;
    background: #fde5e7;
}

button:disabled[b-xvrunmq69b] {
    opacity: 0.52;
    cursor: not-allowed;
}

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

@keyframes configuration-toast-in-b-xvrunmq69b {
    from {
        opacity: 0;
        transform: translate(-50%, -8px) scale(0.98);
    }

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

@media (max-width: 1550px) {
    .configuration-workspace[b-xvrunmq69b] {
        grid-template-columns:
            minmax(220px, 260px)
            minmax(230px, 280px)
            minmax(240px, 290px)
            minmax(360px, 1fr);
    }

    .line-list-item[b-xvrunmq69b],
    .position-list-item[b-xvrunmq69b] {
        grid-template-columns: 34px minmax(0, 1fr) auto;
    }

    .line-list-item .site-badge[b-xvrunmq69b],
    .position-list-item .headcount-badge[b-xvrunmq69b] {
        display: none;
    }
}

@media (max-width: 1250px) {
    .configuration-workspace[b-xvrunmq69b] {
        grid-template-columns:
            minmax(240px, 300px)
            minmax(260px, 1fr)
            minmax(280px, 1fr);
    }

    .editor-panel[b-xvrunmq69b] {
        grid-column: 1 / -1;
        min-height: 430px;
        border-top: 1px solid var(--border-color);
    }
}

@media (max-width: 960px) {
    .configuration-workspace[b-xvrunmq69b] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .positions-panel[b-xvrunmq69b] {
        grid-column: 1 / -1;
        max-height: 330px;
        border-top: 1px solid var(--border-color);
    }

    .editor-panel[b-xvrunmq69b] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 720px) {
    .configuration-header[b-xvrunmq69b] {
        align-items: stretch;
        flex-direction: column;
    }

    .configuration-header > div:first-child[b-xvrunmq69b] {
        width: 100%;
    }

    .header-actions[b-xvrunmq69b] {
        display: grid;
        margin-left: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .configuration-workspace[b-xvrunmq69b] {
        grid-template-columns: 1fr;
    }

    .selection-panel[b-xvrunmq69b] {
        max-height: 330px;
        border-right: 0;
        border-bottom: 1px solid var(--border-color);
    }

    .editor-panel[b-xvrunmq69b] {
        grid-column: auto;
    }

    .editor-heading[b-xvrunmq69b] {
        padding-right: 24px;
        padding-left: 24px;
    }

    .editor-panel[b-xvrunmq69b]  form.editor-form {
        padding-right: 24px;
        padding-left: 24px;
    }

    .form-grid[b-xvrunmq69b] {
        grid-template-columns: 1fr;
    }

    .form-field.full-width[b-xvrunmq69b] {
        grid-column: auto;
    }

    .status-field[b-xvrunmq69b] {
        align-items: stretch;
        flex-direction: column;
    }

    .status-switch[b-xvrunmq69b] {
        justify-content: space-between;
    }

    .editor-actions[b-xvrunmq69b] {
        align-items: stretch;
        flex-direction: column;
    }

    .editor-actions-right[b-xvrunmq69b],
    .editor-danger-zone[b-xvrunmq69b],
    .delete-confirmation[b-xvrunmq69b],
    .delete-confirmation-actions[b-xvrunmq69b] {
        width: 100%;
    }

    .editor-danger-zone[b-xvrunmq69b] {
        margin-left: 0;
    }

    .editor-actions-right[b-xvrunmq69b],
    .delete-confirmation-actions[b-xvrunmq69b] {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .delete-confirmation[b-xvrunmq69b] {
        align-items: stretch;
        flex-direction: column;
    }

    .secondary-action[b-xvrunmq69b],
    .save-action[b-xvrunmq69b],
    .danger-action[b-xvrunmq69b],
    .confirm-delete-action[b-xvrunmq69b] {
        width: 100%;
    }
}


.required-mark[b-xvrunmq69b] {
    color: #c33a45;
    font-weight: 800;
}

.positions-panel[b-xvrunmq69b] {
    background: color-mix(in srgb, var(--panel-background) 94%, var(--button-hover) 6%);
}

.editor-panel[b-xvrunmq69b]  form.editor-form {
    justify-content: flex-start;
}

.editor-actions[b-xvrunmq69b] {
    align-self: stretch;
    padding-bottom: 8px;
}

.configuration-header[b-xvrunmq69b] {
    gap: 18px;
    padding-top: 0;
}

.configuration-header h1[b-xvrunmq69b] {
    margin-bottom: 4px;
    font-size: 26px;
}

.primary-action[b-xvrunmq69b],
.secondary-header-action[b-xvrunmq69b],
.secondary-action[b-xvrunmq69b],
.save-action[b-xvrunmq69b],
.panel-add-button[b-xvrunmq69b],
.selection-list-item[b-xvrunmq69b] {
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.primary-action:hover:not(:disabled)[b-xvrunmq69b],
.secondary-header-action:hover:not(:disabled)[b-xvrunmq69b],
.secondary-action:hover:not(:disabled)[b-xvrunmq69b],
.save-action:hover:not(:disabled)[b-xvrunmq69b],
.panel-add-button:hover:not(:disabled)[b-xvrunmq69b],
.selection-list-item:hover:not(:disabled)[b-xvrunmq69b] {
    transform: translateY(-1px);
}

.selection-list-item.selected[b-xvrunmq69b] {
    animation: locationSelectionPulse-b-xvrunmq69b 180ms ease-out;
}

@keyframes locationSelectionPulse-b-xvrunmq69b {
    0% { transform: scale(0.992); }
    100% { transform: scale(1); }
}

.panel-add-button.text-button[b-xvrunmq69b] {
    width: auto;
    min-width: 110px;
    padding: 0 11px;
    gap: 7px;
    font-size: 12px;
    font-weight: 750;
}

.panel-add-button.text-button span:first-child[b-xvrunmq69b] {
    font-size: 17px;
    line-height: 1;
}

.panel-heading-actions[b-xvrunmq69b] {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.panel-add-button.text-button[b-xvrunmq69b] {
    display: inline-flex !important;
    width: auto;
    min-width: 104px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #6ea7e8;
    border-radius: 9px;
    color: #0d5dcc;
    background: linear-gradient(180deg, #eef6ff 0%, #dbeafa 52%, #c7dcf5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -2px 3px rgba(42, 105, 180, 0.12),
        0 3px 7px rgba(31, 94, 167, 0.18);
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
}

.panel-add-button.text-button span:first-child[b-xvrunmq69b] {
    font-size: 17px;
    line-height: 1;
}

.panel-add-button.text-button:hover:not(:disabled)[b-xvrunmq69b] {
    transform: translateY(-1px);
    border-color: #4f91dd;
    background: linear-gradient(180deg, #e7f2ff 0%, #d1e4f9 52%, #bdd5f1 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -2px 3px rgba(42, 105, 180, 0.16),
        0 6px 12px rgba(31, 94, 167, 0.22);
}

.panel-add-button.text-button:active:not(:disabled)[b-xvrunmq69b] {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        inset 0 2px 4px rgba(42, 105, 180, 0.16),
        0 1px 3px rgba(31, 94, 167, 0.14);
}

.heading-danger-action[b-xvrunmq69b] {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #e19aa2;
    border-radius: 8px;
    color: #a72d38;
    background: #fff4f5;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.heading-danger-action:hover:not(:disabled)[b-xvrunmq69b] {
    transform: translateY(-1px);
    border-color: #cb5d68;
    background: #ffe8eb;
    box-shadow: 0 7px 14px rgba(167, 45, 56, 0.12);
}

.position-editor-actions[b-xvrunmq69b] {
    justify-content: flex-start;
}

.position-editor-actions .editor-actions-right[b-xvrunmq69b] {
    margin-left: 0;
}

.area-panel-heading[b-xvrunmq69b] {
    display: grid;
    min-height: 76px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
}

.area-panel-refresh[b-xvrunmq69b] {
    justify-self: start;
}

.area-panel-title[b-xvrunmq69b] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.area-panel-add[b-xvrunmq69b] {
    justify-self: end;
}

.editor-panel[b-xvrunmq69b]  form.editor-form {
    max-width: 900px;
    padding: 26px 34px 32px;
}

.editor-heading[b-xvrunmq69b] {
    padding-right: 34px;
    padding-left: 34px;
}

.form-grid[b-xvrunmq69b] {
    grid-template-columns: repeat(2, minmax(230px, 310px));
    justify-content: start;
    column-gap: 22px;
    row-gap: 22px;
}

.form-field.full-width[b-xvrunmq69b] {
    width: min(100%, 642px);
}

.status-field[b-xvrunmq69b],
.delete-confirmation[b-xvrunmq69b],
.editor-actions[b-xvrunmq69b] {
    width: min(100%, 642px);
}

.editor-actions[b-xvrunmq69b] {
    justify-content: flex-start;
}

.editor-actions-right[b-xvrunmq69b] {
    margin-left: 0;
}

.configuration-context-dismiss-layer[b-xvrunmq69b] {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: transparent;
}

.configuration-context-menu[b-xvrunmq69b] {
    position: fixed;
    z-index: 1910;
    width: min(330px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--primary-text);
    background: var(--panel-background);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
    animation: configurationContextOpen-b-xvrunmq69b 140ms ease-out;
}

.configuration-context-menu-heading[b-xvrunmq69b] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--button-hover);
}

.configuration-context-menu-heading strong[b-xvrunmq69b] {
    font-size: 12.5px;
}

.configuration-context-menu-heading span[b-xvrunmq69b] {
    color: var(--secondary-text);
    font-size: 10px;
}

.configuration-context-menu button[b-xvrunmq69b] {
    display: grid;
    width: 100%;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 0;
    color: #a8323f;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.configuration-context-menu button:hover[b-xvrunmq69b] {
    background: color-mix(in srgb, var(--panel-background) 82%, #fde5e7 18%);
}

.configuration-context-menu button > span:last-child[b-xvrunmq69b] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.configuration-context-menu button strong[b-xvrunmq69b] {
    font-size: 12px;
}

.configuration-context-menu button small[b-xvrunmq69b] {
    color: var(--secondary-text);
    font-size: 9.5px;
}

.configuration-context-menu .context-menu-icon[b-xvrunmq69b] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    color: #c14450;
    background: #fde5e7;
    font-size: 17px;
    font-weight: 800;
}

@keyframes configurationContextOpen-b-xvrunmq69b {
    0% { transform: translateY(-3px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

@media (max-width: 700px) {
    .area-panel-heading[b-xvrunmq69b] {
        grid-template-columns: 38px minmax(0, 1fr);
    }

    .area-panel-add[b-xvrunmq69b] {
        grid-column: 1 / -1;
        width: 100%;
    }

    .form-grid[b-xvrunmq69b] {
        grid-template-columns: 1fr;
    }
}

.area-panel-heading[b-xvrunmq69b] {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding-left: 64px;
}

.area-panel-refresh[b-xvrunmq69b] {
    position: absolute;
    top: 14px;
    left: 14px;
}

.line-list-item.starts-new-visual-group[b-xvrunmq69b] {
    margin-top: 8px;
    border-top-color: #4f92ea;
    box-shadow: inset 0 3px 0 rgba(23, 105, 220, 0.72);
}

.line-list-item.starts-new-visual-group.selected[b-xvrunmq69b] {
    box-shadow: inset 0 3px 0 #1769dc, 0 3px 9px rgba(23, 105, 220, 0.12);
}

/* Form overlap safety patch
   The editor panel can become narrow because Locations uses multiple columns.
   Use a safe single-column editor layout so Area Code, Site Code,
   Line / Work Area Code, Position Code, Display Order and Status never overlap.
*/
.editor-panel[b-xvrunmq69b]  form.editor-form {
    width: 100% !important;
    max-width: 680px !important;
    box-sizing: border-box !important;
}

.form-grid[b-xvrunmq69b] {
    width: 100% !important;
    max-width: 620px !important;
    grid-template-columns: minmax(0, 1fr) !important;
    column-gap: 0 !important;
    row-gap: 20px !important;
}

.form-field[b-xvrunmq69b],
.form-field.full-width[b-xvrunmq69b] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    grid-column: auto !important;
}

.form-input[b-xvrunmq69b],
.status-field[b-xvrunmq69b],
.delete-confirmation[b-xvrunmq69b],
.editor-actions[b-xvrunmq69b],
.future-configuration-card[b-xvrunmq69b] {
    width: 100% !important;
    max-width: 620px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

.code-input[b-xvrunmq69b] {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.status-field[b-xvrunmq69b] {
    align-items: center !important;
    justify-content: space-between !important;
}

@media (max-width: 720px) {
    .editor-panel[b-xvrunmq69b]  form.editor-form,
    .form-grid[b-xvrunmq69b],
    .form-input[b-xvrunmq69b],
    .status-field[b-xvrunmq69b],
    .delete-confirmation[b-xvrunmq69b],
    .editor-actions[b-xvrunmq69b],
    .future-configuration-card[b-xvrunmq69b] {
        max-width: 100% !important;
    }
}
/* /Components/Pages/PeopleHrImport.razor.rz.scp.css */
.peoplehr-import-page[b-01t81t2ujg] {
    display: grid;
    gap: 18px;
    color: #e5eef8;
}

.peoplehr-import-header h1[b-01t81t2ujg] {
    margin: 5px 0 4px;
    color: #f8fbff;
    font-size: 26px;
    font-weight: 650;
    letter-spacing: -0.45px;
}

.peoplehr-import-header p[b-01t81t2ujg] {
    max-width: 860px;
    margin: 8px 0 0;
    color: #92a6bb;
    font-size: 15px;
    line-height: 1.5;
}

.page-eyebrow[b-01t81t2ujg],
.card-eyebrow[b-01t81t2ujg] {
    display: inline-flex;
    margin-bottom: 6px;
    color: #5da2ff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.peoplehr-import-workspace[b-01t81t2ujg] {
    display: grid;
    grid-template-columns: minmax(320px, 390px) minmax(560px, 1fr);
    gap: 18px;
    align-items: start;
}

.peoplehr-control-panel[b-01t81t2ujg],
.peoplehr-preview-panel[b-01t81t2ujg] {
    min-width: 0;
}

.peoplehr-control-panel[b-01t81t2ujg] {
    display: grid;
    gap: 14px;
}

.control-card[b-01t81t2ujg],
.control-note[b-01t81t2ujg],
.peoplehr-preview-panel[b-01t81t2ujg] {
    border: 1px solid rgba(127, 156, 186, .2);
    border-radius: 18px;
    background: rgba(19, 31, 45, .94);
    box-shadow: 0 16px 36px rgba(2, 10, 20, .22);
}

.control-card[b-01t81t2ujg],
.control-note[b-01t81t2ujg] {
    display: grid;
    gap: 12px;
    padding: 18px;
}

.control-card h2[b-01t81t2ujg],
.preview-heading span[b-01t81t2ujg] {
    margin: 0;
    color: #f8fbff;
    font-size: 20px;
    font-weight: 850;
}

.control-card p[b-01t81t2ujg],
.control-note span[b-01t81t2ujg],
.action-hint[b-01t81t2ujg] {
    margin: 0;
    color: #9badc0;
    font-size: 13px;
    line-height: 1.45;
}

.control-note strong[b-01t81t2ujg] {
    color: #f8fbff;
}

.primary-action[b-01t81t2ujg],
.replace-action[b-01t81t2ujg] {
    display: inline-flex;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    border: 0;
    border-radius: 13px;
    padding: 0 16px;
    color: #ffffff;
    font: inherit;
    font-size: 14px;
    font-weight: 850;
    cursor: pointer;
}

.primary-action[b-01t81t2ujg] {
    background: linear-gradient(135deg, #33a8f2, #0874d6);
    box-shadow: 0 14px 30px rgba(8, 116, 214, .2);
}

.replace-action[b-01t81t2ujg] {
    background: linear-gradient(135deg, #2fb983, #137f58);
    box-shadow: 0 14px 30px rgba(19, 127, 88, .2);
}

.primary-action:disabled[b-01t81t2ujg],
.replace-action:disabled[b-01t81t2ujg] {
    cursor: not-allowed;
    opacity: .55;
}

.import-defaults-list[b-01t81t2ujg] {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #afc0d1;
    font-size: 13px;
}

.import-defaults-list li[b-01t81t2ujg] {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid rgba(127, 156, 186, .14);
    border-radius: 12px;
    background: rgba(13, 24, 36, .52);
}

.import-defaults-list strong[b-01t81t2ujg] {
    color: #e8f2ff;
}

.peoplehr-preview-panel[b-01t81t2ujg] {
    overflow: hidden;
}

.preview-heading[b-01t81t2ujg] {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(127, 156, 186, .18);
}

.preview-heading > div[b-01t81t2ujg] {
    display: grid;
    gap: 3px;
}

.preview-heading small[b-01t81t2ujg] {
    color: #91a7bd;
    font-size: 12px;
}

.preview-count[b-01t81t2ujg] {
    display: grid;
    min-width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 999px;
    color: #d9ecff;
    background: rgba(33, 100, 186, .46);
    font-size: 14px !important;
}

.preview-meta-grid[b-01t81t2ujg] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid rgba(127, 156, 186, .14);
}

.preview-meta-grid div[b-01t81t2ujg] {
    display: grid;
    gap: 4px;
    padding: 12px;
    border: 1px solid rgba(127, 156, 186, .14);
    border-radius: 13px;
    background: rgba(13, 24, 36, .52);
}

.preview-meta-grid span[b-01t81t2ujg] {
    color: #8fa6bd;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.preview-meta-grid strong[b-01t81t2ujg] {
    color: #f8fbff;
    font-size: 18px;
}

.selection-toolbar[b-01t81t2ujg] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-bottom: 1px solid rgba(127, 156, 186, .14);
    color: #b9cadd;
    font-size: 13px;
    font-weight: 800;
}

.select-all-row[b-01t81t2ujg] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.select-all-row input[b-01t81t2ujg],
.preview-select-checkbox input[b-01t81t2ujg] {
    width: 18px;
    height: 18px;
    accent-color: #2f8dec;
}

.preview-list[b-01t81t2ujg] {
    display: grid;
    max-height: calc(100vh - 330px);
    gap: 10px;
    overflow: auto;
    padding: 14px;
}

.preview-employee-card[b-01t81t2ujg] {
    display: grid;
    grid-template-columns: auto 42px minmax(0, 1fr) minmax(210px, 280px);
    gap: 12px;
    align-items: center;
    border: 1px solid rgba(127, 156, 186, .14);
    border-radius: 16px;
    padding: 12px;
    background: rgba(13, 24, 36, .52);
}

.preview-employee-card.selected[b-01t81t2ujg] {
    border-color: rgba(79, 151, 255, .62);
    background: rgba(21, 48, 78, .72);
}

.preview-select-checkbox[b-01t81t2ujg] {
    display: grid;
    place-items: center;
}

.preview-avatar[b-01t81t2ujg] {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    color: #75b6ff;
    background: rgba(14, 81, 160, .45);
    font-size: 13px;
    font-weight: 900;
}

.preview-copy[b-01t81t2ujg] {
    display: grid;
    min-width: 0;
    gap: 4px;
}

.preview-copy strong[b-01t81t2ujg] {
    overflow: hidden;
    color: #f8fbff;
    font-size: 14px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.preview-copy small[b-01t81t2ujg] {
    overflow: hidden;
    color: #8ea6bf;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.position-select-field[b-01t81t2ujg] {
    display: grid;
    gap: 6px;
}

.position-select-field span[b-01t81t2ujg] {
    color: #8ea6bf;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.position-select-field select[b-01t81t2ujg] {
    width: 100%;
    min-height: 40px;
    border: 1px solid rgba(127, 156, 186, .24);
    border-radius: 11px;
    color: #e9f3ff;
    background: #121f2d;
    padding: 0 12px;
    font: inherit;
    font-size: 13px;
    outline: 0;
}

.position-select-field select:focus[b-01t81t2ujg] {
    border-color: rgba(79, 151, 255, .72);
    box-shadow: 0 0 0 3px rgba(79, 151, 255, .1);
}

.panel-state[b-01t81t2ujg] {
    display: grid;
    min-height: 320px;
    place-items: center;
    gap: 9px;
    padding: 28px;
    color: #91a7bd;
    text-align: center;
}

.panel-state strong[b-01t81t2ujg] {
    color: #f8fbff;
    font-size: 18px;
}

.panel-state span[b-01t81t2ujg] {
    max-width: 420px;
    line-height: 1.5;
}

.warning-state strong[b-01t81t2ujg] {
    color: #ffe7ad;
}

.preview-warning[b-01t81t2ujg],
.feedback-message[b-01t81t2ujg],
.configuration-toast[b-01t81t2ujg] {
    border-radius: 14px;
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 700;
}

.preview-warning[b-01t81t2ujg] {
    margin: 14px 18px 0;
    border: 1px solid rgba(226, 173, 64, .35);
    color: #ffe9b8;
    background: rgba(95, 68, 25, .72);
}

.error-message[b-01t81t2ujg] {
    border: 1px solid rgba(221, 78, 92, .35);
    color: #ffd9de;
    background: rgba(98, 31, 42, .82);
}

.warning-message[b-01t81t2ujg] {
    border: 1px solid rgba(226, 173, 64, .35);
    color: #ffe9b8;
    background: rgba(95, 68, 25, .72);
}

.configuration-toast[b-01t81t2ujg] {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    color: #d9fbea;
    background: rgba(18, 95, 65, .72);
}

.configuration-toast-icon[b-01t81t2ujg] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 50%;
    color: #063b28;
    background: #b9f5d4;
}

.loading-indicator[b-01t81t2ujg],
.button-spinner[b-01t81t2ujg] {
    display: inline-block;
    border: 2px solid rgba(127, 156, 186, .35);
    border-top-color: #5da2ff;
    border-radius: 50%;
    animation: peoplehr-spin-b-01t81t2ujg 700ms linear infinite;
}

.loading-indicator[b-01t81t2ujg] {
    width: 28px;
    height: 28px;
}

.button-spinner[b-01t81t2ujg] {
    width: 15px;
    height: 15px;
    border-color: rgba(255, 255, 255, .38);
    border-top-color: #ffffff;
}

@keyframes peoplehr-spin-b-01t81t2ujg {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1180px) {
    .peoplehr-import-workspace[b-01t81t2ujg] {
        grid-template-columns: 1fr;
    }

    .preview-list[b-01t81t2ujg] {
        max-height: none;
    }
}

@media (max-width: 760px) {
    .preview-meta-grid[b-01t81t2ujg] {
        grid-template-columns: 1fr 1fr;
    }

    .preview-employee-card[b-01t81t2ujg] {
        grid-template-columns: auto 42px minmax(0, 1fr);
    }

    .position-select-field[b-01t81t2ujg] {
        grid-column: 1 / -1;
    }

    .selection-toolbar[b-01t81t2ujg] {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Light mode theme alignment
   The page keeps its dark cards only when the app shell is in Dark Mode.
*/
.app-shell:not(.theme-dark) .peoplehr-import-page[b-01t81t2ujg] {
    color: #10243a;
}

.app-shell:not(.theme-dark) .peoplehr-import-header h1[b-01t81t2ujg],
.app-shell:not(.theme-dark) .control-card h2[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-heading span[b-01t81t2ujg],
.app-shell:not(.theme-dark) .control-note strong[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-copy strong[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-meta-grid strong[b-01t81t2ujg],
.app-shell:not(.theme-dark) .panel-state strong[b-01t81t2ujg] {
    color: #10243a;
}

.app-shell:not(.theme-dark) .peoplehr-import-header p[b-01t81t2ujg],
.app-shell:not(.theme-dark) .control-card p[b-01t81t2ujg],
.app-shell:not(.theme-dark) .control-note span[b-01t81t2ujg],
.app-shell:not(.theme-dark) .action-hint[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-heading small[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-copy small[b-01t81t2ujg],
.app-shell:not(.theme-dark) .panel-state[b-01t81t2ujg],
.app-shell:not(.theme-dark) .panel-state span[b-01t81t2ujg] {
    color: #5d7188;
}

.app-shell:not(.theme-dark) .page-eyebrow[b-01t81t2ujg],
.app-shell:not(.theme-dark) .card-eyebrow[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-meta-grid span[b-01t81t2ujg],
.app-shell:not(.theme-dark) .position-select-field span[b-01t81t2ujg] {
    color: #2474d2;
}

.app-shell:not(.theme-dark) .control-card[b-01t81t2ujg],
.app-shell:not(.theme-dark) .control-note[b-01t81t2ujg],
.app-shell:not(.theme-dark) .peoplehr-preview-panel[b-01t81t2ujg] {
    border-color: rgba(117, 139, 163, .26);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 44px rgba(54, 79, 110, .12);
}

.app-shell:not(.theme-dark) .preview-heading[b-01t81t2ujg],
.app-shell:not(.theme-dark) .selection-toolbar[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-meta-grid[b-01t81t2ujg] {
    border-color: rgba(117, 139, 163, .2);
}

.app-shell:not(.theme-dark) .import-defaults-list[b-01t81t2ujg],
.app-shell:not(.theme-dark) .selection-toolbar[b-01t81t2ujg] {
    color: #38536d;
}

.app-shell:not(.theme-dark) .import-defaults-list li[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-meta-grid div[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-employee-card[b-01t81t2ujg] {
    border-color: rgba(117, 139, 163, .22);
    background: rgba(241, 247, 253, .88);
}

.app-shell:not(.theme-dark) .import-defaults-list strong[b-01t81t2ujg] {
    color: #10243a;
}

.app-shell:not(.theme-dark) .preview-employee-card.selected[b-01t81t2ujg] {
    border-color: rgba(25, 122, 226, .46);
    background: rgba(225, 240, 255, .9);
}

.app-shell:not(.theme-dark) .preview-avatar[b-01t81t2ujg],
.app-shell:not(.theme-dark) .preview-count[b-01t81t2ujg] {
    color: #0d65c7;
    background: rgba(207, 229, 255, .92);
}

.app-shell:not(.theme-dark) .position-select-field select[b-01t81t2ujg] {
    border-color: rgba(117, 139, 163, .3);
    color: #10243a;
    background: #ffffff;
}

.app-shell:not(.theme-dark) .preview-warning[b-01t81t2ujg] {
    border-color: rgba(212, 154, 39, .35);
    color: #7a4d08;
    background: rgba(255, 245, 219, .95);
}

.app-shell:not(.theme-dark) .error-message[b-01t81t2ujg] {
    border-color: rgba(221, 78, 92, .34);
    color: #9b2331;
    background: rgba(255, 235, 238, .96);
}

.app-shell:not(.theme-dark) .warning-message[b-01t81t2ujg] {
    border-color: rgba(212, 154, 39, .35);
    color: #7a4d08;
    background: rgba(255, 245, 219, .95);
}

.app-shell:not(.theme-dark) .configuration-toast[b-01t81t2ujg] {
    color: #075337;
    background: rgba(213, 248, 230, .96);
}

.peoplehr-demo-block[b-01t81t2ujg] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 14px;
    padding: 12px 16px;
    border: 1px solid #df9298;
    border-left: 4px solid #d84c5f;
    border-radius: 10px;
    background: color-mix(in srgb, #d84c5f 9%, var(--panel-background, #ffffff) 91%);
}

.peoplehr-demo-block strong[b-01t81t2ujg] {
    color: #d84c5f;
    font-size: 13px;
    font-weight: 800;
}

.peoplehr-demo-block span[b-01t81t2ujg] {
    color: var(--primary-text, #1b2735);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}
/* /Components/Pages/Positions.razor.rz.scp.css */
.positions-page[b-ds1hi0dl9f] {
    display: grid;
    gap: 18px;
    color: #eaf3ff;
}

.positions-header[b-ds1hi0dl9f] {
    display: grid;
    gap: 6px;
}

.positions-header h1[b-ds1hi0dl9f] {
    margin: 0;
    color: #f8fbff;
    font-size: 30px;
    font-weight: 850;
}

.positions-header p[b-ds1hi0dl9f] {
    max-width: 760px;
    margin: 0;
    color: #96abc1;
    font-size: 14px;
}

.page-eyebrow[b-ds1hi0dl9f] {
    color: #58a6ff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.positions-workspace[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: minmax(330px, 390px) minmax(620px, 1fr);
    gap: 18px;
    align-items: start;
}

.positions-list-panel[b-ds1hi0dl9f],
.position-summary-panel[b-ds1hi0dl9f],
.position-editor-panel[b-ds1hi0dl9f],
.impact-panel[b-ds1hi0dl9f],
.editor-actions-bar[b-ds1hi0dl9f],
.editor-empty-state[b-ds1hi0dl9f],
.empty-state[b-ds1hi0dl9f] {
    border: 1px solid rgba(128, 160, 194, .18);
    border-radius: 8px;
    background: linear-gradient(145deg, rgba(19, 33, 50, .98), rgba(10, 24, 40, .98));
    box-shadow: 0 18px 42px rgba(0, 0, 0, .2);
}

.positions-list-panel[b-ds1hi0dl9f] {
    overflow: hidden;
}

.position-details-column[b-ds1hi0dl9f] {
    display: grid;
    min-width: 0;
    gap: 14px;
}

.positions-panel-heading[b-ds1hi0dl9f] {
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: space-between;
    padding: 18px;
}

.positions-panel-title[b-ds1hi0dl9f] {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.positions-panel-title strong[b-ds1hi0dl9f] {
    color: #f8fbff;
    font-size: 15px;
    font-weight: 850;
}

.positions-panel-title small[b-ds1hi0dl9f] {
    color: #91a8bf;
    font-size: 12px;
}

.position-tools[b-ds1hi0dl9f] {
    display: grid;
    gap: 10px;
    padding: 0 18px 14px;
}

.search-field[b-ds1hi0dl9f] {
    display: grid;
}

.sr-only[b-ds1hi0dl9f] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.search-field input[b-ds1hi0dl9f],
.form-input[b-ds1hi0dl9f] {
    box-sizing: border-box;
    width: 100%;
    min-height: 42px;
    border: 1px solid rgba(132, 161, 193, .22);
    border-radius: 6px;
    color: #edf6ff;
    background: rgba(7, 19, 32, .72);
    padding: 0 13px;
    font: inherit;
    outline: 0;
}

.search-field input[b-ds1hi0dl9f]::placeholder,
.form-input[b-ds1hi0dl9f]::placeholder {
    color: #71879f;
}

.search-field input:focus[b-ds1hi0dl9f],
.form-input:focus[b-ds1hi0dl9f] {
    border-color: rgba(47, 134, 246, .82);
    box-shadow: 0 0 0 3px rgba(47, 134, 246, .13);
}

.form-input[readonly][b-ds1hi0dl9f] {
    color: #b8c9dc;
    background: rgba(12, 28, 46, .55);
}

.position-filters[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.filter-button[b-ds1hi0dl9f],
.primary-action-button[b-ds1hi0dl9f],
.save-button[b-ds1hi0dl9f],
.secondary-button[b-ds1hi0dl9f],
.ghost-button[b-ds1hi0dl9f],
.danger-button[b-ds1hi0dl9f] {
    border: 0;
    font: inherit;
    cursor: pointer;
}

.filter-button[b-ds1hi0dl9f] {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(128, 160, 194, .18);
    border-radius: 6px;
    color: #9eb3ca;
    background: rgba(18, 35, 54, .82);
    font-size: 12px;
    font-weight: 850;
}

.filter-button span[b-ds1hi0dl9f] {
    min-width: 22px;
    padding: 1px 8px;
    border-radius: 999px;
    color: #dbeeff;
    background: rgba(61, 91, 124, .55);
    font-size: 11px;
}

.filter-button.active[b-ds1hi0dl9f] {
    border-color: rgba(50, 134, 245, .54);
    color: #ffffff;
    background: linear-gradient(135deg, rgba(31, 100, 190, .88), rgba(19, 49, 86, .92));
}

.position-list[b-ds1hi0dl9f] {
    display: grid;
    max-height: calc(100vh - 330px);
    overflow: auto;
    padding: 0 8px 14px;
}

.position-list.dragging[b-ds1hi0dl9f] {
    cursor: grabbing;
}

.positions-drag-lock[b-ds1hi0dl9f],
.positions-drag-lock *[b-ds1hi0dl9f] {
    cursor: grabbing !important;
    user-select: none !important;
}

.position-drop-zone[b-ds1hi0dl9f] {
    display: grid;
    height: 8px;
    align-items: center;
    opacity: 0;
    transition: height 140ms ease, opacity 140ms ease;
}

.position-list.dragging .position-drop-zone[b-ds1hi0dl9f] {
    height: 18px;
    opacity: 1;
}

.position-drop-zone span[b-ds1hi0dl9f] {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: transparent;
    transition: background 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.position-drop-zone.active span[b-ds1hi0dl9f] {
    background: linear-gradient(90deg, transparent, rgba(47, 134, 246, .96), transparent);
    box-shadow: 0 0 18px rgba(47, 134, 246, .52);
    transform: scaleY(1.18);
}

.position-card[b-ds1hi0dl9f] {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 12px;
    background: transparent;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease, opacity 140ms ease, transform 140ms ease;
}

.position-card:hover[b-ds1hi0dl9f],
.position-card.selected[b-ds1hi0dl9f] {
    border-color: rgba(48, 134, 246, .52);
    background: rgba(20, 48, 82, .74);
    box-shadow: inset 0 0 0 1px rgba(48, 134, 246, .13);
}

.position-card.drag-source[b-ds1hi0dl9f] {
    opacity: .48;
    transform: scale(.992);
}

.position-card.inactive[b-ds1hi0dl9f] {
    opacity: .68;
}

.position-card-main[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    min-width: 0;
    align-items: center;
    gap: 12px;
    border: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.position-avatar[b-ds1hi0dl9f] {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 8px;
    color: #93c7ff;
    background: linear-gradient(145deg, rgba(38, 113, 213, .72), rgba(19, 67, 127, .78));
    font-size: 13px;
    font-weight: 900;
}

.position-avatar.large[b-ds1hi0dl9f] {
    width: 56px;
    height: 56px;
    flex: 0 0 auto;
    font-size: 18px;
}

.position-card-copy[b-ds1hi0dl9f] {
    display: grid;
    min-width: 0;
    gap: 5px;
}

.position-card-copy strong[b-ds1hi0dl9f] {
    color: #f8fbff;
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.position-card-meta[b-ds1hi0dl9f] {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    color: #9cb2c8;
    font-size: 11px;
    font-weight: 800;
}

.position-card-meta span[b-ds1hi0dl9f] {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    border-radius: 999px;
    padding: 0 8px;
    background: rgba(65, 85, 107, .46);
}

.drag-handle[b-ds1hi0dl9f] {
    display: grid;
    width: 24px;
    height: 32px;
    place-items: center;
    border-radius: 6px;
    color: #7399c5;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.drag-handle:hover[b-ds1hi0dl9f] {
    color: #d8ebff;
    background: rgba(47, 134, 246, .18);
}

.drag-handle:active[b-ds1hi0dl9f],
.position-list.dragging .drag-handle[b-ds1hi0dl9f] {
    cursor: grabbing;
}

.drag-handle.disabled[b-ds1hi0dl9f] {
    cursor: not-allowed;
    opacity: .32;
}

.status-chip[b-ds1hi0dl9f] {
    display: inline-flex;
    min-height: 25px;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border-radius: 6px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
}

.status-chip[b-ds1hi0dl9f]::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
}

.status-chip.active[b-ds1hi0dl9f] {
    color: #9bf3bc;
    background: rgba(25, 120, 73, .34);
}

.status-chip.active[b-ds1hi0dl9f]::before {
    background: #5ef18c;
}

.status-chip.inactive[b-ds1hi0dl9f] {
    color: #b9c6d4;
    background: rgba(89, 105, 122, .35);
}

.status-chip.inactive[b-ds1hi0dl9f]::before {
    background: #9aa9ba;
}

.position-summary-panel[b-ds1hi0dl9f],
.position-editor-panel[b-ds1hi0dl9f],
.impact-panel[b-ds1hi0dl9f],
.editor-actions-bar[b-ds1hi0dl9f] {
    padding: 18px;
}

.position-summary-heading[b-ds1hi0dl9f] {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
}

.position-title-row[b-ds1hi0dl9f] {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.position-title-row h2[b-ds1hi0dl9f] {
    margin: 0;
    color: #f8fbff;
    font-size: 24px;
    font-weight: 850;
}

.position-summary-heading p[b-ds1hi0dl9f] {
    margin: 8px 0 0;
    color: #95a9bf;
    font-size: 13px;
}

.position-metrics[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 18px;
    border: 1px solid rgba(128, 160, 194, .16);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(10, 25, 42, .62);
}

.metric-card[b-ds1hi0dl9f] {
    display: grid;
    gap: 6px;
    min-height: 84px;
    padding: 15px 18px;
    border-right: 1px solid rgba(128, 160, 194, .14);
}

.metric-card:last-child[b-ds1hi0dl9f] {
    border-right: 0;
}

.metric-icon[b-ds1hi0dl9f] {
    color: #5bb0ff;
    font-size: 14px;
    font-weight: 900;
}

.metric-card span:not(.metric-icon)[b-ds1hi0dl9f] {
    color: #a4b8ce;
    font-size: 12px;
    font-weight: 800;
}

.metric-card strong[b-ds1hi0dl9f] {
    color: #f8fbff;
    font-size: 24px;
    font-weight: 850;
}

.position-editor-panel h3[b-ds1hi0dl9f] {
    margin: 0 0 16px;
    color: #f8fbff;
    font-size: 16px;
    font-weight: 850;
}

.form-grid[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(150px, 260px);
    gap: 14px;
}

.form-field[b-ds1hi0dl9f] {
    display: grid;
    min-width: 0;
    gap: 8px;
}

.form-field span[b-ds1hi0dl9f] {
    color: #d7e8fb;
    font-size: 12px;
    font-weight: 850;
}

.form-field em[b-ds1hi0dl9f] {
    color: #ff6f81;
    font-style: normal;
}

.form-field small[b-ds1hi0dl9f] {
    color: #8499ae;
    font-size: 12px;
    line-height: 1.35;
}

.usage-note[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    margin-top: 20px;
    border: 1px solid rgba(44, 135, 255, .46);
    border-radius: 8px;
    padding: 16px;
    background: rgba(20, 78, 145, .22);
}

.usage-icon[b-ds1hi0dl9f] {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(86, 169, 255, .56);
    border-radius: 50%;
    color: #67b6ff;
    font-size: 13px;
    font-weight: 900;
}

.usage-note strong[b-ds1hi0dl9f] {
    display: block;
    margin-bottom: 9px;
    color: #cfe6ff;
    font-size: 14px;
}

.usage-note p[b-ds1hi0dl9f] {
    margin: 3px 0;
    color: #a7bad0;
    font-size: 12px;
    line-height: 1.38;
}

.impact-panel[b-ds1hi0dl9f] {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 12px;
    border-color: rgba(226, 152, 35, .28);
    background: linear-gradient(145deg, rgba(58, 42, 18, .82), rgba(19, 33, 50, .96));
}

.impact-icon[b-ds1hi0dl9f] {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255, 184, 68, .68);
    border-radius: 50%;
    color: #ffbd56;
    font-size: 13px;
    font-weight: 900;
}

.impact-panel strong[b-ds1hi0dl9f] {
    color: #ffbd56;
    font-size: 14px;
    font-weight: 900;
}

.impact-panel p[b-ds1hi0dl9f] {
    max-width: 880px;
    margin: 9px 0 0;
    color: #d3bd9d;
    font-size: 13px;
    line-height: 1.48;
}

.editor-actions-bar[b-ds1hi0dl9f] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
}

.primary-action-group[b-ds1hi0dl9f] {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}

.primary-action-button[b-ds1hi0dl9f],
.save-button[b-ds1hi0dl9f],
.secondary-button[b-ds1hi0dl9f],
.ghost-button[b-ds1hi0dl9f],
.danger-button[b-ds1hi0dl9f] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 850;
    white-space: nowrap;
}

.button-icon[b-ds1hi0dl9f] {
    font-size: 15px;
    line-height: 1;
}

.primary-action-button[b-ds1hi0dl9f],
.save-button[b-ds1hi0dl9f] {
    color: #fff;
    background: linear-gradient(135deg, #2389f5, #0c62d4);
    box-shadow: 0 10px 24px rgba(12, 98, 212, .24);
}

.secondary-button[b-ds1hi0dl9f] {
    color: #d7eaff;
    background: rgba(39, 89, 152, .82);
}

.ghost-button[b-ds1hi0dl9f] {
    border: 1px solid rgba(128, 160, 194, .18);
    color: #b4c7dc;
    background: rgba(22, 36, 52, .82);
}

.danger-button[b-ds1hi0dl9f] {
    color: #fff;
    background: linear-gradient(135deg, #d6535e, #a72f3a);
}

.primary-action-button:disabled[b-ds1hi0dl9f],
.save-button:disabled[b-ds1hi0dl9f],
.secondary-button:disabled[b-ds1hi0dl9f],
.ghost-button:disabled[b-ds1hi0dl9f],
.danger-button:disabled[b-ds1hi0dl9f],
.filter-button:disabled[b-ds1hi0dl9f] {
    cursor: not-allowed;
    opacity: .55;
}

.empty-state[b-ds1hi0dl9f],
.editor-empty-state[b-ds1hi0dl9f] {
    display: grid;
    gap: 8px;
    place-items: center;
    min-height: 190px;
    padding: 24px;
    color: #8ea4ba;
    text-align: center;
}

.editor-empty-state[b-ds1hi0dl9f] {
    min-height: 420px;
}

.empty-state strong[b-ds1hi0dl9f],
.editor-empty-state strong[b-ds1hi0dl9f] {
    color: #f8fbff;
    font-size: 18px;
}

.feedback-message[b-ds1hi0dl9f],
.configuration-toast[b-ds1hi0dl9f] {
    border-radius: 8px;
    padding: 13px 15px;
    font-size: 14px;
    font-weight: 750;
}

.error-message[b-ds1hi0dl9f] {
    border: 1px solid rgba(221, 78, 92, .35);
    color: #ffd9de;
    background: rgba(98, 31, 42, .82);
}

.warning-message[b-ds1hi0dl9f] {
    border: 1px solid rgba(226, 173, 64, .35);
    color: #ffe9b8;
    background: rgba(95, 68, 25, .72);
}

.configuration-toast[b-ds1hi0dl9f] {
    position: fixed;
    top: clamp(78px, 8vh, 108px);
    left: calc(288px + ((100vw - 288px) / 2));
    z-index: 90;
    display: inline-flex;
    max-width: min(620px, calc(100vw - 340px));
    min-height: 48px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 18px;
    border: 1px solid rgba(185, 245, 212, .24);
    border-radius: 999px;
    color: rgba(225, 255, 238, .96);
    background:
        linear-gradient(135deg, rgba(18, 95, 65, .56), rgba(15, 67, 55, .42)),
        rgba(12, 28, 42, .18);
    box-shadow:
        0 18px 44px rgba(2, 8, 16, .2),
        0 0 26px rgba(64, 220, 155, .08),
        inset 0 1px 0 rgba(255, 255, 255, .14);
    backdrop-filter: blur(12px) saturate(1.16);
    -webkit-backdrop-filter: blur(12px) saturate(1.16);
    pointer-events: none;
    transform: translateX(-50%);
    animation: ghostToastLife-b-ds1hi0dl9f 2700ms ease both;
}

.configuration-toast-icon[b-ds1hi0dl9f] {
    display: grid;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 50%;
    color: #063b28;
    background: rgba(185, 245, 212, .94);
}

@keyframes ghostToastLife-b-ds1hi0dl9f {
    0% {
        opacity: 0;
        transform: translate(-50%, -10px) scale(.98);
    }

    12%, 78% {
        opacity: .96;
        transform: translate(-50%, 0) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -8px) scale(.985);
    }
}

.modal-backdrop[b-ds1hi0dl9f] {
    position: fixed;
    z-index: 60;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(2, 8, 16, .7);
    backdrop-filter: blur(8px);
}

.confirm-dialog[b-ds1hi0dl9f] {
    display: grid;
    gap: 14px;
    width: min(520px, 100%);
    border: 1px solid rgba(255, 163, 174, .26);
    border-radius: 8px;
    padding: 26px;
    color: #e9f3ff;
    background: #172231;
    box-shadow: 0 28px 90px rgba(0, 0, 0, .42);
    text-align: center;
}

.confirm-dialog h2[b-ds1hi0dl9f] {
    margin: 0;
    color: #fff;
}

.confirm-dialog p[b-ds1hi0dl9f] {
    margin: 0;
    color: #b7c7d8;
    line-height: 1.45;
}

.confirm-small[b-ds1hi0dl9f] {
    font-size: 13px;
}

.danger-icon[b-ds1hi0dl9f] {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    justify-self: center;
    border-radius: 50%;
    color: #fff;
    background: #cc3649;
    font-size: 24px;
    font-weight: 900;
}

.confirm-actions[b-ds1hi0dl9f] {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}

.app-shell:not(.theme-dark) .positions-page[b-ds1hi0dl9f] {
    color: #10243a;
}

.app-shell:not(.theme-dark) .positions-header h1[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .positions-panel-title strong[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-card-copy strong[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-title-row h2[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .metric-card strong[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-editor-panel h3[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .form-field span[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .usage-note strong[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .empty-state strong[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .editor-empty-state strong[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .confirm-dialog h2[b-ds1hi0dl9f] {
    color: #10243a;
}

.app-shell:not(.theme-dark) .positions-header p[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .positions-panel-title small[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-summary-heading p[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .form-field small[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .usage-note p[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .empty-state[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .editor-empty-state[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .confirm-dialog p[b-ds1hi0dl9f] {
    color: #5d7188;
}

.app-shell:not(.theme-dark) .positions-list-panel[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-summary-panel[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-editor-panel[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .impact-panel[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .editor-actions-bar[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .editor-empty-state[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .empty-state[b-ds1hi0dl9f] {
    border-color: rgba(117, 139, 163, .26);
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 44px rgba(54, 79, 110, .12);
}

.app-shell:not(.theme-dark) .search-field input[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .form-input[b-ds1hi0dl9f] {
    border-color: rgba(117, 139, 163, .3);
    color: #10243a;
    background: #ffffff;
}

.app-shell:not(.theme-dark) .form-input[readonly][b-ds1hi0dl9f] {
    color: #516b87;
    background: #f4f8fc;
}

.app-shell:not(.theme-dark) .filter-button[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .ghost-button[b-ds1hi0dl9f] {
    border-color: rgba(117, 139, 163, .24);
    color: #38536d;
    background: rgba(241, 247, 253, .94);
}

.app-shell:not(.theme-dark) .filter-button span[b-ds1hi0dl9f] {
    color: #25435f;
    background: rgba(154, 178, 203, .38);
}

.app-shell:not(.theme-dark) .filter-button.active[b-ds1hi0dl9f] {
    border-color: rgba(25, 122, 226, .36);
    color: #ffffff;
    background: linear-gradient(135deg, #278be8, #1267c8);
}

.app-shell:not(.theme-dark) .filter-button.active span[b-ds1hi0dl9f] {
    color: #ffffff;
    background: rgba(255, 255, 255, .24);
}

.app-shell:not(.theme-dark) .position-card:hover[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-card.selected[b-ds1hi0dl9f] {
    border-color: rgba(25, 122, 226, .34);
    background: rgba(225, 240, 255, .82);
}

.app-shell:not(.theme-dark) .position-avatar[b-ds1hi0dl9f] {
    color: #ffffff;
    background: linear-gradient(145deg, #65a4e8, #276fb9);
}

.app-shell:not(.theme-dark) .position-card-meta span[b-ds1hi0dl9f],
.app-shell:not(.theme-dark) .position-metrics[b-ds1hi0dl9f] {
    color: #395979;
    background: rgba(229, 238, 248, .82);
}

.app-shell:not(.theme-dark) .status-chip.active[b-ds1hi0dl9f] {
    color: #0f6a3d;
    background: rgba(190, 232, 207, .92);
}

.app-shell:not(.theme-dark) .status-chip.active[b-ds1hi0dl9f]::before {
    background: #18a957;
}

.app-shell:not(.theme-dark) .status-chip.inactive[b-ds1hi0dl9f] {
    color: #4d6378;
    background: rgba(220, 228, 237, .92);
}

.app-shell:not(.theme-dark) .metric-icon[b-ds1hi0dl9f] {
    color: #1769dc;
}

.app-shell:not(.theme-dark) .metric-card span:not(.metric-icon)[b-ds1hi0dl9f] {
    color: #526b84;
}

.app-shell:not(.theme-dark) .metric-card[b-ds1hi0dl9f] {
    border-color: rgba(117, 139, 163, .18);
}

.app-shell:not(.theme-dark) .usage-note[b-ds1hi0dl9f] {
    border-color: rgba(25, 122, 226, .32);
    background: rgba(229, 243, 255, .94);
}

.app-shell:not(.theme-dark) .usage-icon[b-ds1hi0dl9f] {
    border-color: rgba(25, 122, 226, .42);
    color: #1769dc;
}

.app-shell:not(.theme-dark) .impact-panel[b-ds1hi0dl9f] {
    border-color: rgba(204, 127, 28, .28);
    background: rgba(255, 248, 230, .92);
}

.app-shell:not(.theme-dark) .impact-panel strong[b-ds1hi0dl9f] {
    color: #98650c;
}

.app-shell:not(.theme-dark) .impact-icon[b-ds1hi0dl9f] {
    border-color: rgba(224, 147, 31, .42);
    color: #b9790f;
}

.app-shell:not(.theme-dark) .impact-panel p[b-ds1hi0dl9f] {
    color: #765c35;
}

.app-shell:not(.theme-dark) .modal-backdrop[b-ds1hi0dl9f] {
    background: rgba(15, 30, 45, .36);
}

.app-shell:not(.theme-dark) .confirm-dialog[b-ds1hi0dl9f] {
    border-color: rgba(204, 54, 73, .24);
    color: #10243a;
    background: #ffffff;
    box-shadow: 0 28px 90px rgba(45, 69, 96, .22);
}

@media (max-width: 1180px) {
    .positions-workspace[b-ds1hi0dl9f] {
        grid-template-columns: 1fr;
    }

    .position-list[b-ds1hi0dl9f] {
        max-height: 460px;
    }
}

@media (max-width: 760px) {
    .positions-panel-heading[b-ds1hi0dl9f],
    .position-summary-heading[b-ds1hi0dl9f],
    .editor-actions-bar[b-ds1hi0dl9f],
    .primary-action-group[b-ds1hi0dl9f],
    .confirm-actions[b-ds1hi0dl9f] {
        align-items: stretch;
        flex-direction: column;
    }

    .positions-add-button[b-ds1hi0dl9f],
    .save-button[b-ds1hi0dl9f],
    .ghost-button[b-ds1hi0dl9f],
    .danger-button[b-ds1hi0dl9f],
    .secondary-button[b-ds1hi0dl9f] {
        width: 100%;
    }

    .position-filters[b-ds1hi0dl9f],
    .form-grid[b-ds1hi0dl9f],
    .position-metrics[b-ds1hi0dl9f] {
        grid-template-columns: 1fr;
    }

    .metric-card[b-ds1hi0dl9f] {
        border-right: 0;
        border-bottom: 1px solid rgba(128, 160, 194, .14);
    }

    .metric-card:last-child[b-ds1hi0dl9f] {
        border-bottom: 0;
    }

    .drag-handle[b-ds1hi0dl9f],
    .position-drop-zone[b-ds1hi0dl9f] {
        display: none;
    }

    .configuration-toast[b-ds1hi0dl9f] {
        top: 18px;
        left: 50%;
        max-width: calc(100vw - 28px);
        border-radius: 8px;
    }
}

@media (pointer: coarse) {
    .drag-handle[b-ds1hi0dl9f],
    .position-drop-zone[b-ds1hi0dl9f] {
        display: none;
    }
}
/* /Components/Pages/ShiftSchedules.razor.rz.scp.css */
.schedule-page[b-tnetltb5gc] {
    position: relative;
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 14px;
}

.schedule-header[b-tnetltb5gc] {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 22px;
}

.schedule-header > div:first-child[b-tnetltb5gc] {
    width: min(660px, 100%);
}

.schedule-header h1[b-tnetltb5gc] {
    margin: 2px 0 4px;
    color: var(--primary-text);
    font-size: clamp(25px, 2vw, 34px);
    font-weight: 760;
    letter-spacing: -0.8px;
}

.schedule-header p[b-tnetltb5gc] {
    margin: 0;
    color: var(--secondary-text);
    font-size: 13px;
    line-height: 1.5;
}

.schedule-eyebrow[b-tnetltb5gc] {
    color: #1769dc;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.primary-action[b-tnetltb5gc],
.refresh-button[b-tnetltb5gc],
.save-action[b-tnetltb5gc],
.secondary-action[b-tnetltb5gc],
.danger-action[b-tnetltb5gc],
.confirm-delete-action[b-tnetltb5gc] {
    border: 0;
    font: inherit;
    cursor: pointer;
    transition: transform 120ms ease, opacity 120ms ease, background 120ms ease, border-color 120ms ease;
}

.primary-action[b-tnetltb5gc] {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 15px;
    border-radius: 9px;
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 5px 13px rgba(23, 105, 220, 0.2);
    font-size: 12px;
    font-weight: 750;
}

.primary-action span:first-child[b-tnetltb5gc] {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.primary-action:hover:not(:disabled)[b-tnetltb5gc],
.save-action:hover:not(:disabled)[b-tnetltb5gc] {
    transform: translateY(-1px);
    background: #105fcf;
}

button:disabled[b-tnetltb5gc],
input:disabled[b-tnetltb5gc],
select:disabled[b-tnetltb5gc] {
    cursor: not-allowed;
    opacity: 0.5;
}

.schedule-toast[b-tnetltb5gc] {
    position: fixed;
    z-index: 1500;
    top: 82px;
    left: calc(50% + 115px);
    display: flex;
    min-width: 300px;
    max-width: min(540px, calc(100vw - 40px));
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 16px;
    transform: translateX(-50%);
    border: 1px solid #7bc9a4;
    border-radius: 10px;
    color: #155b3f;
    background: #e5f7ef;
    box-shadow: 0 12px 28px rgba(16, 66, 48, 0.16);
    font-size: 12px;
    font-weight: 700;
}

.schedule-toast-icon[b-tnetltb5gc] {
    display: grid;
    width: 21px;
    height: 21px;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #24956a;
    font-size: 12px;
}

.feedback-message[b-tnetltb5gc] {
    padding: 11px 14px;
    border-radius: 9px;
    font-size: 12px;
    font-weight: 650;
}

.error-message[b-tnetltb5gc] {
    color: #8b2d37;
    border: 1px solid #e09aa1;
    background: #fde9eb;
}

.schedule-workspace-scroll[b-tnetltb5gc] {
    min-width: 0;
    overflow-x: auto;
    padding: 2px 2px 12px;
}

.schedule-workspace[b-tnetltb5gc] {
    display: grid;
    min-width: 1320px;
    grid-template-columns: 320px 500px minmax(500px, 1fr);
    align-items: start;
    gap: 22px;
}

.schedule-library-panel[b-tnetltb5gc],
.assignment-panel[b-tnetltb5gc],
.editor-panel[b-tnetltb5gc] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 7px 18px rgba(30, 48, 73, 0.07);
}

.panel-heading[b-tnetltb5gc],
.editor-heading[b-tnetltb5gc] {
    display: flex;
    min-height: 64px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--panel-background) 91%, #1769dc 9%);
}

.panel-heading > div[b-tnetltb5gc],
.editor-heading > div[b-tnetltb5gc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.panel-heading span[b-tnetltb5gc],
.editor-heading span[b-tnetltb5gc] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.panel-heading small[b-tnetltb5gc],
.editor-heading small[b-tnetltb5gc] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 10.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.refresh-button[b-tnetltb5gc] {
    display: grid;
    width: 31px;
    height: 31px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: #1769dc;
    background: var(--panel-background);
    font-size: 16px;
}

.refresh-button:hover:not(:disabled)[b-tnetltb5gc] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 82%, #1769dc 18%);
}

.template-list[b-tnetltb5gc] {
    display: flex;
    max-height: calc(100vh - 250px);
    min-height: 450px;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    padding: 10px;
}

.template-tile[b-tnetltb5gc] {
    display: grid;
    width: 100%;
    min-height: 78px;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 9px;
    border: 1px solid transparent;
    border-radius: 9px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 94%, var(--secondary-text) 6%);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.template-tile:hover:not(:disabled)[b-tnetltb5gc] {
    border-color: var(--border-color);
    background: var(--button-hover);
}

.template-tile.selected[b-tnetltb5gc] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 84%, #1769dc 16%);
    box-shadow: 0 3px 9px rgba(23, 105, 220, 0.12);
}

.item-order[b-tnetltb5gc] {
    display: grid;
    width: 37px;
    height: 34px;
    place-items: center;
    border-radius: 8px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    font-size: 11px;
    font-weight: 800;
}

.drag-order[b-tnetltb5gc] {
    grid-auto-flow: column;
    justify-content: center;
    touch-action: none;
}

.drag-order[b-tnetltb5gc]::before {
    margin-right: 2px;
    color: color-mix(in srgb, #1769dc 72%, var(--secondary-text) 28%);
    content: "⋮";
    font-size: 14px;
    line-height: 1;
}

.template-copy[b-tnetltb5gc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.template-copy strong[b-tnetltb5gc],
.template-copy span[b-tnetltb5gc],
.template-copy small[b-tnetltb5gc] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-copy strong[b-tnetltb5gc] {
    font-size: 12.5px;
    font-weight: 720;
}

.template-copy .time-range[b-tnetltb5gc] {
    color: #1769dc;
    font-size: 12px;
    font-weight: 800;
}

.template-copy small[b-tnetltb5gc] {
    color: var(--secondary-text);
    font-size: 9.5px;
}

.item-status[b-tnetltb5gc] {
    display: inline-flex;
    min-height: 23px;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 780;
    white-space: nowrap;
}

.item-status.active[b-tnetltb5gc] {
    color: #166543;
    border: 1px solid #86cfaf;
    background: #dcf4e9;
}

.item-status.inactive[b-tnetltb5gc] {
    color: #6f3e45;
    border: 1px solid #df9298;
    background: #fde5e7;
}

.panel-state[b-tnetltb5gc] {
    display: flex;
    min-height: 450px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 28px 18px;
    color: var(--secondary-text);
    text-align: center;
}

.panel-state strong[b-tnetltb5gc] {
    color: var(--primary-text);
    font-size: 13px;
}

.panel-state span[b-tnetltb5gc] {
    max-width: 260px;
    font-size: 11px;
    line-height: 1.5;
}

.loading-indicator[b-tnetltb5gc],
.button-spinner[b-tnetltb5gc] {
    display: inline-block;
    border-style: solid;
    border-radius: 50%;
    animation: schedule-spin-b-tnetltb5gc 700ms linear infinite;
}

.loading-indicator[b-tnetltb5gc] {
    width: 20px;
    height: 20px;
    border-width: 2px;
    border-color: color-mix(in srgb, #1769dc 28%, transparent);
    border-top-color: #1769dc;
}

.assignment-content[b-tnetltb5gc] {
    max-height: calc(100vh - 250px);
    min-height: 450px;
    overflow-y: auto;
    padding: 16px;
}

.assignment-date-row[b-tnetltb5gc] {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.compact-field[b-tnetltb5gc] {
    display: flex;
    width: 190px;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}


.valid-to-column[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.until-further-notice-option[b-tnetltb5gc] {
    display: inline-flex;
    width: fit-content;
    align-items: center;
    gap: 7px;
    color: var(--primary-text);
    cursor: pointer;
    font-size: 10.5px;
    font-weight: 700;
    user-select: none;
}

.until-further-notice-option input[b-tnetltb5gc] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #1769dc;
}

.date-input:disabled[b-tnetltb5gc] {
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 88%, var(--secondary-text) 12%);
    cursor: not-allowed;
    opacity: 0.72;
}

.compact-field label[b-tnetltb5gc],
.form-field label[b-tnetltb5gc],
.status-field > div > label[b-tnetltb5gc] {
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 750;
}

.assignment-date-help[b-tnetltb5gc] {
    display: block;
    margin-top: 7px;
    color: var(--secondary-text);
    font-size: 9.5px;
    line-height: 1.4;
}

.mixed-date-warning[b-tnetltb5gc] {
    margin-top: 10px;
    padding: 9px 10px;
    border: 1px solid #e4bd72;
    border-radius: 8px;
    color: #745213;
    background: #fff6df;
    font-size: 9.5px;
    line-height: 1.45;
}

.area-assignment-list[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.area-assignment-card[b-tnetltb5gc] {
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 96%, var(--secondary-text) 4%);
}

.area-checkbox-row[b-tnetltb5gc],
.line-checkbox-row[b-tnetltb5gc] {
    cursor: pointer;
}

.area-checkbox-row[b-tnetltb5gc] {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
    border-bottom: 1px solid var(--border-color);
    background: color-mix(in srgb, var(--panel-background) 90%, #1769dc 10%);
}

.area-checkbox-copy[b-tnetltb5gc],
.line-checkbox-row > span:nth-child(2)[b-tnetltb5gc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.area-checkbox-copy strong[b-tnetltb5gc],
.line-checkbox-row strong[b-tnetltb5gc] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 11.5px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-checkbox-copy small[b-tnetltb5gc],
.line-checkbox-row small[b-tnetltb5gc] {
    overflow: hidden;
    color: var(--secondary-text);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-checkbox-grid[b-tnetltb5gc] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 9px;
}

.line-checkbox-row[b-tnetltb5gc] {
    display: grid;
    min-width: 0;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    align-items: center;
    gap: 7px;
    padding: 8px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-background);
}

.line-checkbox-row:hover[b-tnetltb5gc] {
    border-color: #8fb7eb;
    background: color-mix(in srgb, var(--panel-background) 91%, #1769dc 9%);
}

.area-checkbox-row input[b-tnetltb5gc],
.line-checkbox-row input[b-tnetltb5gc] {
    width: 15px;
    height: 15px;
    accent-color: #1769dc;
}

.inactive-line-label[b-tnetltb5gc] {
    color: #8b4650;
    font-size: 8px;
    font-weight: 750;
}

.no-lines-message[b-tnetltb5gc] {
    padding: 12px;
    color: var(--secondary-text);
    font-size: 10px;
    text-align: center;
}

.editor-panel[b-tnetltb5gc] {
    min-height: 520px;
}

.editor-empty-state[b-tnetltb5gc] {
    display: flex;
    min-height: 518px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 38px;
    color: var(--secondary-text);
    text-align: center;
}

.editor-empty-state strong[b-tnetltb5gc] {
    color: var(--primary-text);
    font-size: 15px;
}

.editor-empty-state span[b-tnetltb5gc] {
    max-width: 340px;
    font-size: 11.5px;
    line-height: 1.55;
}

.editor-empty-icon[b-tnetltb5gc] {
    display: grid;
    width: 52px;
    height: 52px;
    margin-bottom: 5px;
    place-items: center;
    border-radius: 14px;
    color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    font-size: 25px;
}

[b-tnetltb5gc] .editor-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 22px 26px 20px;
}

.details-form-grid[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.form-field[b-tnetltb5gc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.schedule-name-field[b-tnetltb5gc] {
    width: min(100%, 430px);
}

.time-fields-row[b-tnetltb5gc],
.details-bottom-row[b-tnetltb5gc] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 28px;
}

.time-field[b-tnetltb5gc] {
    width: 190px;
}

.order-field[b-tnetltb5gc] {
    width: 145px;
}

.form-field small[b-tnetltb5gc],
.status-field > div > small[b-tnetltb5gc] {
    color: var(--secondary-text);
    font-size: 9.5px;
    line-height: 1.4;
}

.form-input[b-tnetltb5gc] {
    width: 100%;
    min-height: 39px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    color: var(--primary-text);
    background: var(--panel-background);
    font: inherit;
    font-size: 12px;
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.form-input:focus[b-tnetltb5gc] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.12);
}

.time-select[b-tnetltb5gc] {
    cursor: pointer;
}

.date-input[b-tnetltb5gc] {
    color-scheme: light;
}

.status-field[b-tnetltb5gc] {
    display: flex;
    width: min(100%, 310px);
    min-height: 82px;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 94%, var(--secondary-text) 6%);
}

.status-field > div[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.status-switch[b-tnetltb5gc] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 720;
    cursor: pointer;
}

.status-switch input[b-tnetltb5gc] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.switch-track[b-tnetltb5gc] {
    position: relative;
    width: 37px;
    height: 21px;
    border-radius: 999px;
    background: #a9b4c2;
    transition: background 140ms ease;
}

.switch-track[b-tnetltb5gc]::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(34, 43, 56, 0.26);
    content: "";
    transition: transform 140ms ease;
}

.status-switch input:checked + .switch-track[b-tnetltb5gc] {
    background: #1769dc;
}

.status-switch input:checked + .switch-track[b-tnetltb5gc]::after {
    transform: translateX(16px);
}

.schedule-guidance[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 11px 12px;
    border: 1px solid #a8c7ee;
    border-radius: 9px;
    color: #244f83;
    background: #edf5ff;
}

.schedule-guidance strong[b-tnetltb5gc] {
    font-size: 10.5px;
}

.schedule-guidance span[b-tnetltb5gc] {
    font-size: 9.5px;
    line-height: 1.45;
}

[b-tnetltb5gc] .validation-message {
    color: #a73542;
    font-size: 9.5px;
    font-weight: 650;
}

[b-tnetltb5gc] .validation-summary {
    margin: 0;
    padding: 10px 12px;
    border: 1px solid #e09aa1;
    border-radius: 8px;
    color: #8b2d37;
    background: #fde9eb;
    font-size: 10px;
}

[b-tnetltb5gc] .validation-summary:empty {
    display: none;
}

[b-tnetltb5gc] .validation-summary ul {
    margin: 0;
    padding-left: 18px;
}

.editor-actions[b-tnetltb5gc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-top: 2px;
}

.editor-actions-left[b-tnetltb5gc],
.delete-confirmation-actions[b-tnetltb5gc] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.secondary-action[b-tnetltb5gc],
.save-action[b-tnetltb5gc],
.danger-action[b-tnetltb5gc],
.confirm-delete-action[b-tnetltb5gc] {
    display: inline-flex;
    min-height: 37px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 750;
}

.secondary-action[b-tnetltb5gc] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--panel-background);
}

.secondary-action:hover:not(:disabled)[b-tnetltb5gc] {
    background: var(--button-hover);
}

.save-action[b-tnetltb5gc] {
    color: #ffffff;
    background: #1769dc;
}

.danger-action[b-tnetltb5gc] {
    border: 1px solid #dc8b94;
    color: #98313d;
    background: #fff0f1;
}

.danger-action:hover:not(:disabled)[b-tnetltb5gc] {
    border-color: #c95e6a;
    background: #ffe3e6;
}

.confirm-delete-action[b-tnetltb5gc] {
    color: #ffffff;
    background: #bb3f4d;
}

.button-spinner[b-tnetltb5gc] {
    width: 14px;
    height: 14px;
    border-width: 2px;
    border-color: rgba(255, 255, 255, 0.38);
    border-top-color: #ffffff;
}

.delete-confirmation[b-tnetltb5gc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    border: 1px solid #e09aa1;
    border-radius: 9px;
    background: #fde9eb;
}

.delete-confirmation > div:first-child[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.delete-confirmation strong[b-tnetltb5gc] {
    color: #8b2d37;
    font-size: 10.5px;
}

.delete-confirmation span[b-tnetltb5gc] {
    color: #87545a;
    font-size: 9.5px;
    line-height: 1.4;
}

.draggable-tile[b-tnetltb5gc] {
    user-select: none;
    touch-action: pan-y;
}

.sortable-list.is-sorting[b-tnetltb5gc] {
    cursor: grabbing;
}

[b-tnetltb5gc] .draggable-tile.dragging {
    opacity: 0.28;
}

[b-tnetltb5gc] .draggable-tile.drag-over {
    border-color: #1769dc;
    box-shadow: inset 0 3px 0 #1769dc;
}

[b-tnetltb5gc] .sortable-drag-ghost {
    border: 1px solid #1769dc !important;
    background: var(--panel-background) !important;
    box-shadow: 0 16px 34px rgba(24, 47, 78, 0.24) !important;
}

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

@media (max-width: 900px) {
    .schedule-header[b-tnetltb5gc] {
        flex-direction: column;
    }

    .schedule-header > div:first-child[b-tnetltb5gc] {
        width: 100%;
    }

    .schedule-toast[b-tnetltb5gc] {
        left: 50%;
    }
}

.schedule-header[b-tnetltb5gc] {
    gap: 18px;
}

.schedule-header h1[b-tnetltb5gc] {
    font-size: clamp(23px, 2vw, 30px);
}

.template-tile[b-tnetltb5gc],
.line-assignment-card[b-tnetltb5gc],
.primary-action[b-tnetltb5gc],
.save-action[b-tnetltb5gc],
.secondary-action[b-tnetltb5gc],
.danger-action[b-tnetltb5gc],
.confirm-delete-action[b-tnetltb5gc] {
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease;
}

.template-tile:hover:not(:disabled)[b-tnetltb5gc],
.line-assignment-card:hover[b-tnetltb5gc],
.primary-action:hover:not(:disabled)[b-tnetltb5gc],
.save-action:hover:not(:disabled)[b-tnetltb5gc],
.secondary-action:hover:not(:disabled)[b-tnetltb5gc],
.danger-action:hover:not(:disabled)[b-tnetltb5gc],
.confirm-delete-action:hover:not(:disabled)[b-tnetltb5gc] {
    transform: translateY(-1px);
}

.template-tile.selected[b-tnetltb5gc],
.line-assignment-card.selected[b-tnetltb5gc] {
    animation: shiftSelectionPulse-b-tnetltb5gc 180ms ease-out;
}

@keyframes shiftSelectionPulse-b-tnetltb5gc {
    0% { transform: scale(0.992); }
    100% { transform: scale(1); }
}

.panel-heading-actions[b-tnetltb5gc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.panel-add-text-button[b-tnetltb5gc] {
    display: inline-flex;
    width: auto;
    min-width: 104px;
    height: 38px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 12px;
    border: 1px solid #6ea7e8;
    border-radius: 9px;
    color: #0d5dcc;
    background: linear-gradient(180deg, #eef6ff 0%, #dbeafa 52%, #c7dcf5 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -2px 3px rgba(42, 105, 180, 0.12),
        0 3px 7px rgba(31, 94, 167, 0.18);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    white-space: nowrap;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, border-color 140ms ease, filter 140ms ease;
}

.panel-add-text-button span:first-child[b-tnetltb5gc] {
    font-size: 17px;
    line-height: 1;
}

.panel-add-text-button:hover:not(:disabled)[b-tnetltb5gc] {
    transform: translateY(-1px);
    border-color: #4f91dd;
    background: linear-gradient(180deg, #e7f2ff 0%, #d1e4f9 52%, #bdd5f1 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.98),
        inset 0 -2px 3px rgba(42, 105, 180, 0.16),
        0 6px 12px rgba(31, 94, 167, 0.22);
}

.panel-add-text-button:active:not(:disabled)[b-tnetltb5gc] {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        inset 0 2px 4px rgba(42, 105, 180, 0.16),
        0 1px 3px rgba(31, 94, 167, 0.14);
}

.heading-danger-action[b-tnetltb5gc] {
    display: inline-flex;
    min-height: 36px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid #e19aa2;
    border-radius: 8px;
    color: #a72d38;
    background: #fff4f5;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.heading-danger-action:hover:not(:disabled)[b-tnetltb5gc] {
    transform: translateY(-1px);
    border-color: #cb5d68;
    background: #ffe8eb;
    box-shadow: 0 7px 14px rgba(167, 45, 56, 0.12);
}

.schedule-context-dismiss-layer[b-tnetltb5gc] {
    position: fixed;
    inset: 0;
    z-index: 1900;
    background: transparent;
}

.schedule-context-menu[b-tnetltb5gc] {
    position: fixed;
    z-index: 1910;
    width: min(330px, calc(100vw - 24px));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--primary-text);
    background: var(--panel-background);
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.2);
    animation: scheduleContextOpen-b-tnetltb5gc 140ms ease-out;
}

.schedule-context-menu-heading[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--button-hover);
}

.schedule-context-menu-heading strong[b-tnetltb5gc] {
    font-size: 12.5px;
}

.schedule-context-menu-heading span[b-tnetltb5gc] {
    color: var(--secondary-text);
    font-size: 10px;
}

.schedule-context-menu button[b-tnetltb5gc] {
    display: grid;
    width: 100%;
    grid-template-columns: 28px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border: 0;
    color: #a8323f;
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.schedule-context-menu button:hover[b-tnetltb5gc] {
    background: color-mix(in srgb, var(--panel-background) 82%, #fde5e7 18%);
}

.schedule-context-menu button > span:last-child[b-tnetltb5gc] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.schedule-context-menu button strong[b-tnetltb5gc] {
    font-size: 12px;
}

.schedule-context-menu button small[b-tnetltb5gc] {
    color: var(--secondary-text);
    font-size: 9.5px;
}

.schedule-context-menu .context-menu-icon[b-tnetltb5gc] {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    color: #c14450;
    background: #fde5e7;
    font-size: 17px;
    font-weight: 800;
}

@keyframes scheduleContextOpen-b-tnetltb5gc {
    0% { transform: translateY(-3px) scale(0.98); opacity: 0; }
    100% { transform: translateY(0) scale(1); opacity: 1; }
}

.schedule-library-heading[b-tnetltb5gc] {
    position: relative;
    min-height: 88px;
    padding: 31px 112px 10px 14px;
    align-items: flex-end;
}

.schedule-library-refresh[b-tnetltb5gc] {
    position: absolute;
    top: 8px;
    left: 12px;
}

.schedule-library-title[b-tnetltb5gc] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.schedule-library-add[b-tnetltb5gc] {
    position: absolute;
    top: 35px;
    right: 20px;
}

.schedule-library-add:hover:not(:disabled)[b-tnetltb5gc] {
    transform: translateY(-1px);
}
/* /Components/Pages/SystemSettings.razor.rz.scp.css */
.system-settings-page[b-uelgzlyuaz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 760px;
}

.settings-card[b-uelgzlyuaz] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 22px 24px;
    border: 1px solid var(--border-color);
    border-radius: 14px;
    background: var(--panel-background);
    box-shadow: 0 8px 22px var(--shadow-color);
}

.settings-card.demo-active[b-uelgzlyuaz] {
    border-color: color-mix(in srgb, #e0a53a 55%, var(--border-color) 45%);
    box-shadow: 0 8px 22px rgba(224, 165, 58, 0.18);
}

.settings-card.maintenance-settings-card[b-uelgzlyuaz] {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, #2c83f3 45%, var(--border-color) 55%);
}

.settings-card.maintenance-settings-card[b-uelgzlyuaz]::after {
    position: absolute;
    top: -70%;
    left: -38%;
    width: 22%;
    height: 240%;
    content: "";
    background: linear-gradient(90deg, transparent, rgba(61, 143, 255, .08), transparent);
    transform: rotate(24deg);
    animation: maintenanceSettingsSheen-b-uelgzlyuaz 10s ease-in-out infinite 2s;
    pointer-events: none;
}

.settings-card.maintenance-active[b-uelgzlyuaz] {
    border-color: color-mix(in srgb, #e29a27 68%, var(--border-color) 32%);
    box-shadow: 0 8px 28px rgba(211, 133, 20, .18);
}

.maintenance-icon[b-uelgzlyuaz] {
    position: relative;
    color: #1769dc;
}

.maintenance-icon[b-uelgzlyuaz]::after {
    position: absolute;
    inset: 4px;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: .2;
    animation: maintenanceSettingsPulse-b-uelgzlyuaz 2.4s ease-out infinite;
}

.maintenance-active .maintenance-icon[b-uelgzlyuaz] {
    color: #b66f0c;
    background: color-mix(in srgb, #e29a27 15%, var(--panel-background) 85%);
}

.maintenance-settings-status[b-uelgzlyuaz] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.status-pill[b-uelgzlyuaz] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.status-pill i[b-uelgzlyuaz] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 12%, transparent);
}

.status-pill.maintenance-on[b-uelgzlyuaz] {
    border: 1px solid #e5af51;
    color: #8a570a;
    background: #fff0c9;
}

.status-pill.maintenance-on i[b-uelgzlyuaz] {
    animation: maintenanceSettingsDot-b-uelgzlyuaz 1.6s ease-in-out infinite;
}

.maintenance-started-copy[b-uelgzlyuaz] {
    color: var(--secondary-text);
    font-size: 11.5px;
}

.maintenance-started-copy strong[b-uelgzlyuaz] {
    color: var(--primary-text);
}

.maintenance-confirmation[b-uelgzlyuaz] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 15px;
    border: 1px solid color-mix(in srgb, #e29a27 58%, var(--border-color) 42%);
    border-radius: 11px;
    background: color-mix(in srgb, #e29a27 8%, var(--panel-background) 92%);
}

.maintenance-confirmation > div:first-child[b-uelgzlyuaz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--secondary-text);
    font-size: 12.5px;
    line-height: 1.45;
}

.maintenance-confirmation > div:first-child strong[b-uelgzlyuaz] {
    color: var(--primary-text);
    font-size: 14px;
}

.maintenance-confirmation-actions[b-uelgzlyuaz] {
    justify-content: flex-end;
    gap: 10px;
}

.settings-primary-button.maintenance-enable[b-uelgzlyuaz] {
    background: linear-gradient(135deg, #b96e0d, #e19a29 55%, #efb64e);
    box-shadow: 0 8px 20px rgba(207, 129, 19, .26);
}

.settings-primary-button.maintenance-disable[b-uelgzlyuaz] {
    background: linear-gradient(135deg, #146a51, #24a478 58%, #42bd97);
    box-shadow: 0 8px 20px rgba(30, 150, 109, .24);
}

@keyframes maintenanceSettingsSheen-b-uelgzlyuaz {
    0%, 65% { left: -38%; opacity: 0; }
    74% { opacity: 1; }
    94%, 100% { left: 128%; opacity: 0; }
}

@keyframes maintenanceSettingsPulse-b-uelgzlyuaz {
    from { transform: scale(.55); opacity: .35; }
    to { transform: scale(1.45); opacity: 0; }
}

@keyframes maintenanceSettingsDot-b-uelgzlyuaz {
    50% { transform: scale(1.16); opacity: .7; }
}

.settings-card.danger-card[b-uelgzlyuaz] {
    border-color: color-mix(in srgb, #dc3545 42%, var(--border-color) 58%);
}

.danger-icon[b-uelgzlyuaz] {
    color: #a91f2d;
    background: color-mix(in srgb, #dc3545 13%, var(--panel-background) 87%);
}

.settings-card-header[b-uelgzlyuaz] {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.settings-card-icon[b-uelgzlyuaz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 12px;
    background: color-mix(in srgb, #1769dc 12%, var(--panel-background) 88%);
    font-size: 22px;
}

.settings-card-header h2[b-uelgzlyuaz] {
    margin: 0 0 4px;
    color: var(--primary-text);
    font-size: 19px;
    font-weight: 750;
}

.settings-card-header p[b-uelgzlyuaz] {
    margin: 0;
    max-width: 560px;
    color: var(--secondary-text);
    font-size: 13px;
    line-height: 1.5;
}

.settings-card-status[b-uelgzlyuaz] {
    display: flex;
}

.status-pill[b-uelgzlyuaz] {
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
}

.status-pill.off[b-uelgzlyuaz] {
    color: var(--secondary-text);
    background: var(--fill-control, rgba(148, 163, 184, 0.18));
}

.status-pill.on[b-uelgzlyuaz] {
    color: #6d5a10;
    background: #fff0ad;
    border: 1px solid #e3c85f;
}

.settings-warning[b-uelgzlyuaz] {
    padding: 11px 14px;
    border: 1px solid #e3c85f;
    border-left: 4px solid #e0a53a;
    border-radius: 10px;
    background: color-mix(in srgb, #e0a53a 9%, var(--panel-background) 91%);
    color: var(--primary-text);
    font-size: 12.5px;
    line-height: 1.5;
}

.settings-warning strong[b-uelgzlyuaz] {
    color: #a9791a;
}

.settings-warning.danger-warning[b-uelgzlyuaz] {
    border-color: #df9298;
    border-left-color: #dc3545;
    background: color-mix(in srgb, #dc3545 8%, var(--panel-background) 92%);
}

.settings-warning.danger-warning strong[b-uelgzlyuaz] {
    color: #a91f2d;
}

.cleanup-preview[b-uelgzlyuaz] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 11px;
    background: color-mix(in srgb, var(--panel-background) 82%, var(--fill-control, #edf3fb) 18%);
}

.cleanup-preview > div[b-uelgzlyuaz] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding: 12px 14px;
    border-right: 1px solid var(--border-color);
}

.cleanup-preview > div:last-child[b-uelgzlyuaz] {
    border-right: 0;
}

.cleanup-preview strong[b-uelgzlyuaz] {
    color: var(--primary-text);
    font-size: 19px;
    line-height: 1;
}

.cleanup-preview span[b-uelgzlyuaz] {
    color: var(--secondary-text);
    font-size: 11px;
    line-height: 1.25;
}

.cleanup-confirmation[b-uelgzlyuaz] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px;
    border: 1px solid #df9298;
    border-radius: 11px;
    background: color-mix(in srgb, #dc3545 5%, var(--panel-background) 95%);
}

.cleanup-confirmation label[b-uelgzlyuaz] {
    color: var(--primary-text);
    font-size: 12.5px;
}

.cleanup-confirmation label strong[b-uelgzlyuaz] {
    color: #a91f2d;
}

.cleanup-confirmation input[b-uelgzlyuaz] {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--panel-background);
    font: inherit;
    font-size: 13px;
}

.cleanup-confirmation input:focus[b-uelgzlyuaz] {
    outline: 2px solid rgba(220, 53, 69, 0.2);
    border-color: #dc3545;
}

.settings-card-actions[b-uelgzlyuaz] {
    display: flex;
}

.settings-primary-button[b-uelgzlyuaz] {
    min-height: 40px;
    padding: 0 20px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: filter 140ms ease, transform 120ms ease, box-shadow 140ms ease;
}

.settings-primary-button.enable[b-uelgzlyuaz] {
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.22);
}

.settings-primary-button.restore[b-uelgzlyuaz] {
    background: linear-gradient(135deg, #b8791a 0%, #e0a53a 100%);
    box-shadow: 0 8px 18px rgba(224, 165, 58, 0.24);
}

.settings-primary-button.destructive[b-uelgzlyuaz] {
    background: linear-gradient(135deg, #a91f2d 0%, #dc3545 100%);
    box-shadow: 0 8px 18px rgba(220, 53, 69, 0.22);
}

.settings-secondary-button[b-uelgzlyuaz] {
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.cleanup-actions[b-uelgzlyuaz] {
    justify-content: flex-end;
    gap: 10px;
}

.settings-primary-button:hover:not(:disabled)[b-uelgzlyuaz] {
    filter: brightness(1.06);
}

.settings-primary-button:active:not(:disabled)[b-uelgzlyuaz] {
    transform: translateY(1px) scale(0.99);
}

.settings-primary-button:disabled[b-uelgzlyuaz] {
    cursor: wait;
    opacity: 0.72;
}

.feedback-message[b-uelgzlyuaz] {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
}

.error-message[b-uelgzlyuaz] {
    border: 1px solid #df9298;
    color: #762b33;
    background: #fde5e7;
}

.success-message[b-uelgzlyuaz] {
    border: 1px solid #75cdb7;
    color: #12614f;
    background: #def7ef;
}

@media (max-width: 720px) {
    .cleanup-preview[b-uelgzlyuaz] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cleanup-preview > div:nth-child(2)[b-uelgzlyuaz] {
        border-right: 0;
    }

    .cleanup-preview > div:nth-child(-n + 2)[b-uelgzlyuaz] {
        border-bottom: 1px solid var(--border-color);
    }
}

@media (prefers-reduced-motion: reduce) {
    .settings-card.maintenance-settings-card[b-uelgzlyuaz]::after,
    .maintenance-icon[b-uelgzlyuaz]::after,
    .status-pill.maintenance-on i[b-uelgzlyuaz] {
        animation: none;
    }
}
/* /Components/Pages/UsersAndPermissions.razor.rz.scp.css */
.users-access-page[b-7bpouszrki] {
    --ua-blue: #1674e8;
    --ua-blue-strong: #0c5dca;
    --ua-green: #14976a;
    --ua-red: #c9384a;
    --ua-amber: #c78316;
    --ua-panel: var(--panel-background);
    --ua-soft: color-mix(in srgb, var(--panel-background) 92%, #2b7de9 8%);
    --ua-border: color-mix(in srgb, var(--border-color) 78%, #2b7de9 22%);
    --ua-muted: var(--secondary-text);
    min-width: 0;
    color: var(--primary-text);
}

button[b-7bpouszrki], input[b-7bpouszrki], select[b-7bpouszrki] { font: inherit; }
button[b-7bpouszrki] { color: inherit; }

.access-workspace[b-7bpouszrki] {
    display: grid;
    min-height: calc(100vh - 112px);
    grid-template-columns: minmax(310px, 370px) minmax(0, 1fr);
    gap: 16px;
}

.access-directory[b-7bpouszrki],
.account-hero[b-7bpouszrki],
.editor-card[b-7bpouszrki],
.editor-placeholder[b-7bpouszrki],
.access-modal[b-7bpouszrki] {
    border: 1px solid var(--ua-border);
    background: var(--ua-panel);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-color) 72%, transparent);
}

.access-directory[b-7bpouszrki] {
    display: flex;
    min-width: 0;
    overflow: hidden;
    flex-direction: column;
    border-radius: 12px;
}

.directory-header[b-7bpouszrki] {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px;
    border-bottom: 1px solid var(--ua-border);
    background: linear-gradient(180deg, var(--ua-soft), var(--ua-panel));
}

.directory-title[b-7bpouszrki],
.directory-user[b-7bpouszrki],
.template-button[b-7bpouszrki],
.account-hero[b-7bpouszrki],
.card-heading[b-7bpouszrki],
.security-action-card[b-7bpouszrki],
.editor-actions[b-7bpouszrki],
.access-modal > header[b-7bpouszrki],
.access-modal > footer[b-7bpouszrki] {
    display: flex;
    align-items: center;
}

.directory-title[b-7bpouszrki] { min-width: 0; gap: 10px; }
.directory-title > span:last-child[b-7bpouszrki],
.template-button > span:last-child[b-7bpouszrki],
.card-heading > span:last-child[b-7bpouszrki],
.security-action-card > span:nth-child(2)[b-7bpouszrki] { display: flex; min-width: 0; flex-direction: column; }

.directory-icon[b-7bpouszrki],
.hero-avatar[b-7bpouszrki],
.user-avatar[b-7bpouszrki],
.card-icon[b-7bpouszrki],
.security-icon[b-7bpouszrki] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
}

.directory-icon[b-7bpouszrki] {
    width: 38px;
    height: 38px;
    border: 1px solid color-mix(in srgb, var(--ua-blue) 38%, transparent);
    border-radius: 10px;
    color: var(--ua-blue);
    background: color-mix(in srgb, var(--ua-blue) 12%, var(--ua-panel));
    font-size: 10px;
    font-weight: 900;
}

.directory-title strong[b-7bpouszrki] { font-size: 14px; font-weight: 900; }
.directory-title small[b-7bpouszrki], .template-button small[b-7bpouszrki], .card-heading small[b-7bpouszrki], .security-action-card small[b-7bpouszrki] { color: var(--ua-muted); font-size: 11px; line-height: 1.4; }

.primary-button[b-7bpouszrki],
.secondary-button[b-7bpouszrki],
.danger-button[b-7bpouszrki],
.success-button[b-7bpouszrki],
.template-button[b-7bpouszrki],
.refresh-button[b-7bpouszrki] {
    min-height: 38px;
    border-radius: 9px;
    font-weight: 850;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}

.primary-button[b-7bpouszrki] {
    padding: 0 16px;
    border: 1px solid #3687ef;
    color: #fff;
    background: linear-gradient(135deg, #2584f3, #0b60d0);
    box-shadow: 0 8px 18px rgba(22, 116, 232, .22);
}

.secondary-button[b-7bpouszrki] {
    padding: 0 15px;
    border: 1px solid var(--ua-border);
    background: var(--ua-panel);
}

.danger-button[b-7bpouszrki], .success-button[b-7bpouszrki] { padding: 0 15px; }
.danger-button[b-7bpouszrki] { border: 1px solid color-mix(in srgb, var(--ua-red) 55%, var(--ua-border)); color: var(--ua-red); background: color-mix(in srgb, var(--ua-red) 9%, var(--ua-panel)); }
.success-button[b-7bpouszrki] { border: 1px solid color-mix(in srgb, var(--ua-green) 55%, var(--ua-border)); color: var(--ua-green); background: color-mix(in srgb, var(--ua-green) 9%, var(--ua-panel)); }
.compact[b-7bpouszrki] { min-height: 34px; padding: 0 11px; font-size: 11px; }

button:hover:not(:disabled)[b-7bpouszrki] { transform: translateY(-1px); }
button:disabled[b-7bpouszrki] { opacity: .48; cursor: not-allowed; }

.directory-tools[b-7bpouszrki] { display: grid; gap: 9px; padding: 12px 14px; border-bottom: 1px solid var(--ua-border); }
.search-box[b-7bpouszrki] { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 11px; border: 1px solid var(--ua-border); border-radius: 9px; background: var(--ua-panel); }
.search-box input[b-7bpouszrki] { width: 100%; min-width: 0; border: 0; outline: 0; color: var(--primary-text); background: transparent; }
.template-button[b-7bpouszrki] { justify-content: flex-start; gap: 10px; padding: 8px 11px; border: 1px dashed color-mix(in srgb, var(--ua-blue) 55%, var(--ua-border)); color: var(--primary-text); background: color-mix(in srgb, var(--ua-blue) 6%, var(--ua-panel)); text-align: left; }
.template-button > span:first-child[b-7bpouszrki] { color: var(--ua-blue); font-size: 19px; }
.refresh-button[b-7bpouszrki] { width: 100%; min-height: 36px; border: 0; border-bottom: 1px solid var(--ua-border); border-radius: 0; color: var(--ua-blue); background: transparent; }

.directory-list[b-7bpouszrki] { display: grid; overflow: auto; gap: 8px; padding: 10px; }
.directory-user[b-7bpouszrki] { width: 100%; min-width: 0; align-items: flex-start; gap: 10px; padding: 11px; border: 1px solid transparent; border-radius: 11px; background: transparent; text-align: left; cursor: pointer; }
.directory-user:hover[b-7bpouszrki] { border-color: var(--ua-border); background: var(--ua-soft); }
.directory-user.selected[b-7bpouszrki] { border-color: var(--ua-blue); background: color-mix(in srgb, var(--ua-blue) 10%, var(--ua-panel)); box-shadow: inset 3px 0 var(--ua-blue), 0 7px 18px rgba(22, 116, 232, .12); }
.user-avatar[b-7bpouszrki], .hero-avatar[b-7bpouszrki] { color: #fff; background: linear-gradient(145deg, #2787ef, #0c57b9); font-weight: 900; box-shadow: 0 7px 16px rgba(22, 116, 232, .22); }
.user-avatar[b-7bpouszrki] { width: 38px; height: 38px; border-radius: 50%; font-size: 11px; }
.directory-user-copy[b-7bpouszrki] { display: flex; min-width: 0; flex: 1; flex-direction: column; gap: 2px; }
.directory-user-copy strong[b-7bpouszrki], .directory-user-copy small[b-7bpouszrki] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.directory-user-copy strong[b-7bpouszrki] { font-size: 12px; }
.directory-user-copy strong em[b-7bpouszrki], .account-hero h1 em[b-7bpouszrki] { margin-left: 5px; color: var(--ua-blue); font-size: 9px; font-style: normal; }
.directory-user-copy small[b-7bpouszrki] { color: var(--ua-muted); font-size: 10px; }
.presence[b-7bpouszrki] { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: var(--ua-muted); font-size: 9px; }
.presence i[b-7bpouszrki] { width: 7px; height: 7px; border-radius: 50%; background: #9aa8b7; }
.presence.online[b-7bpouszrki] { color: var(--ua-green); font-weight: 800; }
.presence.online i[b-7bpouszrki] { background: #25c184; box-shadow: 0 0 0 3px rgba(37, 193, 132, .12); }
.directory-badges[b-7bpouszrki] { display: flex; max-width: 104px; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.directory-badges b[b-7bpouszrki], .hero-badges b[b-7bpouszrki] { padding: 3px 6px; border-radius: 6px; font-size: 8px; font-weight: 900; }
.role-badge[b-7bpouszrki] { color: var(--ua-blue); background: color-mix(in srgb, var(--ua-blue) 12%, var(--ua-panel)); }
.state-badge.active[b-7bpouszrki], .hero-badges .active[b-7bpouszrki] { color: var(--ua-green); background: color-mix(in srgb, var(--ua-green) 12%, var(--ua-panel)); }
.state-badge.blocked[b-7bpouszrki], .hero-badges .blocked[b-7bpouszrki] { color: var(--ua-red); background: color-mix(in srgb, var(--ua-red) 12%, var(--ua-panel)); }
.agency-badge[b-7bpouszrki] { color: #8a5a00; background: #ffe8a3; }

.directory-skeleton[b-7bpouszrki] { display: grid; gap: 9px; padding: 12px; }
.directory-skeleton span[b-7bpouszrki] { height: 70px; border-radius: 10px; background: linear-gradient(90deg, var(--ua-soft), color-mix(in srgb, var(--ua-blue) 13%, var(--ua-panel)), var(--ua-soft)); background-size: 200% 100%; animation: ua-shimmer-b-7bpouszrki 1.4s linear infinite; }
.directory-empty[b-7bpouszrki], .editor-placeholder[b-7bpouszrki] { display: grid; place-items: center; align-content: center; gap: 7px; color: var(--ua-muted); text-align: center; }
.directory-empty[b-7bpouszrki] { min-height: 180px; padding: 24px; }
.directory-empty strong[b-7bpouszrki], .editor-placeholder strong[b-7bpouszrki] { color: var(--primary-text); }

.access-editor-shell[b-7bpouszrki] { display: flex; min-width: 0; flex-direction: column; gap: 12px; }
.editor-placeholder[b-7bpouszrki] { min-height: 520px; border-radius: 12px; }
.editor-placeholder > span[b-7bpouszrki] { font-size: 42px; color: var(--ua-blue); }

.account-hero[b-7bpouszrki] { min-height: 104px; gap: 14px; padding: 16px 18px; border-radius: 12px; background: linear-gradient(115deg, var(--ua-panel), color-mix(in srgb, var(--ua-blue) 7%, var(--ua-panel))); }
.hero-avatar[b-7bpouszrki] { width: 58px; height: 58px; border-radius: 18px; font-size: 17px; }
.hero-copy[b-7bpouszrki] { display: flex; min-width: 0; flex: 1; flex-direction: column; }
.hero-copy > small[b-7bpouszrki], .new-account > span:last-child > small[b-7bpouszrki], .access-modal header small[b-7bpouszrki] { color: var(--ua-blue); font-size: 9px; font-weight: 950; letter-spacing: .1em; }
.account-hero h1[b-7bpouszrki] { margin: 2px 0 1px; font-size: clamp(19px, 2vw, 26px); }
.account-hero p[b-7bpouszrki] { margin: 0; color: var(--ua-muted); }
.hero-badges[b-7bpouszrki] { display: flex; gap: 6px; margin-top: 7px; }
.hero-badges b:first-child[b-7bpouszrki] { color: var(--ua-blue); background: color-mix(in srgb, var(--ua-blue) 11%, var(--ua-panel)); }
.hero-facts[b-7bpouszrki] { display: flex; gap: 22px; }
.hero-facts > span[b-7bpouszrki] { display: flex; min-width: 110px; flex-direction: column; padding-left: 12px; border-left: 1px solid var(--ua-border); }
.hero-facts small[b-7bpouszrki] { color: var(--ua-muted); font-size: 9px; text-transform: uppercase; }
.hero-facts strong[b-7bpouszrki] { font-size: 11px; }

.editor-tabs[b-7bpouszrki] { display: flex; gap: 4px; padding: 5px; border: 1px solid var(--ua-border); border-radius: 11px; background: var(--ua-panel); }
.editor-tabs button[b-7bpouszrki] { min-height: 34px; padding: 0 18px; border: 0; border-radius: 8px; color: var(--ua-muted); background: transparent; font-weight: 850; cursor: pointer; }
.editor-tabs button.active[b-7bpouszrki] { color: #fff; background: linear-gradient(135deg, #2584f3, #0b60d0); box-shadow: 0 5px 12px rgba(22, 116, 232, .2); }

.editor-card[b-7bpouszrki] { min-width: 0; border-radius: 12px; }
.card-heading[b-7bpouszrki] { min-height: 66px; gap: 11px; padding: 12px 16px; border-bottom: 1px solid var(--ua-border); }
.card-heading.with-action[b-7bpouszrki] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.card-icon[b-7bpouszrki], .security-icon[b-7bpouszrki] { width: 34px; height: 34px; border-radius: 10px; color: var(--ua-blue); background: color-mix(in srgb, var(--ua-blue) 11%, var(--ua-panel)); font-weight: 900; }
.card-heading strong[b-7bpouszrki], .security-action-card strong[b-7bpouszrki] { font-size: 13px; font-weight: 900; }

.profile-grid[b-7bpouszrki] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 16px; }
.profile-grid label[b-7bpouszrki] { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--ua-muted); font-size: 10px; font-weight: 850; }
.profile-grid input:not([type="checkbox"])[b-7bpouszrki], .profile-grid select[b-7bpouszrki] { width: 100%; min-width: 0; min-height: 40px; box-sizing: border-box; padding: 0 11px; border: 1px solid var(--ua-border); border-radius: 9px; color: var(--primary-text); background: var(--ua-panel); outline: none; }
.profile-grid input:focus[b-7bpouszrki], .profile-grid select:focus[b-7bpouszrki] { border-color: var(--ua-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-blue) 12%, transparent); }
.profile-grid input:disabled[b-7bpouszrki], .profile-grid select:disabled[b-7bpouszrki] { color: var(--ua-muted); background: var(--ua-soft); }
.wide-field[b-7bpouszrki] { grid-column: 1 / -1; }
.toggle-field[b-7bpouszrki] { min-height: 40px; flex-direction: row !important; align-items: center; justify-content: space-between; padding: 8px 11px; border: 1px solid var(--ua-border); border-radius: 9px; background: var(--ua-soft); }
.toggle-field > span[b-7bpouszrki] { display: flex; flex-direction: column; }
.toggle-field input[b-7bpouszrki] { width: 38px; height: 21px; accent-color: var(--ua-blue); }

.protected-notice[b-7bpouszrki], .super-admin-notice[b-7bpouszrki] { display: flex; gap: 10px; margin: 14px 16px 0; padding: 11px 13px; border-radius: 9px; font-size: 11px; }
.protected-notice[b-7bpouszrki] { border: 1px solid color-mix(in srgb, var(--ua-amber) 42%, var(--ua-border)); color: #855a10; background: color-mix(in srgb, var(--ua-amber) 9%, var(--ua-panel)); }
.super-admin-notice[b-7bpouszrki] { border: 1px solid color-mix(in srgb, var(--ua-blue) 42%, var(--ua-border)); color: var(--ua-blue); background: color-mix(in srgb, var(--ua-blue) 8%, var(--ua-panel)); }
.protected-notice span[b-7bpouszrki], .super-admin-notice span[b-7bpouszrki] { color: var(--ua-muted); }

.access-summary-grid[b-7bpouszrki] {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    padding: 14px 14px 2px;
}

.access-summary-grid > span[b-7bpouszrki] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
    padding: 10px;
    border: 1px solid var(--ua-border);
    border-radius: 9px;
    background: var(--ua-soft);
}

.access-summary-grid small[b-7bpouszrki] { color: var(--ua-muted); font-size: 8px; text-transform: uppercase; }
.access-summary-grid strong[b-7bpouszrki] { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.access-summary-grid .unsaved[b-7bpouszrki] { border-color: color-mix(in srgb, var(--ua-amber) 55%, var(--ua-border)); color: var(--ua-amber); }
.access-summary-grid .saved[b-7bpouszrki] { color: var(--ua-green); }
.confirm-reset[b-7bpouszrki] { border-color: var(--ua-amber); color: #8b5c08; background: color-mix(in srgb, var(--ua-amber) 12%, var(--ua-panel)); }

.editor-actions[b-7bpouszrki] { justify-content: flex-end; gap: 9px; min-height: 58px; padding: 9px 13px; border: 1px solid var(--ua-border); border-radius: 11px; background: var(--ua-panel); }
.editor-actions > span[b-7bpouszrki] { margin-right: auto; color: var(--ua-muted); font-size: 10px; }
.sticky-actions[b-7bpouszrki] { position: sticky; bottom: 8px; z-index: 8; box-shadow: 0 10px 28px var(--shadow-color); }

.security-grid[b-7bpouszrki] { display: grid; gap: 10px; }
.security-action-card[b-7bpouszrki] { min-height: 78px; gap: 12px; padding: 13px 15px; }
.security-action-card > span:nth-child(2)[b-7bpouszrki] { flex: 1; }
.security-action-card.destructive[b-7bpouszrki] { border-color: color-mix(in srgb, var(--ua-red) 35%, var(--ua-border)); }
.confirm-actions[b-7bpouszrki] { display: flex; gap: 6px; }

.audit-grid[b-7bpouszrki] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; padding: 16px; background: var(--ua-border); }
.audit-grid > span[b-7bpouszrki] { display: flex; min-width: 0; flex-direction: column; gap: 4px; padding: 12px; background: var(--ua-panel); }
.audit-grid small[b-7bpouszrki] { color: var(--ua-muted); font-size: 9px; text-transform: uppercase; }
.audit-grid strong[b-7bpouszrki] { overflow-wrap: anywhere; font-size: 11px; }

.external-access-body[b-7bpouszrki] { padding: 16px; }
.external-access-body > strong[b-7bpouszrki] { color: var(--ua-blue); }
.external-access-body p[b-7bpouszrki], .external-access-body li[b-7bpouszrki] { color: var(--ua-muted); font-size: 11px; line-height: 1.55; }

.access-toast[b-7bpouszrki], .access-errors[b-7bpouszrki], .development-link-card[b-7bpouszrki] { display: flex; position: fixed; z-index: 1000; left: 50%; top: 72px; width: min(560px, calc(100vw - 32px)); box-sizing: border-box; transform: translateX(-50%); gap: 8px; padding: 12px 15px; border-radius: 11px; box-shadow: 0 16px 40px rgba(0, 0, 0, .22); }
.access-toast[b-7bpouszrki] { align-items: center; border: 1px solid #5ac89e; color: #08714e; background: #e8fff6; }
.access-errors[b-7bpouszrki] { flex-direction: column; border: 1px solid #e1707e; color: #9b2433; background: #fff0f2; }
.development-link-card[b-7bpouszrki] { top: 132px; flex-direction: column; border: 1px solid var(--ua-border); background: var(--ua-panel); }
.development-link-card a[b-7bpouszrki] { overflow-wrap: anywhere; color: var(--ua-blue); }

.modal-backdrop[b-7bpouszrki] { display: grid; position: fixed; z-index: 5000; inset: 0; place-items: center; padding: 18px; background: rgba(6, 16, 30, .68); -webkit-backdrop-filter: blur(8px) saturate(.72); backdrop-filter: blur(8px) saturate(.72); }
.access-modal[b-7bpouszrki] { display: flex; width: min(920px, 96vw); max-height: 92vh; overflow: hidden; flex-direction: column; border: 1px solid color-mix(in srgb, var(--ua-blue) 38%, var(--ua-border)); border-radius: 15px; background: var(--ua-panel); box-shadow: 0 30px 90px rgba(0, 0, 0, .48), 0 0 0 1px color-mix(in srgb, var(--ua-panel) 72%, transparent); isolation: isolate; }
.access-modal > header[b-7bpouszrki] { justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--ua-border); background: linear-gradient(180deg, color-mix(in srgb, var(--ua-blue) 9%, var(--ua-panel)), var(--ua-panel)); }
.access-modal header h2[b-7bpouszrki] { margin: 2px 0; font-size: 20px; }
.access-modal header p[b-7bpouszrki] { margin: 0; color: var(--ua-muted); font-size: 11px; }
.access-modal header button[b-7bpouszrki] { width: 34px; height: 34px; border: 1px solid var(--ua-border); border-radius: 9px; background: var(--ua-panel); font-size: 20px; cursor: pointer; }
.access-modal > footer[b-7bpouszrki] { justify-content: flex-end; gap: 9px; padding: 12px 16px; border-top: 1px solid var(--ua-border); background: color-mix(in srgb, var(--ua-blue) 4%, var(--ua-panel)); box-shadow: 0 -10px 28px color-mix(in srgb, var(--shadow-color) 62%, transparent); }
.access-modal > footer > span[b-7bpouszrki] { margin-right: auto; color: var(--ua-muted); font-size: 10px; }
.access-modal > footer .secondary-button[b-7bpouszrki] { min-width: 104px; border-color: color-mix(in srgb, var(--ua-blue) 68%, var(--ua-border)); color: color-mix(in srgb, var(--ua-blue) 78%, var(--primary-text)); background: color-mix(in srgb, var(--ua-blue) 15%, var(--ua-panel)); box-shadow: 0 5px 14px color-mix(in srgb, var(--ua-blue) 20%, transparent), inset 0 1px 0 color-mix(in srgb, var(--ua-panel) 80%, transparent); }
.access-modal > footer .secondary-button:hover:not(:disabled)[b-7bpouszrki] { border-color: var(--ua-blue); color: var(--primary-text); background: color-mix(in srgb, var(--ua-blue) 24%, var(--ua-panel)); box-shadow: 0 8px 18px color-mix(in srgb, var(--ua-blue) 28%, transparent); }
.template-editor-scroll[b-7bpouszrki] { overflow: auto; padding: 14px; background: color-mix(in srgb, var(--page-background) 82%, var(--ua-panel)); }
.modal-role-select[b-7bpouszrki] { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--ua-border); color: var(--ua-muted); background: var(--ua-panel); font-size: 10px; font-weight: 850; }
.summary-modal[b-7bpouszrki] { width: min(800px, 96vw); }
.change-summary[b-7bpouszrki] { overflow: auto; padding: 18px; color: var(--primary-text); background: var(--ua-panel); }
.change-summary > p[b-7bpouszrki] { margin: 0 0 14px; padding: 11px 13px; border: 1px solid color-mix(in srgb, var(--ua-blue) 24%, var(--ua-border)); border-left: 4px solid var(--ua-blue); border-radius: 9px; color: var(--primary-text); background: color-mix(in srgb, var(--ua-blue) 7%, var(--ua-panel)); line-height: 1.5; }
.change-summary > div[b-7bpouszrki] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.change-summary > div span[b-7bpouszrki] { display: flex; min-height: 76px; flex-direction: column; justify-content: center; padding: 12px; border: 1px solid var(--ua-border); border-radius: 10px; background: var(--ua-soft); box-shadow: 0 5px 14px color-mix(in srgb, var(--shadow-color) 55%, transparent); }
.change-summary > div span:nth-child(2)[b-7bpouszrki], .change-summary > div span:nth-child(4)[b-7bpouszrki] { border-color: color-mix(in srgb, var(--ua-red) 34%, var(--ua-border)); background: color-mix(in srgb, var(--ua-red) 7%, var(--ua-panel)); }
.change-summary > div strong[b-7bpouszrki] { color: var(--ua-blue); font-size: 24px; }
.change-summary > div span:nth-child(2) strong[b-7bpouszrki], .change-summary > div span:nth-child(4) strong[b-7bpouszrki] { color: var(--ua-red); }
.change-summary > div small[b-7bpouszrki] { color: var(--ua-muted); }
.change-summary ul[b-7bpouszrki] { max-height: 210px; overflow: auto; margin: 14px 0 0; padding: 7px; border: 1px solid var(--ua-border); border-radius: 10px; color: var(--primary-text); background: color-mix(in srgb, var(--page-background) 76%, var(--ua-panel)); font-size: 11px; list-style: none; }
.change-summary li[b-7bpouszrki] { position: relative; padding: 7px 9px 7px 28px; border-radius: 7px; line-height: 1.35; }
.change-summary li + li[b-7bpouszrki] { border-top: 1px solid color-mix(in srgb, var(--ua-border) 65%, transparent); }
.change-summary li[b-7bpouszrki]::before { content: "−"; position: absolute; left: 9px; top: 5px; color: var(--ua-red); font-size: 16px; font-weight: 950; }

/* Role Access Templates has its own restrained enterprise shell. */
.role-template-backdrop[b-7bpouszrki] {
    --ua-blue: #1674e8;
    --ua-panel: var(--panel-background);
    --ua-soft: color-mix(in srgb, var(--panel-background) 92%, #2b7de9 8%);
    --ua-border: color-mix(in srgb, var(--border-color) 78%, #2b7de9 22%);
    --ua-muted: var(--secondary-text);
    --template-selector-band: #f3f7fb;
    --template-control-surface: #ffffff;
    --template-menu-surface: #ffffff;
    --template-control-border: #8ea2b8;
    --template-option-hover: #eef4fb;
    --template-option-selected: #e1edfb;
    --template-menu-shadow: rgba(15, 31, 52, .24);
    background: color-mix(in srgb, var(--page-background) 34%, rgba(16, 25, 39, .76));
    -webkit-backdrop-filter: blur(10px) saturate(.7);
    backdrop-filter: blur(10px) saturate(.7);
    animation: role-template-backdrop-in-b-7bpouszrki 160ms ease-out both;
}

.app-shell.theme-dark .role-template-backdrop[b-7bpouszrki] {
    --template-selector-band: #182637;
    --template-control-surface: #223349;
    --template-menu-surface: #1b2a3e;
    --template-control-border: #58718e;
    --template-option-hover: #263b55;
    --template-option-selected: #21466d;
    --template-menu-shadow: rgba(0, 7, 18, .58);
}

.role-template-modal[b-7bpouszrki] {
    position: relative;
    width: min(920px, 96vw);
    height: min(86vh, 900px);
    max-height: 86vh;
    border: 1px solid color-mix(in srgb, #7290b2 62%, var(--ua-border));
    border-radius: 18px;
    background: color-mix(in srgb, var(--ua-panel) 96%, #eaf3fc 4%);
    box-shadow:
        0 40px 110px rgba(2, 8, 18, .62),
        0 12px 34px rgba(2, 10, 24, .3),
        inset 0 1px 0 color-mix(in srgb, #dcecff 46%, transparent);
    animation: role-template-shell-in-b-7bpouszrki 180ms cubic-bezier(.2, .72, .25, 1) both;
}

.role-template-modal[b-7bpouszrki]::before {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    right: 22px;
    left: 22px;
    height: 1px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, #e5f1ff 66%, transparent), transparent);
}

.access-modal > .role-template-header[b-7bpouszrki] {
    position: sticky;
    z-index: 3;
    top: 0;
    min-height: 92px;
    flex: 0 0 auto;
    padding: 18px 22px;
    border-bottom-color: color-mix(in srgb, #6f89a8 46%, var(--ua-border));
    background: color-mix(in srgb, var(--ua-panel) 94%, #dbeafa 6%);
    box-shadow: 0 8px 22px rgba(5, 15, 30, .08);
}

.role-template-header > span[b-7bpouszrki] {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.access-modal .role-template-header h2[b-7bpouszrki] {
    margin: 1px 0 2px;
    font-size: 22px;
    letter-spacing: -.015em;
}

.access-modal .role-template-header p[b-7bpouszrki] {
    max-width: 670px;
    font-size: 11px;
    line-height: 1.45;
}

.access-modal .role-template-header button[b-7bpouszrki] {
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border-color: color-mix(in srgb, #718ba8 62%, var(--ua-border));
    color: color-mix(in srgb, var(--primary-text) 88%, var(--ua-blue));
    background: color-mix(in srgb, var(--ua-panel) 90%, #cfdef0 10%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #f1f7ff 42%, transparent), 0 2px 6px rgba(4, 15, 31, .1);
    font-weight: 700;
    line-height: 1;
}

.access-modal .role-template-header button:hover[b-7bpouszrki] {
    border-color: color-mix(in srgb, var(--ua-blue) 58%, #7890aa);
    color: var(--primary-text);
    background: color-mix(in srgb, var(--ua-panel) 82%, var(--ua-blue) 18%);
}

.access-modal .role-template-header button:focus-visible[b-7bpouszrki] {
    outline: none;
    border-color: color-mix(in srgb, var(--ua-blue) 72%, #7890aa);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ua-blue) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #f1f7ff 42%, transparent);
}

.role-template-body[b-7bpouszrki] {
    display: flex;
    position: relative;
    min-height: 0;
    overflow: clip;
    flex: 1 1 auto;
    flex-direction: column;
    background: color-mix(in srgb, var(--page-background) 48%, var(--ua-panel) 52%);
}

.role-template-modal .modal-role-menu-dismiss[b-7bpouszrki] {
    position: absolute;
    z-index: 4;
    inset: 0;
    border: 0;
    background: transparent;
}

.role-template-modal .modal-role-select[b-7bpouszrki] {
    display: grid;
    position: relative;
    z-index: 5;
    grid-template-columns: 106px minmax(220px, 320px);
    align-items: center;
    flex: 0 0 auto;
    gap: 14px;
    min-height: 58px;
    padding: 7px 18px;
    border-bottom-color: color-mix(in srgb, #718ba9 50%, var(--ua-border));
    background: var(--template-selector-band);
    box-shadow: 0 6px 16px rgba(5, 15, 30, .07);
}

.role-template-modal .modal-role-label[b-7bpouszrki] {
    color: color-mix(in srgb, var(--ua-muted) 78%, var(--primary-text));
    letter-spacing: .035em;
    text-transform: uppercase;
}

.role-template-modal .modal-role-control[b-7bpouszrki] {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
}

.role-template-modal .modal-role-trigger[b-7bpouszrki] {
    display: block;
    width: 100%;
    min-width: 0;
    height: 42px;
    box-sizing: border-box;
    padding: 0 46px 0 15px;
    border: 1px solid var(--template-control-border);
    border-radius: 9px;
    color: var(--primary-text);
    background-color: var(--template-control-surface);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #f2f7fd 48%, transparent),
        0 3px 9px rgba(4, 15, 31, .12);
    outline: none;
    caret-color: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 40px;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}

.role-template-modal .modal-role-chevron[b-7bpouszrki] {
    position: absolute;
    top: 50%;
    right: 15px;
    width: 7px;
    height: 7px;
    border-right: 2px solid color-mix(in srgb, var(--primary-text) 76%, #7188a2);
    border-bottom: 2px solid color-mix(in srgb, var(--primary-text) 76%, #7188a2);
    pointer-events: none;
    transform: translateY(-65%) rotate(45deg);
    transition: border-color 140ms ease, transform 140ms ease;
}

.role-template-modal .modal-role-trigger:hover[b-7bpouszrki] {
    border-color: color-mix(in srgb, var(--ua-blue) 46%, #7188a2);
    background-color: color-mix(in srgb, var(--template-control-surface) 91%, var(--ua-blue) 9%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #f2f7fd 56%, transparent),
        0 4px 12px rgba(4, 15, 31, .15);
}

.role-template-modal .modal-role-trigger:focus-visible[b-7bpouszrki],
.role-template-modal .modal-role-trigger[aria-expanded="true"][b-7bpouszrki] {
    border-color: color-mix(in srgb, var(--ua-blue) 66%, #7188a2);
    background-color: color-mix(in srgb, var(--template-control-surface) 94%, var(--ua-blue) 6%);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ua-blue) 18%, transparent),
        inset 0 1px 0 color-mix(in srgb, #f2f7fd 54%, transparent),
        0 4px 12px rgba(4, 15, 31, .15);
}

.role-template-modal .modal-role-chevron.is-open[b-7bpouszrki] {
    border-color: color-mix(in srgb, var(--ua-blue) 72%, var(--primary-text));
    transform: translateY(-20%) rotate(225deg);
}

.role-template-modal .modal-role-menu[b-7bpouszrki] {
    display: grid;
    position: absolute;
    z-index: 8;
    top: calc(100% + 7px);
    right: 0;
    left: 0;
    max-height: min(260px, calc(86vh - 180px));
    gap: 2px;
    overflow-y: auto;
    padding: 5px;
    border: 1px solid var(--template-control-border);
    border-radius: 10px;
    color: var(--primary-text);
    background-color: var(--template-menu-surface);
    box-shadow:
        0 18px 42px var(--template-menu-shadow),
        0 5px 14px rgba(2, 10, 24, .18),
        inset 0 1px 0 color-mix(in srgb, #f1f7ff 36%, transparent);
    opacity: 1;
    isolation: isolate;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.role-template-modal .modal-role-option[b-7bpouszrki] {
    display: grid;
    width: 100%;
    min-height: 38px;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--primary-text);
    background-color: transparent;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: border-color 110ms ease, color 110ms ease, background-color 110ms ease;
}

.role-template-modal .modal-role-option:hover[b-7bpouszrki],
.role-template-modal .modal-role-option.active[b-7bpouszrki] {
    background-color: var(--template-option-hover);
}

.role-template-modal .modal-role-option.selected[b-7bpouszrki] {
    color: color-mix(in srgb, var(--ua-blue) 70%, var(--primary-text));
    background-color: var(--template-option-selected);
    font-weight: 900;
}

.app-shell.theme-dark .role-template-modal .modal-role-option.selected[b-7bpouszrki] {
    color: var(--primary-text);
}

.role-template-modal .modal-role-option.selected.active[b-7bpouszrki] {
    border-color: color-mix(in srgb, var(--ua-blue) 42%, var(--template-control-border));
}

.role-template-modal .modal-role-option:focus-visible[b-7bpouszrki] {
    outline: none;
    border-color: color-mix(in srgb, var(--ua-blue) 66%, var(--template-control-border));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ua-blue) 28%, transparent);
}

.role-template-modal .modal-role-option-indicator[b-7bpouszrki] {
    color: color-mix(in srgb, var(--ua-blue) 84%, var(--primary-text));
    font-size: 12px;
    font-weight: 950;
    text-align: center;
}

.role-template-modal .template-editor-scroll[b-7bpouszrki] {
    min-height: 0;
    overflow: auto;
    flex: 1 1 auto;
    padding: 10px 18px 22px;
    background: transparent;
    scrollbar-gutter: stable;
}

.access-modal > .role-template-footer[b-7bpouszrki] {
    position: sticky;
    z-index: 3;
    bottom: 0;
    min-height: 64px;
    flex: 0 0 auto;
    padding: 12px 18px;
    border-top-color: color-mix(in srgb, #718ba9 46%, var(--ua-border));
    background: color-mix(in srgb, var(--ua-panel) 94%, #dbeafa 6%);
    box-shadow: 0 -10px 24px rgba(3, 12, 27, .11), inset 0 1px 0 color-mix(in srgb, #dcecff 18%, transparent);
}

.role-template-footer > span[b-7bpouszrki] {
    font-weight: 700;
    letter-spacing: .01em;
}

.role-template-footer .primary-button[b-7bpouszrki],
.role-template-footer .secondary-button[b-7bpouszrki] {
    min-height: 40px;
}

.role-template-modal .role-template-footer .secondary-button[b-7bpouszrki] {
    display: inline-flex;
    min-width: 112px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid color-mix(in srgb, #7188a2 68%, var(--ua-border));
    border-radius: 9px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--ua-panel) 86%, #d5e2ef 14%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #f1f7ff 48%, transparent),
        0 4px 11px rgba(3, 12, 27, .11);
    font-weight: 850;
    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease, box-shadow 120ms ease;
}

.role-template-modal .role-template-footer .secondary-button:hover:not(:disabled)[b-7bpouszrki] {
    border-color: color-mix(in srgb, var(--ua-blue) 46%, #7188a2);
    color: var(--primary-text);
    background: color-mix(in srgb, var(--ua-panel) 80%, #c8dced 20%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, #f1f7ff 52%, transparent),
        0 6px 15px rgba(3, 12, 27, .15);
}

.role-template-modal .role-template-footer .secondary-button:active:not(:disabled)[b-7bpouszrki] {
    transform: translateY(0) scale(.985);
    background: color-mix(in srgb, var(--ua-panel) 76%, #bdcfdf 24%);
    box-shadow: inset 0 2px 4px rgba(3, 12, 27, .14);
}

.role-template-modal .role-template-footer .secondary-button:focus-visible[b-7bpouszrki] {
    outline: none;
    border-color: color-mix(in srgb, var(--ua-blue) 64%, #7188a2);
    box-shadow:
        0 0 0 3px color-mix(in srgb, var(--ua-blue) 17%, transparent),
        inset 0 1px 0 color-mix(in srgb, #f1f7ff 48%, transparent);
}

.role-template-modal[b-7bpouszrki]  .access-editor {
    gap: 1.35rem;
    padding: .1rem .08rem .35rem;
}

.role-template-modal[b-7bpouszrki]  .access-category {
    gap: .7rem;
}

.role-template-modal[b-7bpouszrki]  .access-category-heading {
    margin: 0 .25rem;
    border-color: color-mix(in srgb, #718ba9 42%, var(--access-border));
    border-left-color: color-mix(in srgb, var(--access-blue) 76%, #7894b4);
    border-radius: 10px;
    background: color-mix(in srgb, var(--access-surface) 92%, var(--access-blue) 8%);
    box-shadow: 0 3px 10px color-mix(in srgb, var(--shadow-color, rgba(34, 73, 133, .14)) 34%, transparent);
}

.role-template-modal[b-7bpouszrki]  .access-category-index {
    background: color-mix(in srgb, var(--access-blue) 86%, #23486f);
    box-shadow: 0 3px 8px rgba(18, 86, 166, .16);
}

.role-template-modal[b-7bpouszrki]  .access-module-list {
    gap: .58rem;
}

.role-template-modal[b-7bpouszrki]  .access-module-card {
    border-color: color-mix(in srgb, #7890ab 34%, var(--access-border));
    border-radius: 12px;
    box-shadow: 0 3px 12px color-mix(in srgb, var(--shadow-color, rgba(34, 73, 133, .14)) 30%, transparent);
}

.role-template-modal[b-7bpouszrki]  .access-module-card:hover {
    border-color: color-mix(in srgb, var(--access-blue) 42%, var(--access-border));
    box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow-color, rgba(34, 92, 173, .18)) 40%, transparent);
    transform: none;
}

.role-template-modal[b-7bpouszrki]  .access-module-card.has-access {
    border-color: color-mix(in srgb, var(--access-blue) 38%, var(--access-border));
}

.role-template-modal[b-7bpouszrki]  .access-module-header {
    background: color-mix(in srgb, var(--access-surface) 94%, var(--access-blue) 6%);
}

.role-template-backdrop.is-closing[b-7bpouszrki] {
    pointer-events: none;
    animation: role-template-backdrop-out-b-7bpouszrki 130ms ease-in both;
}

.role-template-backdrop.is-closing .role-template-modal[b-7bpouszrki] {
    animation: role-template-shell-out-b-7bpouszrki 130ms ease-in both;
}

@keyframes ua-shimmer-b-7bpouszrki { to { background-position: -200% 0; } }
@keyframes role-template-backdrop-in-b-7bpouszrki { from { opacity: 0; } }
@keyframes role-template-backdrop-out-b-7bpouszrki { to { opacity: 0; } }
@keyframes role-template-shell-in-b-7bpouszrki {
    from { opacity: 0; transform: translateY(10px) scale(.988); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes role-template-shell-out-b-7bpouszrki {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(6px) scale(.992); }
}

@media (max-width: 1050px) {
    .access-workspace[b-7bpouszrki] { grid-template-columns: 300px minmax(0, 1fr); }
    .hero-facts[b-7bpouszrki] { display: none; }
    .access-summary-grid[b-7bpouszrki] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .access-workspace[b-7bpouszrki] { grid-template-columns: 1fr; }
    .access-directory[b-7bpouszrki] { max-height: 420px; }
    .profile-grid[b-7bpouszrki], .audit-grid[b-7bpouszrki] { grid-template-columns: 1fr; }
    .card-heading.with-action[b-7bpouszrki] { grid-template-columns: auto minmax(0, 1fr); }
    .card-heading.with-action button[b-7bpouszrki] { grid-column: 1 / -1; }
    .change-summary > div[b-7bpouszrki] { grid-template-columns: repeat(2, 1fr); }
    .role-template-modal[b-7bpouszrki] { height: 88vh; max-height: 88vh; border-radius: 14px; }
    .access-modal > .role-template-header[b-7bpouszrki] { min-height: 84px; padding: 15px 16px; }
    .access-modal .role-template-header h2[b-7bpouszrki] { font-size: 19px; }
    .role-template-modal .modal-role-select[b-7bpouszrki] { grid-template-columns: 1fr; align-items: stretch; gap: 6px; padding: 9px 14px; }
    .role-template-modal .template-editor-scroll[b-7bpouszrki] { padding: 9px 12px 18px; }
    .access-modal > .role-template-footer[b-7bpouszrki] { flex-wrap: wrap; padding: 10px 12px; }
    .role-template-footer > span[b-7bpouszrki] { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *[b-7bpouszrki], *[b-7bpouszrki]::before, *[b-7bpouszrki]::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}
/* /Components/Shared/AccessSwitch.razor.rz.scp.css */
.access-switch[b-sgubq2e6rd] { display:inline-grid; place-items:center; cursor:pointer; }
.access-switch input[b-sgubq2e6rd] { position:absolute; opacity:0; pointer-events:none; }
.access-switch-track[b-sgubq2e6rd] { width:38px; height:22px; padding:3px; border-radius:999px; background:#cbd5e3; transition:background .18s ease,box-shadow .18s ease; }
.access-switch-track span[b-sgubq2e6rd] { display:block; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 2px 5px rgba(20,39,70,.22); transition:transform .18s ease; }
.access-switch input:checked + .access-switch-track[b-sgubq2e6rd] { background:linear-gradient(135deg,#1475e8,#29a6df); box-shadow:0 0 0 3px rgba(31,126,230,.12); }
.access-switch.grant-switch input:checked + .access-switch-track[b-sgubq2e6rd] { background:linear-gradient(135deg,#6b55d8,#9174ed); box-shadow:0 0 0 3px rgba(112,87,215,.12); }
.access-switch input:checked + .access-switch-track span[b-sgubq2e6rd] { transform:translateX(16px); }
.access-switch.disabled[b-sgubq2e6rd] { cursor:not-allowed; opacity:.45; }
@media (prefers-reduced-motion:reduce) { .access-switch-track[b-sgubq2e6rd],.access-switch-track span[b-sgubq2e6rd] { transition:none; } }
/* /Components/Shared/ActivityTimeline.razor.rz.scp.css */
.activity-timeline[b-yasz1s92ud] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 7px;
}

.activity-timeline-row[b-yasz1s92ud] {
    --activity-colour: #2f7df4;
    --activity-glow: rgba(47, 125, 244, 0.24);
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: 50px;
    grid-template-columns: 44px minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    padding: 3px 5px 3px 3px;
    border: 1px solid transparent;
    border-radius: 11px;
    color: var(--primary-text);
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}

.activity-timeline-row.category-status[b-yasz1s92ud],
.activity-details-popover.category-status[b-yasz1s92ud] {
    --activity-colour: #16a085;
    --activity-glow: rgba(22, 160, 133, 0.25);
}

.activity-timeline-row.category-warning[b-yasz1s92ud],
.activity-details-popover.category-warning[b-yasz1s92ud] {
    --activity-colour: #e2733f;
    --activity-glow: rgba(226, 115, 63, 0.28);
}

.activity-timeline-row.category-confirmation[b-yasz1s92ud],
.activity-details-popover.category-confirmation[b-yasz1s92ud] {
    --activity-colour: #20a66a;
    --activity-glow: rgba(32, 166, 106, 0.26);
}

.activity-timeline-row.category-hours[b-yasz1s92ud],
.activity-details-popover.category-hours[b-yasz1s92ud] {
    --activity-colour: #8b63ca;
    --activity-glow: rgba(139, 99, 202, 0.25);
}

.activity-timeline-row:hover[b-yasz1s92ud],
.activity-timeline-row.is-open[b-yasz1s92ud] {
    border-color: color-mix(in srgb, var(--activity-colour) 34%, var(--border-color));
    background: color-mix(in srgb, var(--activity-colour) 7%, var(--button-background));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--activity-glow) 42%, transparent);
}

.activity-timeline-row:focus-visible[b-yasz1s92ud] {
    outline: 2px solid color-mix(in srgb, var(--activity-colour) 78%, #ffffff 22%);
    outline-offset: 2px;
    border-color: var(--activity-colour);
}

.activity-timeline-icon[b-yasz1s92ud] {
    position: relative;
    display: flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--activity-colour) 16%, transparent);
    border-radius: 12px;
    color: var(--activity-colour);
    background: color-mix(in srgb, var(--activity-colour) 14%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transition: transform 160ms ease, box-shadow 180ms ease, background 180ms ease;
}

.activity-timeline-icon svg[b-yasz1s92ud],
.activity-popover-icon svg[b-yasz1s92ud] {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.activity-timeline-row:hover .activity-timeline-icon[b-yasz1s92ud],
.activity-timeline-row.is-open .activity-timeline-icon[b-yasz1s92ud] {
    transform: translateY(-1px) scale(1.035);
    background: color-mix(in srgb, var(--activity-colour) 19%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--activity-glow) 36%, transparent),
        0 8px 20px var(--activity-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.activity-timeline-row.is-newest .activity-timeline-icon[b-yasz1s92ud]::after {
    position: absolute;
    inset: -2px;
    content: "";
    border: 1px solid color-mix(in srgb, var(--activity-colour) 32%, transparent);
    border-radius: 14px;
    animation: activity-icon-breathe-b-yasz1s92ud 3.8s ease-in-out infinite;
    pointer-events: none;
}

.activity-timeline-title[b-yasz1s92ud] {
    min-width: 0;
    overflow: hidden;
    color: var(--primary-text);
    font-size: clamp(11.5px, 3.1cqi, 13px);
    font-weight: 800;
    line-height: 1.22;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-timeline-title-group[b-yasz1s92ud] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.activity-timeline-title-group .activity-timeline-title[b-yasz1s92ud] {
    flex: 1 1 auto;
}

.activity-state-badge[b-yasz1s92ud] {
    flex: 0 0 auto;
    padding: 2px 6px;
    border: 1px solid color-mix(in srgb, var(--secondary-text) 28%, transparent);
    border-radius: 999px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--secondary-text) 7%, transparent);
    font-size: 8.5px;
    font-weight: 850;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.activity-timeline-row.is-reverted[b-yasz1s92ud] {
    opacity: 0.72;
}

.activity-timeline-row.is-reverted .activity-timeline-icon[b-yasz1s92ud] {
    filter: saturate(0.55);
}

.activity-timeline-row.is-reverted:hover[b-yasz1s92ud],
.activity-timeline-row.is-reverted.is-open[b-yasz1s92ud] {
    opacity: 0.9;
}

.activity-timeline-row.is-undo-event[b-yasz1s92ud] {
    --activity-colour: #4c8a78;
    --activity-glow: rgba(76, 138, 120, 0.20);
}

.activity-timeline-disclosure[b-yasz1s92ud] {
    color: color-mix(in srgb, var(--activity-colour) 62%, var(--secondary-text));
    font-size: 22px;
    font-weight: 500;
    line-height: 1;
    opacity: 0.58;
    transform: translateX(-1px);
    transition: opacity 150ms ease, transform 150ms ease;
}

.activity-timeline-row:hover .activity-timeline-disclosure[b-yasz1s92ud],
.activity-timeline-row.is-open .activity-timeline-disclosure[b-yasz1s92ud] {
    opacity: 1;
    transform: translateX(1px);
}

.activity-details-popover[b-yasz1s92ud] {
    --activity-colour: #2f7df4;
    --activity-glow: rgba(47, 125, 244, 0.24);
    position: fixed;
    inset: unset;
    z-index: 4500;
    width: min(340px, calc(100vw - 24px));
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    margin: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 15px;
    border: 1px solid color-mix(in srgb, var(--activity-colour) 26%, var(--border-color));
    border-radius: 15px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 96%, var(--activity-colour) 4%);
    box-shadow: 0 22px 60px rgba(8, 21, 43, 0.27),
        0 0 0 1px color-mix(in srgb, var(--activity-colour) 7%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    opacity: 0;
    transform: translateY(4px) scale(0.985);
    transition: opacity 140ms ease, transform 140ms ease;
}

.activity-details-popover:popover-open[b-yasz1s92ud],
.activity-details-popover.is-fallback-open[b-yasz1s92ud] {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.app-shell.theme-dark .activity-details-popover[b-yasz1s92ud] {
    background: color-mix(in srgb, var(--panel-background) 90%, #0b1526 10%);
    box-shadow: 0 24px 68px rgba(0, 0, 0, 0.5),
        0 0 0 1px color-mix(in srgb, var(--activity-colour) 10%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.activity-popover-header[b-yasz1s92ud] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
}

.activity-popover-icon[b-yasz1s92ud] {
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: var(--activity-colour);
    background: color-mix(in srgb, var(--activity-colour) 14%, transparent);
    box-shadow: 0 7px 18px color-mix(in srgb, var(--activity-glow) 54%, transparent);
}

.activity-popover-header > div[b-yasz1s92ud] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.activity-popover-header span[b-yasz1s92ud] {
    color: var(--activity-colour);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.activity-popover-header strong[b-yasz1s92ud] {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 850;
    line-height: 1.25;
}

.activity-popover-description[b-yasz1s92ud] {
    margin: 13px 0 0;
    padding: 11px 12px;
    border-left: 3px solid color-mix(in srgb, var(--activity-colour) 74%, transparent);
    border-radius: 0 9px 9px 0;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--activity-colour) 7%, var(--button-background));
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

.activity-popover-facts[b-yasz1s92ud] {
    display: grid;
    margin: 13px 0 0;
    gap: 9px;
}

.activity-popover-facts > div[b-yasz1s92ud] {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    align-items: baseline;
}

.activity-popover-facts dt[b-yasz1s92ud],
.activity-popover-facts dd[b-yasz1s92ud] {
    margin: 0;
}

.activity-popover-facts dt[b-yasz1s92ud] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.02em;
}

.activity-popover-facts dd[b-yasz1s92ud] {
    min-width: 0;
    overflow-wrap: anywhere;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.35;
}

@keyframes activity-icon-breathe-b-yasz1s92ud {
    0%, 100% {
        opacity: 0.24;
        transform: scale(0.96);
        box-shadow: 0 0 0 0 transparent;
    }

    50% {
        opacity: 0.72;
        transform: scale(1.04);
        box-shadow: 0 0 15px var(--activity-glow);
    }
}

@media (max-width: 520px) {
    .activity-details-popover[b-yasz1s92ud] {
        width: calc(100vw - 24px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .activity-timeline-row[b-yasz1s92ud],
    .activity-timeline-icon[b-yasz1s92ud],
    .activity-timeline-disclosure[b-yasz1s92ud],
    .activity-details-popover[b-yasz1s92ud] {
        transition: none;
    }

    .activity-timeline-row.is-newest .activity-timeline-icon[b-yasz1s92ud]::after {
        animation: none;
    }

    .activity-timeline-row:hover .activity-timeline-icon[b-yasz1s92ud],
    .activity-timeline-row.is-open .activity-timeline-icon[b-yasz1s92ud],
    .activity-timeline-row:hover .activity-timeline-disclosure[b-yasz1s92ud],
    .activity-timeline-row.is-open .activity-timeline-disclosure[b-yasz1s92ud],
    .activity-details-popover[b-yasz1s92ud] {
        transform: none;
    }
}
/* /Components/Shared/AssignEmployeePanel.razor.rz.scp.css */
.assign-panel-backdrop[b-ke59jbkv0p] {
    position: fixed;
    inset: 0;
    z-index: 60;
    appearance: none;
    border: 0;
    background: rgba(15, 23, 42, 0.34);
    cursor: default;
}

.assign-panel[b-ke59jbkv0p] {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 70;
    display: grid;
    width: min(540px, calc(100vw - 82px));
    grid-template-rows: auto minmax(0, 1fr) auto;
    color: var(--primary-text);
    background: var(--panel-background);
    border-left: 1px solid var(--border-color);
    box-shadow: -22px 0 55px rgba(15, 23, 42, 0.22);
    animation: assign-panel-enter-b-ke59jbkv0p 180ms ease-out;
}

.assign-panel-header[b-ke59jbkv0p] {
    display: flex;
    min-height: 72px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
}

.assign-panel-header h2[b-ke59jbkv0p] {
    margin: 3px 0 0;
    color: var(--primary-text);
    font-size: 23px;
    font-weight: 720;
    letter-spacing: -0.3px;
    line-height: 1.15;
}

.assign-panel-eyebrow[b-ke59jbkv0p] {
    color: #1769dc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.85px;
    text-transform: uppercase;
}

.assign-panel-close[b-ke59jbkv0p] {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    color: var(--secondary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 24px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 140ms ease;
}

.assign-panel-close:hover[b-ke59jbkv0p] {
    transform: translateY(-1px);
    color: var(--primary-text);
    border-color: color-mix(in srgb, #1769dc 45%, var(--border-color));
    background: var(--button-hover);
}

.assign-panel-body[b-ke59jbkv0p] {
    min-height: 0;
    overflow-y: auto;
    padding: 14px 18px 18px;
}

.assign-target-card[b-ke59jbkv0p] {
    padding: 13px;
    border: 1px solid color-mix(in srgb, #1769dc 30%, var(--border-color));
    border-radius: 12px;
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
}

.assign-target-heading[b-ke59jbkv0p] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.assign-target-heading > div[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.assign-target-heading span[b-ke59jbkv0p],
.assign-target-grid span[b-ke59jbkv0p] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 750;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.assign-target-heading strong[b-ke59jbkv0p] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 17px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-slot-badge[b-ke59jbkv0p] {
    display: inline-flex;
    min-height: 24px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 9px;
    border: 1px solid color-mix(in srgb, #1769dc 44%, var(--border-color));
    border-radius: 999px;
    color: #1769dc !important;
    background: color-mix(in srgb, var(--panel-background) 82%, #1769dc 18%);
    font-size: 10.5px !important;
}

.assign-target-grid[b-ke59jbkv0p] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.assign-target-grid > div[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    min-height: 48px;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 7px 9px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 9px;
    background: var(--button-background);
}

.assign-target-grid strong[b-ke59jbkv0p] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-search-section[b-ke59jbkv0p] {
    margin-top: 14px;
}

.assign-search-box[b-ke59jbkv0p] {
    position: relative;
    display: flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: var(--button-background);
    transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.assign-search-box:focus-within[b-ke59jbkv0p] {
    border-color: #1769dc;
    background: var(--panel-background);
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.12);
}

.assign-search-icon[b-ke59jbkv0p] {
    position: relative;
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    border: 2px solid var(--secondary-text);
    border-radius: 50%;
}

.assign-search-icon[b-ke59jbkv0p]::after {
    position: absolute;
    right: -5px;
    bottom: -3px;
    width: 6px;
    height: 2px;
    border-radius: 2px;
    background: var(--secondary-text);
    content: "";
    transform: rotate(45deg);
    transform-origin: left center;
}

.assign-search-box input[b-ke59jbkv0p] {
    min-width: 0;
    min-height: 38px;
    flex: 1 1 auto;
    padding: 0;
    border: 0;
    outline: 0;
    color: var(--primary-text);
    background: transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 550;
}

.assign-search-box input[b-ke59jbkv0p]::placeholder {
    color: color-mix(in srgb, var(--secondary-text) 78%, transparent);
}

.assign-search-box > button[b-ke59jbkv0p] {
    display: grid;
    width: 25px;
    height: 25px;
    flex: 0 0 auto;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 17px;
    cursor: pointer;
}

.assign-search-box > button:hover[b-ke59jbkv0p] {
    color: var(--primary-text);
    background: var(--button-hover);
}

.assign-filter-row[b-ke59jbkv0p] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
}

.assign-type-filter[b-ke59jbkv0p] {
    display: inline-grid;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: var(--button-hover);
}

.assign-type-filter button[b-ke59jbkv0p] {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    color: var(--secondary-text);
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 700;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.assign-type-filter button span[b-ke59jbkv0p] {
    display: inline-flex;
    min-width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border-radius: 999px;
    color: inherit;
    background: color-mix(in srgb, currentColor 10%, transparent);
    font-size: 9.5px;
    font-weight: 800;
}

.assign-type-filter button.active[b-ke59jbkv0p] {
    color: #1769dc;
    background: var(--panel-background);
    box-shadow: 0 2px 7px rgba(15, 23, 42, 0.1);
}

.assign-agency-filter[b-ke59jbkv0p] {
    display: flex;
    min-width: 150px;
    flex-direction: column;
    gap: 4px;
}

.assign-agency-filter > span[b-ke59jbkv0p] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.assign-agency-filter select[b-ke59jbkv0p] {
    width: 100%;
    min-height: 34px;
    padding: 0 28px 0 9px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: 0;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 650;
}

.assign-agency-filter select:focus[b-ke59jbkv0p] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, 0.1);
}

.assign-results-section[b-ke59jbkv0p] {
    margin-top: 15px;
}

.assign-results-heading[b-ke59jbkv0p] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 7px;
}

.assign-results-heading > div[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.assign-results-heading > div > span[b-ke59jbkv0p] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 780;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.assign-results-heading strong[b-ke59jbkv0p] {
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 650;
}

.assign-match-hint[b-ke59jbkv0p] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
    text-align: right;
}

.assign-employee-list[b-ke59jbkv0p] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.assign-employee-card[b-ke59jbkv0p] {
    display: grid;
    width: 100%;
    min-height: 62px;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.assign-employee-card:hover:not(:disabled)[b-ke59jbkv0p] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #1769dc 48%, var(--border-color));
    background: var(--panel-background);
    box-shadow: 0 7px 16px rgba(15, 23, 42, 0.08);
}

.assign-employee-card.selected[b-ke59jbkv0p] {
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 88%, #1769dc 12%);
    box-shadow: inset 3px 0 0 #1769dc, 0 7px 18px rgba(23, 105, 220, 0.11);
}

.assign-employee-card.unavailable[b-ke59jbkv0p] {
    opacity: 0.55;
    cursor: not-allowed;
}

.assign-employee-initials[b-ke59jbkv0p] {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: #2f405f;
    font-size: 13px;
    font-weight: 800;
}

.assign-employee-main[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.assign-employee-name-row[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
}

.assign-employee-name-row > strong[b-ke59jbkv0p] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 720;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-role-match[b-ke59jbkv0p] {
    display: inline-flex;
    min-height: 19px;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 6px;
    border: 1px solid #82c9a9;
    border-radius: 5px;
    color: #176b49;
    background: #e0f5eb;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.25px;
    text-transform: uppercase;
}

.assign-employee-details[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 600;
}

.assign-employee-details span[b-ke59jbkv0p] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-employee-details span + span[b-ke59jbkv0p]::before {
    margin-right: 7px;
    color: color-mix(in srgb, var(--secondary-text) 58%, transparent);
    content: "•";
}

.assign-employee-side[b-ke59jbkv0p] {
    display: flex;
    min-width: 78px;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 6px;
}

.assign-employment-badge[b-ke59jbkv0p] {
    display: inline-flex;
    min-height: 21px;
    align-items: center;
    padding: 0 7px;
    border-radius: 5px;
    font-size: 9.5px;
    font-weight: 800;
}

.assign-employment-badge.permanent[b-ke59jbkv0p] {
    color: var(--secondary-text);
    border: 1px solid var(--border-color);
    background: var(--button-hover);
}

.assign-employment-badge.agency[b-ke59jbkv0p] {
    color: #4b3c05;
    border: 1px solid color-mix(in srgb, var(--agency-badge-colour) 66%, #4b3c05 34%);
    background: color-mix(in srgb, var(--agency-badge-colour) 58%, #ffffff 42%);
}

.assign-select-indicator[b-ke59jbkv0p] {
    position: relative;
    width: 17px;
    height: 17px;
    border: 1px solid color-mix(in srgb, var(--secondary-text) 65%, transparent);
    border-radius: 50%;
    background: var(--panel-background);
}

.assign-employee-card.selected .assign-select-indicator[b-ke59jbkv0p] {
    border: 5px solid #1769dc;
}

.assign-unavailable-label[b-ke59jbkv0p] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 700;
    white-space: nowrap;
}

.assign-empty-state[b-ke59jbkv0p] {
    display: flex;
    min-height: 115px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    padding: 18px;
    border: 1px dashed var(--border-color);
    border-radius: 10px;
    color: var(--secondary-text);
    background: var(--button-hover);
    text-align: center;
}

.assign-empty-state strong[b-ke59jbkv0p] {
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 720;
}

.assign-empty-state span[b-ke59jbkv0p] {
    max-width: 330px;
    font-size: 11.5px;
    font-weight: 550;
}

.assign-empty-state.error[b-ke59jbkv0p] {
    border-color: #df9298;
    color: #762b33;
    background: #fde5e7;
}

.assign-empty-state.error strong[b-ke59jbkv0p] {
    color: #762b33;
}

.assign-panel-footer[b-ke59jbkv0p] {
    display: flex;
    min-height: 76px;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    border-top: 1px solid var(--border-color);
    background: var(--panel-background);
    box-shadow: 0 -10px 22px rgba(15, 23, 42, 0.05);
}

.assign-selected-summary[b-ke59jbkv0p] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 3px;
}

.assign-selected-summary span[b-ke59jbkv0p] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.assign-selected-summary strong[b-ke59jbkv0p] {
    overflow: hidden;
    max-width: 185px;
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 680;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.assign-panel-actions[b-ke59jbkv0p] {
    display: flex;
    flex: 0 0 auto;
    gap: 8px;
}

.assign-panel-actions button[b-ke59jbkv0p] {
    min-height: 38px;
    padding: 0 14px;
    border-radius: 9px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 720;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.assign-panel-actions button:hover:not(:disabled)[b-ke59jbkv0p] {
    transform: translateY(-1px);
}

.assign-cancel-button[b-ke59jbkv0p] {
    border: 1px solid var(--border-color);
    color: var(--primary-text);
    background: var(--button-background);
}

.assign-cancel-button:hover[b-ke59jbkv0p] {
    border-color: color-mix(in srgb, #1769dc 42%, var(--border-color));
    background: var(--button-hover);
}

.assign-confirm-button[b-ke59jbkv0p] {
    min-width: 128px;
    border: 1px solid #1769dc;
    color: #ffffff;
    background: #1769dc;
    box-shadow: 0 6px 14px rgba(23, 105, 220, 0.2);
}

.assign-confirm-button:hover:not(:disabled)[b-ke59jbkv0p] {
    background: #125bbf;
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.26);
}

.assign-confirm-button:disabled[b-ke59jbkv0p] {
    opacity: 0.46;
    cursor: not-allowed;
    box-shadow: none;
}

@keyframes assign-panel-enter-b-ke59jbkv0p {
    from {
        transform: translateX(28px);
        opacity: 0.72;
    }

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

@media (max-width: 680px) {
    .assign-panel[b-ke59jbkv0p] {
        width: 100vw;
    }

    .assign-panel-backdrop[b-ke59jbkv0p] {
        display: none;
    }

    .assign-panel-header[b-ke59jbkv0p],
    .assign-panel-body[b-ke59jbkv0p],
    .assign-panel-footer[b-ke59jbkv0p] {
        padding-inline: 14px;
    }

    .assign-filter-row[b-ke59jbkv0p] {
        align-items: stretch;
        flex-direction: column;
    }

    .assign-type-filter[b-ke59jbkv0p] {
        width: 100%;
    }

    .assign-agency-filter[b-ke59jbkv0p] {
        width: 100%;
    }

    .assign-panel-footer[b-ke59jbkv0p] {
        align-items: stretch;
        flex-direction: column;
    }

    .assign-selected-summary strong[b-ke59jbkv0p] {
        max-width: none;
    }

    .assign-panel-actions[b-ke59jbkv0p] {
        width: 100%;
    }

    .assign-panel-actions button[b-ke59jbkv0p] {
        flex: 1 1 0;
    }
}

@media (max-width: 430px) {
    .assign-target-grid[b-ke59jbkv0p] {
        grid-template-columns: minmax(0, 1fr);
    }

    .assign-employee-card[b-ke59jbkv0p] {
        grid-template-columns: 36px minmax(0, 1fr);
    }

    .assign-employee-side[b-ke59jbkv0p] {
        grid-column: 2;
        min-width: 0;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
    }
}

.assign-operation-message[b-ke59jbkv0p] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
    padding: 11px 12px;
    border: 1px solid #df9298;
    border-radius: 9px;
    color: #762b33;
    background: #fde5e7;
    font-size: 13px;
}

.assign-operation-message strong[b-ke59jbkv0p] {
    font-size: 14px;
}
/* /Components/Shared/CardHeading.razor.rz.scp.css */
.card-heading[b-vul2w7imax] {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ua-border, var(--border-color));
}

.card-heading > span:last-child[b-vul2w7imax] {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.card-heading strong[b-vul2w7imax] {
    font-size: 13px;
    font-weight: 900;
}

.card-heading small[b-vul2w7imax] {
    color: var(--ua-muted, var(--secondary-text));
    font-size: 11px;
    line-height: 1.4;
}

.card-icon[b-vul2w7imax] {
    display: grid;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 10px;
    color: var(--ua-blue, #1674e8);
    background: color-mix(in srgb, var(--ua-blue, #1674e8) 11%, var(--panel-background));
    font-weight: 900;
}
/* /Components/Shared/ChatPanel.razor.rz.scp.css */
/* ============================================================
   Chat panel - floating glass slide-over
   Light + dark themed, motion-aware.
   The theme class is passed directly by MainLayout so component-scoped CSS
   never has to infer theme state through an isolated ancestor selector.
   ============================================================ */

.chat-overlay[hidden][b-9mqvj93lui],
.chat-panel[hidden][b-9mqvj93lui] {
    display: none;
}

.chat-overlay[b-9mqvj93lui] {
    position: fixed;
    inset: 0;
    z-index: 640;
    background: rgba(10, 24, 46, 0.34);
    backdrop-filter: blur(3px) saturate(0.95);
    animation: chat-overlay-in-b-9mqvj93lui 180ms ease;
}

.chat-overlay.theme-dark[b-9mqvj93lui] {
    background: rgba(4, 10, 20, 0.52);
}

@keyframes chat-overlay-in-b-9mqvj93lui {
    from { opacity: 0; }
    to { opacity: 1; }
}

.chat-panel[b-9mqvj93lui] {
    --chat-surface: #ffffff;
    --chat-surface-soft: #f4f7fc;
    --chat-border: rgba(23, 105, 220, 0.16);
    --chat-hairline: rgba(23, 105, 220, 0.10);
    --chat-text: #14243c;
    --chat-muted: #6b7d94;
    --chat-accent: #1769dc;
    --chat-accent-2: #58acc0;
    --chat-online: #25bd78;
    --chat-brb: #d78d1f;
    --chat-dnd: #e5484d;
    --chat-mine-from: #2158bd;
    --chat-mine-to: #3f8fd4;
    --chat-theirs: #eef3fa;
    --chat-selected-background: #e8f1ff;
    --chat-selected-unread-background: #dceaff;
    --chat-selected-border: #bfd4f4;
    --chat-selected-unread-border: #91b7ec;
    --chat-selected-text: #10213a;
    --chat-selected-muted: #4a6079;

    position: fixed;
    /* Sits just below the global header's bottom separator (--app-header-height,
       defined on .app-shell in MainLayout.razor.css) with a small clean gap, so
       the header - which renders at a higher z-index - never paints over the
       panel's own header. */
    top: calc(var(--app-header-height, 64px) + 4px);
    right: 12px;
    bottom: 12px;
    z-index: 650;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: min(420px, calc(100vw - 24px));
    border: 1px solid var(--chat-border);
    border-radius: 20px;
    color: var(--chat-text);
    background: var(--chat-surface);
    box-shadow:
        0 32px 70px rgba(10, 24, 46, 0.24),
        0 2px 0 rgba(255, 255, 255, 0.6) inset;
    animation: chat-panel-in-b-9mqvj93lui 260ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.chat-panel.theme-dark[b-9mqvj93lui] {
    --chat-surface: #131c29;
    --chat-surface-soft: #172231;
    --chat-border: rgba(111, 199, 199, 0.16);
    --chat-hairline: rgba(111, 199, 199, 0.12);
    --chat-text: #e8f2ff;
    --chat-muted: #93a6bd;
    --chat-accent: #58d1e4;
    --chat-accent-2: #1f9fed;
    --chat-online: #35d18a;
    --chat-brb: #e3a53a;
    --chat-dnd: #f05b61;
    --chat-mine-from: #1663cf;
    --chat-mine-to: #2a8fe0;
    --chat-theirs: #1e2b3d;
    --chat-selected-background: #17365f;
    --chat-selected-unread-background: #1b416f;
    --chat-selected-border: #315d91;
    --chat-selected-unread-border: #477dbb;
    --chat-selected-text: #ffffff;
    --chat-selected-muted: #c5d4e6;

    box-shadow:
        0 34px 80px rgba(0, 0, 0, 0.52),
        0 1px 0 rgba(255, 255, 255, 0.05) inset;
}

@keyframes chat-panel-in-b-9mqvj93lui {
    from {
        transform: translateX(34px) scale(0.985);
        opacity: 0;
    }

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

/* Slow ambient glow behind the panel content. */
.chat-panel-glow[b-9mqvj93lui] {
    position: absolute;
    inset: -30% -20% auto -20%;
    height: 60%;
    pointer-events: none;
    opacity: 0.55;
    background:
        radial-gradient(circle at 30% 40%, color-mix(in srgb, var(--chat-accent) 26%, transparent), transparent 62%),
        radial-gradient(circle at 74% 30%, color-mix(in srgb, var(--chat-accent-2) 22%, transparent), transparent 60%);
    filter: blur(28px);
    animation: chat-glow-drift-b-9mqvj93lui 16s ease-in-out infinite alternate;
}

@keyframes chat-glow-drift-b-9mqvj93lui {
    from { transform: translate3d(-4%, 0, 0) scale(1); }
    to { transform: translate3d(6%, 3%, 0) scale(1.08); }
}

/* --- Header ------------------------------------------------- */

.chat-panel-header[b-9mqvj93lui] {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 52px;
    padding: 15px 16px 14px;
    border-bottom: 1px solid var(--chat-hairline);
    background: transparent;
}

.chat-panel-title[b-9mqvj93lui] {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

.chat-panel-icon[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 12px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-mine-from) 0%, var(--chat-accent-2) 100%);
    box-shadow: 0 10px 20px color-mix(in srgb, var(--chat-accent) 26%, transparent);
}

.chat-panel-icon svg[b-9mqvj93lui] {
    width: 19px;
    height: 19px;
}

.chat-panel-title-copy[b-9mqvj93lui] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.chat-panel-title-copy strong[b-9mqvj93lui] {
    color: var(--chat-text);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.chat-panel-title-copy span[b-9mqvj93lui] {
    overflow: hidden;
    color: var(--chat-muted);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-panel-unread-pill[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 7px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-mine-from), var(--chat-accent-2));
    font-size: 11px;
    font-weight: 800;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--chat-accent) 34%, transparent);
}

.chat-panel-header-actions[b-9mqvj93lui] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 6px;
}

.chat-back-button[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 11px 6px 8px;
    border: 1px solid var(--chat-border);
    border-radius: 999px;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 8%, transparent);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 750;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

.chat-back-button svg[b-9mqvj93lui] {
    width: 14px;
    height: 14px;
    transition: transform 160ms ease;
}

.chat-back-button:hover[b-9mqvj93lui] {
    background: color-mix(in srgb, var(--chat-accent) 16%, transparent);
}

.chat-back-button:hover svg[b-9mqvj93lui] {
    transform: translateX(-2px);
}

.chat-close-button[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--chat-muted);
    background: transparent;
    cursor: pointer;
    transition: color 140ms ease, background 140ms ease, transform 200ms ease, border-color 140ms ease;
}

.chat-close-button svg[b-9mqvj93lui] {
    width: 15px;
    height: 15px;
}

.chat-close-button:hover[b-9mqvj93lui] {
    color: var(--chat-text);
    border-color: var(--chat-border);
    background: color-mix(in srgb, var(--chat-accent) 10%, transparent);
    transform: rotate(90deg);
}

.chat-refresh-button[b-9mqvj93lui] {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    overflow: visible;
    border: 1px solid color-mix(in srgb, var(--chat-accent) 34%, var(--chat-border));
    border-radius: 50%;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-surface) 92%, var(--chat-accent) 8%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 42%, transparent), inset 0 0 12px color-mix(in srgb, var(--chat-accent) 10%, transparent), 0 4px 12px color-mix(in srgb, var(--chat-accent) 10%, transparent);
    cursor: pointer;
    transition: border-color 160ms ease, background 160ms ease, box-shadow 180ms ease, transform 160ms ease;
}

.chat-refresh-button svg[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    width: 21px;
    height: 21px;
    transform-origin: center;
}

.chat-refresh-button:hover:not(:disabled)[b-9mqvj93lui] {
    border-color: color-mix(in srgb, var(--chat-accent) 58%, var(--chat-border));
    background: color-mix(in srgb, var(--chat-surface) 86%, var(--chat-accent) 14%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #ffffff 48%, transparent), inset 0 0 14px color-mix(in srgb, var(--chat-accent) 14%, transparent), 0 8px 18px color-mix(in srgb, var(--chat-accent) 20%, transparent);
    transform: translateY(-1px);
}

.chat-refresh-button:active:not(:disabled)[b-9mqvj93lui] { transform: translateY(0) scale(0.95); }

.chat-refresh-button:focus-visible[b-9mqvj93lui] {
    outline: 3px solid color-mix(in srgb, var(--chat-accent) 28%, transparent);
    outline-offset: 2px;
}

.chat-refresh-button:disabled[b-9mqvj93lui] { cursor: wait; }

.chat-refresh-button.is-loading svg[b-9mqvj93lui] { animation: chat-refresh-spin-b-9mqvj93lui 620ms linear infinite; }

.chat-refresh-button[b-9mqvj93lui]::after,
.chat-refresh-button[b-9mqvj93lui]::before {
    position: absolute;
    inset: -2px;
    border: 1px solid transparent;
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
}

.chat-refresh-button.is-complete[b-9mqvj93lui]::after {
    border-color: color-mix(in srgb, var(--chat-online) 62%, transparent);
    animation: chat-refresh-ripple-b-9mqvj93lui 650ms ease-out both;
}

.chat-refresh-button.has-live-presence[b-9mqvj93lui]::before {
    border-color: color-mix(in srgb, var(--chat-online) 68%, transparent);
    animation: chat-presence-control-pulse-b-9mqvj93lui 650ms ease-out both;
}

.chat-panel.theme-dark .chat-refresh-button[b-9mqvj93lui] {
    background: color-mix(in srgb, var(--chat-surface) 84%, var(--chat-accent) 16%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%), inset 0 0 12px color-mix(in srgb, var(--chat-accent) 15%, transparent), 0 5px 15px rgb(0 0 0 / 22%);
}

@keyframes chat-refresh-spin-b-9mqvj93lui { to { transform: rotate(360deg); } }

@keyframes chat-refresh-ripple-b-9mqvj93lui {
    0% { opacity: 0; transform: scale(0.86); }
    35% { opacity: 0.72; }
    100% { opacity: 0; transform: scale(1.22); }
}

@keyframes chat-presence-control-pulse-b-9mqvj93lui {
    0% { opacity: 0; transform: scale(0.9); }
    32% { opacity: 0.8; }
    100% { opacity: 0; transform: scale(1.18); }
}

.chat-compose-error[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    margin: 0 14px 8px;
    padding: 8px 11px;
    border: 1px solid color-mix(in srgb, #e5484d 45%, transparent);
    border-radius: 10px;
    color: #e5484d;
    background: color-mix(in srgb, #e5484d 10%, transparent);
    font-size: 11px;
    font-weight: 650;
}

/* --- Search ------------------------------------------------- */

.chat-contact-search[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    margin: 12px 14px 6px;
}

.chat-contact-search svg[b-9mqvj93lui] {
    position: absolute;
    left: 12px;
    width: 15px;
    height: 15px;
    color: var(--chat-muted);
    pointer-events: none;
}

.chat-contact-search input[b-9mqvj93lui] {
    width: 100%;
    padding: 10px 12px 10px 34px;
    border: 1px solid var(--chat-border);
    border-radius: 12px;
    color: var(--chat-text);
    background: var(--chat-surface-soft);
    font-family: inherit;
    font-size: 12.5px;
    transition: border-color 140ms ease, box-shadow 160ms ease, background 140ms ease;
}

.chat-contact-search input[b-9mqvj93lui]::placeholder {
    color: var(--chat-muted);
}

.chat-contact-search input:focus[b-9mqvj93lui] {
    outline: none;
    border-color: color-mix(in srgb, var(--chat-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 16%, transparent);
}

/* --- Contact list ------------------------------------------- */

.chat-contact-list[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    padding: 6px 10px 12px;
    scrollbar-width: thin;
}

.chat-contact-section-label[b-9mqvj93lui] {
    padding: 12px 6px 5px;
    color: var(--chat-muted);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.chat-search-progress[b-9mqvj93lui] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 92px;
    color: var(--chat-muted);
    font-size: 11.5px;
}

.chat-search-person[b-9mqvj93lui],
.chat-search-message[b-9mqvj93lui] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: var(--chat-text);
    background: transparent;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
}

.chat-search-person:hover[b-9mqvj93lui],
.chat-search-message:hover[b-9mqvj93lui],
.chat-search-person:focus-visible[b-9mqvj93lui],
.chat-search-message:focus-visible[b-9mqvj93lui] {
    border-color: var(--chat-border);
    background: var(--chat-surface-soft);
    outline: none;
}

.chat-search-message-copy[b-9mqvj93lui] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 3px;
}

.chat-search-message-heading[b-9mqvj93lui] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.chat-search-message-heading strong[b-9mqvj93lui] {
    overflow: hidden;
    color: var(--chat-text);
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-search-message-heading time[b-9mqvj93lui] {
    flex: 0 0 auto;
    color: var(--chat-muted);
    font-size: 9.5px;
    white-space: nowrap;
}

.chat-search-snippet[b-9mqvj93lui] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    overflow: hidden;
    color: var(--chat-muted);
    font-size: 10.8px;
    line-height: 1.35;
}

.chat-search-snippet em[b-9mqvj93lui] {
    flex: 0 0 auto;
    color: var(--chat-accent);
    font-style: normal;
    font-weight: 750;
}

.chat-search-snippet .chat-preview-content[b-9mqvj93lui] {
    display: -webkit-box;
    overflow: hidden;
    min-width: 0;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.chat-search-snippet mark[b-9mqvj93lui],
.chat-bubble mark[b-9mqvj93lui] {
    padding: 0 2px;
    border-radius: 3px;
    color: #10213a;
    background: #ffe38a;
    font-weight: 800;
}

.chat-contact-row[b-9mqvj93lui] {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 62px;
    padding: 10px 11px;
    border: 1px solid transparent;
    border-radius: 14px;
    color: inherit;
    background: transparent;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease, transform 150ms ease;
    animation: chat-row-in-b-9mqvj93lui 260ms ease both;
}

.chat-contact-row.is-login-transition[b-9mqvj93lui] { animation: chat-contact-login-b-9mqvj93lui 780ms ease-out both; }

.chat-contact-row.is-status-transition[b-9mqvj93lui] { animation: chat-contact-status-change-b-9mqvj93lui 620ms ease-out both; }

@keyframes chat-contact-login-b-9mqvj93lui {
    0% { background: color-mix(in srgb, var(--chat-online) 0%, transparent); transform: translateY(2px); }
    38% { background: color-mix(in srgb, var(--chat-online) 12%, transparent); transform: translateY(0); }
    100% { background: transparent; }
}

@keyframes chat-contact-status-change-b-9mqvj93lui {
    0%, 100% { background: transparent; }
    45% { background: color-mix(in srgb, var(--chat-accent) 7%, transparent); }
}

.chat-contact-row:focus[b-9mqvj93lui] {
    outline: none;
}

.chat-contact-row:focus-visible[b-9mqvj93lui] {
    border-color: color-mix(in srgb, var(--chat-accent) 52%, var(--chat-border));
    outline: 3px solid color-mix(in srgb, var(--chat-accent) 30%, transparent);
    outline-offset: 2px;
}

@keyframes chat-row-in-b-9mqvj93lui {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

.chat-contact-row:hover[b-9mqvj93lui] {
    border-color: var(--chat-border);
    background: var(--chat-surface-soft);
    transform: translateX(2px);
}

.chat-contact-row.has-unread[b-9mqvj93lui] {
    border-color: color-mix(in srgb, var(--chat-accent) 22%, transparent);
    background: color-mix(in srgb, var(--chat-accent) 7%, transparent);
}

.chat-contact-row.has-unread strong[b-9mqvj93lui] {
    font-weight: 800;
}

.chat-contact-row.is-selected[b-9mqvj93lui] {
    border-color: var(--chat-selected-border) !important;
    background: var(--chat-selected-background) !important;
}

.chat-contact-row.is-selected.has-unread[b-9mqvj93lui] {
    border-color: var(--chat-selected-unread-border) !important;
    background: var(--chat-selected-unread-background) !important;
}

.chat-contact-row.is-selected .chat-contact-copy strong[b-9mqvj93lui] {
    color: var(--chat-selected-text) !important;
}

.chat-contact-row.is-selected .chat-contact-copy small[b-9mqvj93lui],
.chat-contact-row.is-selected .chat-contact-presence[b-9mqvj93lui] {
    color: var(--chat-selected-muted) !important;
}

.chat-contact-row.is-selected .chat-contact-time[b-9mqvj93lui] {
    color: var(--chat-selected-muted) !important;
}

.chat-panel.theme-dark .chat-contact-row.is-selected[b-9mqvj93lui] {
    border-color: var(--chat-selected-border) !important;
    background: var(--chat-selected-background) !important;
}

.chat-panel.theme-dark .chat-contact-row.is-selected.has-unread[b-9mqvj93lui] {
    border-color: var(--chat-selected-unread-border) !important;
    background: var(--chat-selected-unread-background) !important;
}

.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-copy strong[b-9mqvj93lui] {
    color: #ffffff;
}

.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-copy small[b-9mqvj93lui],
.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-presence[b-9mqvj93lui],
.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-time[b-9mqvj93lui] {
    color: #c5d4e6;
}

.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-presence.is-online[b-9mqvj93lui] {
    color: #8ee6b9;
}

.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-presence.is-brb[b-9mqvj93lui] {
    color: #f3c66d;
}

.chat-panel.theme-dark .chat-contact-row.is-selected .chat-contact-presence.is-dnd[b-9mqvj93lui] {
    color: #ff9ba0;
}

.chat-avatar[b-9mqvj93lui] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-avatar-from, #2158bd) 0%, var(--chat-avatar-to, #58acc0) 100%);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.4px;
    box-shadow: 0 6px 14px rgba(10, 24, 46, 0.16);
}

.chat-avatar > span[b-9mqvj93lui] {
    position: relative;
    z-index: 2;
}

.chat-avatar > .chat-avatar-atmosphere[b-9mqvj93lui] {
    display: none;
}

.chat-avatar-lg[b-9mqvj93lui] {
    width: 46px;
    height: 46px;
    flex: 0 0 46px;
    font-size: 14px;
}

.chat-avatar.is-online[b-9mqvj93lui]::after,
.chat-avatar.is-brb[b-9mqvj93lui]::after,
.chat-avatar.is-dnd[b-9mqvj93lui]::after {
    content: "";
    position: absolute;
    right: -2px;
    bottom: 0;
    z-index: 4;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--chat-surface);
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.chat-avatar.is-online[b-9mqvj93lui]::after {
    --chat-status-pulse: var(--chat-online);
    background: var(--chat-online);
    animation: chat-online-pulse-b-9mqvj93lui 2.6s ease-in-out infinite;
}

.chat-avatar.is-brb[b-9mqvj93lui]::after {
    --chat-status-pulse: var(--chat-brb);
    background: var(--chat-brb);
}

.chat-avatar.is-dnd[b-9mqvj93lui]::after {
    --chat-status-pulse: var(--chat-dnd);
    background: var(--chat-dnd);
}

.chat-avatar.is-login-transition[b-9mqvj93lui]::after,
.chat-avatar.is-status-transition[b-9mqvj93lui]::after {
    animation: chat-status-dot-pulse-b-9mqvj93lui 720ms ease-out both;
}

@keyframes chat-online-pulse-b-9mqvj93lui {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--chat-online) 55%, transparent);
    }

    60% {
        box-shadow: 0 0 0 5px color-mix(in srgb, var(--chat-online) 0%, transparent);
    }
}

@keyframes chat-status-dot-pulse-b-9mqvj93lui {
    0%, 100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, var(--chat-status-pulse, var(--chat-online)) 55%, transparent);
        transform: scale(1);
    }

    45% {
        box-shadow: 0 0 0 6px color-mix(in srgb, var(--chat-status-pulse, var(--chat-online)) 0%, transparent);
        transform: scale(1.16);
    }
}

.chat-avatar.role-super-admin[b-9mqvj93lui]::before,
.chat-avatar.role-admin[b-9mqvj93lui]::before {
    position: absolute;
    z-index: 1;
    inset: -3px;
    border-radius: inherit;
    content: "";
    pointer-events: none;
}

.chat-avatar.role-super-admin[b-9mqvj93lui]::before {
    padding: 2px;
    background: conic-gradient(
        from 15deg,
        #05070c 0deg,
        #111623 205deg,
        #2b2950 275deg,
        #665bd8 306deg,
        #5aa8cf 320deg,
        #151b2b 338deg,
        #05070c 360deg);
    box-shadow: 0 0 10px rgb(48 55 102 / 42%), 0 0 16px rgb(79 91 166 / 18%);
    animation: chat-super-admin-blacklight-ring-b-9mqvj93lui 10s linear infinite;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.chat-avatar.role-super-admin[b-9mqvj93lui] {
    overflow: visible;
    background: linear-gradient(145deg, #111827 0%, #080b12 52%, #12172a 100%);
    box-shadow: 0 7px 17px rgb(3 7 16 / 42%), inset 0 0 12px rgb(73 83 151 / 18%);
}

.chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui] {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(circle at 22% 72%, rgb(77 69 158 / 42%) 0 13%, transparent 38%),
        radial-gradient(circle at 76% 28%, rgb(54 125 171 / 32%) 0 11%, transparent 36%),
        linear-gradient(155deg, #111827 0%, #070a11 58%, #151a2c 100%);
    isolation: isolate;
}

.chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::before,
.chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::after {
    position: absolute;
    inset: -18%;
    border-radius: 44% 56% 48% 52%;
    content: "";
    opacity: 0.52;
    pointer-events: none;
}

.chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::before {
    background:
        radial-gradient(ellipse at 30% 58%, rgb(104 91 194 / 54%) 0 14%, transparent 44%),
        radial-gradient(ellipse at 72% 36%, rgb(42 112 158 / 46%) 0 12%, transparent 42%);
    filter: blur(3px);
    animation: chat-super-admin-smoke-front-b-9mqvj93lui 8.5s ease-in-out infinite alternate;
}

.chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::after {
    background:
        radial-gradient(ellipse at 64% 68%, rgb(70 64 139 / 48%) 0 13%, transparent 43%),
        radial-gradient(ellipse at 34% 24%, rgb(45 92 135 / 38%) 0 11%, transparent 39%);
    filter: blur(4px);
    animation: chat-super-admin-smoke-back-b-9mqvj93lui 11s ease-in-out infinite alternate;
}

.chat-avatar.role-super-admin > .chat-avatar-initials[b-9mqvj93lui] {
    z-index: 3;
    color: #ffffff;
    text-shadow: 0 1px 3px #03050a, 0 0 5px rgb(146 153 230 / 48%);
}

.chat-avatar.role-admin[b-9mqvj93lui]::before {
    inset: -2px;
    border: 1.5px solid #566b8d;
    background: linear-gradient(135deg, transparent 30%, rgb(115 151 190 / 34%) 48%, transparent 66%);
    box-shadow: 0 0 7px rgb(67 94 132 / 22%);
    animation: chat-admin-metal-ring-b-9mqvj93lui 13s ease-in-out infinite;
}

.chat-avatar.is-login-transition[b-9mqvj93lui] { animation: chat-avatar-login-b-9mqvj93lui 760ms ease-out both; }

@keyframes chat-super-admin-blacklight-ring-b-9mqvj93lui { to { transform: rotate(360deg); } }

@keyframes chat-super-admin-smoke-front-b-9mqvj93lui {
    0% { opacity: 0.38; transform: translate3d(-7%, 5%, 0) scale(0.94); }
    48% { opacity: 0.62; transform: translate3d(5%, -4%, 0) scale(1.08); }
    100% { opacity: 0.44; transform: translate3d(9%, 7%, 0) scale(1); }
}

@keyframes chat-super-admin-smoke-back-b-9mqvj93lui {
    0% { opacity: 0.3; transform: translate3d(8%, -6%, 0) scale(1.06); }
    52% { opacity: 0.5; transform: translate3d(-5%, 6%, 0) scale(0.96); }
    100% { opacity: 0.36; transform: translate3d(-9%, -2%, 0) scale(1.1); }
}

@keyframes chat-admin-metal-ring-b-9mqvj93lui {
    0%, 100% { opacity: 0.58; transform: rotate(-12deg); }
    50% { opacity: 0.82; transform: rotate(168deg); }
}

@keyframes chat-avatar-login-b-9mqvj93lui {
    0%, 100% { box-shadow: 0 6px 14px rgba(10, 24, 46, 0.16); }
    42% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--chat-online) 15%, transparent), 0 8px 20px color-mix(in srgb, var(--chat-online) 38%, transparent); }
}

.chat-contact-copy[b-9mqvj93lui] {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.chat-contact-copy strong[b-9mqvj93lui] {
    overflow: hidden;
    color: var(--chat-text);
    font-size: 13.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact-copy small[b-9mqvj93lui] {
    overflow: hidden;
    color: var(--chat-muted);
    font-size: 11.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact-copy small em[b-9mqvj93lui] {
    color: color-mix(in srgb, var(--chat-accent) 78%, var(--chat-muted));
    font-style: normal;
    font-weight: 700;
}

.chat-contact-presence[b-9mqvj93lui] {
    overflow: hidden;
    margin-top: 1px;
    color: color-mix(in srgb, var(--chat-muted) 88%, transparent);
    font-size: 10.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact-presence.is-online[b-9mqvj93lui] {
    color: var(--chat-online);
    font-weight: 700;
}

.chat-contact-presence.is-brb[b-9mqvj93lui] {
    color: var(--chat-brb);
    font-weight: 700;
}

.chat-contact-preview[b-9mqvj93lui] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.chat-preview-prefix[b-9mqvj93lui] {
    flex: 0 0 auto;
    font-size: 10.8px;
    font-weight: 650 !important;
}

.chat-contact-preview .chat-preview-content[b-9mqvj93lui] {
    overflow: hidden;
    min-width: 0;
    color: color-mix(in srgb, var(--chat-text) 72%, var(--chat-muted));
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-contact-presence.is-dnd[b-9mqvj93lui] {
    color: var(--chat-dnd);
    font-weight: 700;
}

.chat-contact-meta[b-9mqvj93lui] {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    padding-left: 4px;
}

.chat-contact-time[b-9mqvj93lui] {
    color: var(--chat-muted);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.chat-contact-start[b-9mqvj93lui] {
    padding: 3px 9px;
    border: 1px dashed var(--chat-border);
    border-radius: 999px;
    color: var(--chat-muted);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease;
}

.chat-contact-row:hover .chat-contact-start[b-9mqvj93lui] {
    opacity: 1;
}

.chat-contact-unread[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-mine-from), var(--chat-accent-2));
    font-size: 10.5px;
    font-weight: 800;
    box-shadow: 0 5px 12px color-mix(in srgb, var(--chat-accent) 32%, transparent);
}

.chat-contact-unread.is-increased[b-9mqvj93lui] {
    animation: chat-unread-increase-b-9mqvj93lui 620ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

@keyframes chat-unread-increase-b-9mqvj93lui {
    0%, 100% { transform: scale(1); }
    42% { transform: scale(1.18); }
}

/* --- Loading skeletons -------------------------------------- */

.chat-skeleton-list[b-9mqvj93lui] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 2px;
}

.chat-skeleton-row[b-9mqvj93lui] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 8px 9px;
}

.chat-skeleton-avatar[b-9mqvj93lui],
.chat-skeleton-lines span[b-9mqvj93lui] {
    display: block;
    background:
        linear-gradient(90deg,
            var(--chat-surface-soft) 0%,
            color-mix(in srgb, var(--chat-accent) 10%, var(--chat-surface-soft)) 50%,
            var(--chat-surface-soft) 100%);
    background-size: 220% 100%;
    animation: chat-shimmer-b-9mqvj93lui 1.5s linear infinite;
}

.chat-skeleton-avatar[b-9mqvj93lui] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 50%;
}

.chat-skeleton-lines[b-9mqvj93lui] {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 6px;
}

.chat-skeleton-lines span:first-child[b-9mqvj93lui] {
    width: 55%;
    height: 9px;
    border-radius: 999px;
}

.chat-skeleton-lines span:last-child[b-9mqvj93lui] {
    width: 80%;
    height: 8px;
    border-radius: 999px;
    opacity: 0.7;
}

@keyframes chat-shimmer-b-9mqvj93lui {
    from { background-position: 120% 0; }
    to { background-position: -20% 0; }
}

/* --- Thread ------------------------------------------------- */

.chat-thread-header[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 11px 16px;
    border-bottom: 1px solid var(--chat-hairline);
    background: color-mix(in srgb, var(--chat-surface-soft) 70%, transparent);
    animation: chat-row-in-b-9mqvj93lui 240ms ease both;
}

.chat-thread-back[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid var(--chat-border);
    border-radius: 11px;
    color: var(--chat-accent);
    background: var(--chat-surface);
    cursor: pointer;
    transition: background 150ms ease, transform 180ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 150ms ease;
}

.chat-thread-back svg[b-9mqvj93lui] {
    width: 17px;
    height: 17px;
    transition: transform 180ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.chat-thread-back:hover[b-9mqvj93lui] {
    background: color-mix(in srgb, var(--chat-accent) 14%, transparent);
    box-shadow: 0 8px 16px color-mix(in srgb, var(--chat-accent) 20%, transparent);
    transform: translateX(-2px);
}

.chat-thread-back:hover svg[b-9mqvj93lui] {
    transform: translateX(-2px);
}

.chat-thread-back:active[b-9mqvj93lui] {
    transform: scale(0.94);
}

.chat-thread-header-copy[b-9mqvj93lui] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.chat-thread-header-copy strong[b-9mqvj93lui] {
    color: var(--chat-text);
    font-size: 13.5px;
    font-weight: 750;
}

.chat-thread-header-copy span[b-9mqvj93lui] {
    color: var(--chat-muted);
    font-size: 10.5px;
}

.chat-thread-header-copy span.is-online[b-9mqvj93lui] {
    color: var(--chat-online);
    font-weight: 700;
}

.chat-thread-header-copy span.is-brb[b-9mqvj93lui] {
    color: var(--chat-brb);
    font-weight: 700;
}

.chat-thread-header-copy span.is-dnd[b-9mqvj93lui] {
    color: var(--chat-dnd);
    font-weight: 700;
}

.chat-thread[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    padding: 16px 14px 10px;
    scroll-behavior: smooth;
    scrollbar-width: thin;
}

.chat-day-divider[b-9mqvj93lui] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px 0 6px;
}

.chat-day-divider span[b-9mqvj93lui] {
    padding: 4px 12px;
    border: 1px solid var(--chat-hairline);
    border-radius: 999px;
    color: var(--chat-muted);
    background: var(--chat-surface-soft);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.chat-bubble-row[b-9mqvj93lui] {
    display: flex;
    animation: chat-bubble-in-b-9mqvj93lui 260ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

.chat-bubble-row.mine[b-9mqvj93lui] {
    justify-content: flex-end;
}

.chat-bubble-row.theirs[b-9mqvj93lui] {
    justify-content: flex-start;
}

.chat-bubble-row.is-search-target .chat-bubble[b-9mqvj93lui] {
    animation: chat-search-target-b-9mqvj93lui 2.6s ease both;
}

@keyframes chat-search-target-b-9mqvj93lui {
    0%, 72% {
        outline: 3px solid #ffd75e;
        outline-offset: 3px;
        box-shadow: 0 0 0 7px rgba(255, 215, 94, 0.22), 0 12px 26px rgba(8, 28, 58, 0.22);
    }

    100% {
        outline-color: transparent;
        outline-offset: 6px;
    }
}

@keyframes chat-bubble-in-b-9mqvj93lui {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

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

.chat-bubble[b-9mqvj93lui] {
    position: relative;
    max-width: 80%;
    padding: 9px 13px 7px;
    border-radius: 16px;
    font-size: 12.8px;
    line-height: 1.45;
}

.chat-bubble-row.mine .chat-bubble[b-9mqvj93lui] {
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-mine-from) 0%, var(--chat-mine-to) 100%);
    border-bottom-right-radius: 6px;
    box-shadow: 0 8px 18px color-mix(in srgb, var(--chat-accent) 26%, transparent);
}

.chat-bubble-row.theirs .chat-bubble[b-9mqvj93lui] {
    color: var(--chat-text);
    border: 1px solid var(--chat-hairline);
    background: var(--chat-theirs);
    border-bottom-left-radius: 6px;
}

.chat-bubble p[b-9mqvj93lui] {
    margin: 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.chat-bubble small[b-9mqvj93lui] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    margin-top: 3px;
    font-size: 9.5px;
    opacity: 0.8;
}

.chat-read-tick[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    opacity: 0.75;
    transition: opacity 160ms ease, color 220ms ease;
}

.chat-read-tick svg[b-9mqvj93lui] {
    width: 15px;
    height: 10px;
}

.chat-read-tick .chat-read-tick-second[b-9mqvj93lui] {
    opacity: 0;
    transition: opacity 220ms ease;
}

.chat-read-tick.read[b-9mqvj93lui] {
    color: #b8f0ff;
    opacity: 1;
}

.chat-read-tick.read .chat-read-tick-second[b-9mqvj93lui] {
    opacity: 1;
    animation: chat-tick-in-b-9mqvj93lui 300ms ease both;
}

@keyframes chat-tick-in-b-9mqvj93lui {
    from {
        opacity: 0;
        transform: translateX(-3px);
    }

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

/* --- Typing indicator --------------------------------------- */

.chat-typing-row[b-9mqvj93lui] {
    animation: chat-bubble-in-b-9mqvj93lui 200ms ease both;
}

.chat-typing-bubble[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 13px;
}

.chat-typing-label[b-9mqvj93lui] {
    color: var(--chat-muted);
    font-size: 10.5px;
    font-style: italic;
}

.chat-typing-dots[b-9mqvj93lui],
.chat-loading-dots[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.chat-typing-dots i[b-9mqvj93lui],
.chat-loading-dots i[b-9mqvj93lui] {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--chat-accent);
    animation: chat-typing-bounce-b-9mqvj93lui 1.25s ease-in-out infinite;
}

.chat-typing-dots i:nth-child(2)[b-9mqvj93lui],
.chat-loading-dots i:nth-child(2)[b-9mqvj93lui] {
    animation-delay: 0.16s;
}

.chat-typing-dots i:nth-child(3)[b-9mqvj93lui],
.chat-loading-dots i:nth-child(3)[b-9mqvj93lui] {
    animation-delay: 0.32s;
}

@keyframes chat-typing-bounce-b-9mqvj93lui {
    0%, 60%, 100% {
        opacity: 0.35;
        transform: translateY(0);
    }

    30% {
        opacity: 1;
        transform: translateY(-3.5px);
    }
}

/* --- Empty states ------------------------------------------- */

.chat-empty-state[b-9mqvj93lui] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 34px 20px;
    color: var(--chat-muted);
    font-size: 12.5px;
    text-align: center;
}

.chat-empty-thread[b-9mqvj93lui] {
    margin: auto 0;
}

.chat-empty-thread strong[b-9mqvj93lui] {
    color: var(--chat-text);
    font-size: 13.5px;
}

.chat-empty-mark[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--chat-accent);
    background: color-mix(in srgb, var(--chat-accent) 10%, transparent);
    font-size: 17px;
    animation: chat-empty-breathe-b-9mqvj93lui 3.4s ease-in-out infinite;
}

@keyframes chat-empty-breathe-b-9mqvj93lui {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50% { transform: scale(1.06); opacity: 1; }
}

/* --- Emoji picker ------------------------------------------- */

.chat-emoji-popover[b-9mqvj93lui] {
    position: relative;
    z-index: 2;
    margin: 0 14px 6px;
    padding: 10px;
    border: 1px solid var(--chat-border);
    border-radius: 16px;
    background: var(--chat-surface-soft);
    box-shadow: 0 18px 40px rgba(10, 24, 46, 0.18);
    animation: chat-emoji-in-b-9mqvj93lui 180ms cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes chat-emoji-in-b-9mqvj93lui {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.97);
    }

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

.chat-emoji-grid[b-9mqvj93lui] {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    max-height: 168px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.chat-emoji-button[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    transition: background 120ms ease, transform 120ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.chat-emoji-button:hover[b-9mqvj93lui] {
    background: color-mix(in srgb, var(--chat-accent) 14%, transparent);
    transform: scale(1.22);
}

/* --- Composer ----------------------------------------------- */

.chat-compose[b-9mqvj93lui] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--chat-hairline);
    background: color-mix(in srgb, var(--chat-surface-soft) 55%, transparent);
}

.chat-compose.emoji-open[b-9mqvj93lui] {
    border-top-color: transparent;
}

.chat-emoji-toggle[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border: 1px solid var(--chat-border);
    border-radius: 12px;
    color: var(--chat-muted);
    background: var(--chat-surface);
    cursor: pointer;
    transition: color 150ms ease, border-color 150ms ease, background 150ms ease, transform 200ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.chat-emoji-toggle svg[b-9mqvj93lui] {
    width: 19px;
    height: 19px;
}

.chat-emoji-toggle:hover[b-9mqvj93lui],
.chat-emoji-toggle.is-open[b-9mqvj93lui] {
    color: #e6a531;
    border-color: rgba(230, 165, 49, 0.45);
    background: rgba(230, 165, 49, 0.12);
    transform: scale(1.05);
}

.chat-emoji-toggle:hover .chat-emoji-eye[b-9mqvj93lui] {
    animation: chat-emoji-blink-b-9mqvj93lui 1.4s ease-in-out infinite;
}

@keyframes chat-emoji-blink-b-9mqvj93lui {
    0%, 42%, 52%, 100% { transform: scaleY(1); }
    47% { transform: scaleY(0.15); }
}

.chat-emoji-eye[b-9mqvj93lui] {
    transform-box: fill-box;
    transform-origin: center;
}

.chat-compose-input[b-9mqvj93lui] {
    flex: 1;
    min-width: 0;
    padding: 10px 15px;
    border: 1px solid var(--chat-border);
    border-radius: 999px;
    color: var(--chat-text);
    background: var(--chat-surface);
    font-family: inherit;
    font-size: 12.8px;
    transition: border-color 140ms ease, box-shadow 160ms ease;
}

.chat-compose-input[b-9mqvj93lui]::placeholder {
    color: var(--chat-muted);
}

.chat-compose-input:focus[b-9mqvj93lui] {
    outline: none;
    border-color: color-mix(in srgb, var(--chat-accent) 55%, transparent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--chat-accent) 16%, transparent);
}

.chat-compose-send[b-9mqvj93lui] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
    border: 0;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--chat-mine-from) 0%, var(--chat-accent-2) 100%);
    cursor: pointer;
    box-shadow: 0 10px 20px color-mix(in srgb, var(--chat-accent) 30%, transparent);
    transition: transform 160ms cubic-bezier(0.2, 0.8, 0.25, 1), box-shadow 160ms ease, opacity 140ms ease;
}

.chat-compose-send svg[b-9mqvj93lui] {
    width: 17px;
    height: 17px;
    transition: transform 200ms cubic-bezier(0.2, 0.8, 0.25, 1);
}

.chat-compose-send:hover:not(:disabled)[b-9mqvj93lui] {
    transform: translateY(-2px);
    box-shadow: 0 14px 26px color-mix(in srgb, var(--chat-accent) 38%, transparent);
}

.chat-compose-send:hover:not(:disabled) svg[b-9mqvj93lui] {
    transform: translate(2px, -2px) rotate(6deg);
}

.chat-compose-send:active:not(:disabled)[b-9mqvj93lui] {
    transform: translateY(0) scale(0.94);
}

.chat-compose-send:disabled[b-9mqvj93lui] {
    opacity: 0.4;
    cursor: default;
    box-shadow: none;
}

.chat-compose-send.is-sending svg[b-9mqvj93lui] {
    animation: chat-send-fly-b-9mqvj93lui 600ms ease-in;
}

@keyframes chat-send-fly-b-9mqvj93lui {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    60% { transform: translate(14px, -14px) scale(0.7); opacity: 0; }
    61% { transform: translate(-10px, 10px) scale(0.7); opacity: 0; }
    100% { transform: translate(0, 0) scale(1); opacity: 1; }
}

/* --- Scrollbars --------------------------------------------- */

.chat-contact-list[b-9mqvj93lui]::-webkit-scrollbar,
.chat-thread[b-9mqvj93lui]::-webkit-scrollbar,
.chat-emoji-grid[b-9mqvj93lui]::-webkit-scrollbar {
    width: 8px;
}

.chat-contact-list[b-9mqvj93lui]::-webkit-scrollbar-thumb,
.chat-thread[b-9mqvj93lui]::-webkit-scrollbar-thumb,
.chat-emoji-grid[b-9mqvj93lui]::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: color-mix(in srgb, var(--chat-muted) 34%, transparent);
    background-clip: content-box;
}

.chat-contact-list[b-9mqvj93lui]::-webkit-scrollbar-thumb:hover,
.chat-thread[b-9mqvj93lui]::-webkit-scrollbar-thumb:hover,
.chat-emoji-grid[b-9mqvj93lui]::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--chat-muted) 58%, transparent);
    background-clip: content-box;
}

/* --- Responsive & motion ------------------------------------ */

@media (max-width: 600px) {
    .chat-panel[b-9mqvj93lui] {
        top: 0;
        right: 0;
        bottom: 0;
        width: 100vw;
        border-radius: 0;
        border: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chat-overlay[b-9mqvj93lui],
    .chat-panel[b-9mqvj93lui],
    .chat-panel-glow[b-9mqvj93lui],
    .chat-contact-row[b-9mqvj93lui],
    .chat-bubble-row[b-9mqvj93lui],
    .chat-thread-header[b-9mqvj93lui],
    .chat-emoji-popover[b-9mqvj93lui],
    .chat-avatar.is-online[b-9mqvj93lui]::after,
    .chat-avatar.is-login-transition[b-9mqvj93lui],
    .chat-avatar.is-login-transition[b-9mqvj93lui]::after,
    .chat-avatar.is-status-transition[b-9mqvj93lui]::after,
    .chat-avatar.role-super-admin[b-9mqvj93lui],
    .chat-avatar.role-super-admin[b-9mqvj93lui]::before,
    .chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::before,
    .chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::after,
    .chat-avatar.role-admin[b-9mqvj93lui]::before,
    .chat-contact-unread.is-increased[b-9mqvj93lui],
    .chat-refresh-button.is-loading svg[b-9mqvj93lui],
    .chat-refresh-button.is-complete[b-9mqvj93lui]::after,
    .chat-refresh-button.has-live-presence[b-9mqvj93lui]::before,
    .chat-empty-mark[b-9mqvj93lui],
    .chat-skeleton-avatar[b-9mqvj93lui],
    .chat-skeleton-lines span[b-9mqvj93lui],
    .chat-typing-dots i[b-9mqvj93lui],
    .chat-loading-dots i[b-9mqvj93lui],
    .chat-compose-send.is-sending svg[b-9mqvj93lui] {
        animation: none !important;
    }

    .chat-avatar.role-super-admin[b-9mqvj93lui]::before {
        border: 2px solid #4e557a;
        background: transparent;
        box-shadow: 0 0 7px rgb(63 72 125 / 28%);
        -webkit-mask: none;
        mask: none;
        opacity: 1;
    }

    .chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::before,
    .chat-avatar.role-super-admin > .chat-avatar-atmosphere[b-9mqvj93lui]::after {
        opacity: 0.34;
        transform: none;
    }

    .chat-avatar.role-admin[b-9mqvj93lui]::before {
        opacity: 0.78;
    }

    .chat-thread[b-9mqvj93lui] {
        scroll-behavior: auto;
    }
}
/* /Components/Shared/ExternalAccessSummary.razor.rz.scp.css */
.external-access-summary[b-014a41iq94] {
    min-width: 0;
    border: 1px solid var(--ua-border, var(--border-color));
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 12px 28px color-mix(in srgb, var(--shadow-color) 72%, transparent);
}

.card-heading[b-014a41iq94] {
    display: flex;
    min-height: 66px;
    align-items: center;
    gap: 11px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ua-border, var(--border-color));
}

.card-heading > span:last-child[b-014a41iq94] { display: flex; flex-direction: column; }
.card-heading strong[b-014a41iq94] { font-size: 13px; font-weight: 900; }
.card-heading small[b-014a41iq94] { color: var(--secondary-text); font-size: 11px; }
.card-icon[b-014a41iq94] { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #1674e8; background: color-mix(in srgb, #1674e8 11%, var(--panel-background)); }
.external-access-body[b-014a41iq94] { padding: 16px; }
.external-access-body > strong[b-014a41iq94] { color: #1674e8; }
.external-access-body p[b-014a41iq94], .external-access-body li[b-014a41iq94] { color: var(--secondary-text); font-size: 11px; line-height: 1.55; }
/* /Components/Shared/ExternalAgencyPermissionSummary.razor.rz.scp.css */
.external-access-summary[b-9kgpy5ef7j] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid color-mix(in srgb, #1769dc 34%, var(--border-color) 66%);
    border-radius: 9px;
    color: var(--primary-text);
    background: linear-gradient(135deg, color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%), var(--panel-background));
}

.external-access-heading[b-9kgpy5ef7j] {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
}

.external-access-icon[b-9kgpy5ef7j] {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 10px;
    color: #ffffff;
    background: linear-gradient(135deg, #1769dc, #2f9fd5);
    font-size: 10px;
    font-weight: 950;
}

.external-access-heading div[b-9kgpy5ef7j],
.external-access-grid div div[b-9kgpy5ef7j] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.external-access-heading strong[b-9kgpy5ef7j],
.external-access-grid strong[b-9kgpy5ef7j] {
    font-size: 12px;
    font-weight: 900;
}

.external-access-heading span:not(.external-access-icon):not(.external-access-lock)[b-9kgpy5ef7j],
.external-access-grid small[b-9kgpy5ef7j] {
    color: var(--secondary-text);
    font-size: 10px;
    line-height: 1.35;
}

.external-access-lock[b-9kgpy5ef7j] {
    padding: 5px 9px;
    border: 1px solid color-mix(in srgb, #1769dc 34%, var(--border-color) 66%);
    border-radius: 999px;
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%);
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
}

.external-access-grid[b-9kgpy5ef7j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.external-access-grid > div[b-9kgpy5ef7j] {
    display: grid;
    grid-template-columns: 23px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-background) 94%, #1769dc 6%);
}

.external-access-grid > div > span[b-9kgpy5ef7j] {
    display: grid;
    width: 23px;
    height: 23px;
    place-items: center;
    border-radius: 50%;
    font-weight: 950;
}

.external-access-grid .allowed > span[b-9kgpy5ef7j] {
    color: #087854;
    background: #dff7ed;
}

.external-access-grid .blocked > span[b-9kgpy5ef7j] {
    color: #b12f41;
    background: #fde7ea;
}

@media (max-width: 760px) {
    .external-access-grid[b-9kgpy5ef7j] {
        grid-template-columns: 1fr;
    }
}
/* /Components/Shared/FeedbackDialog.razor.rz.scp.css */
/* === Report a Problem dialog === */

/* Keep the dialog above the topbar (2000) and below critical system overlays (5000). */

.feedback-overlay[b-zhpd0a26km] {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(10, 24, 46, 0.32);
    backdrop-filter: blur(2px);
}

.feedback-dialog[b-zhpd0a26km] {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 4010;
    display: flex;
    flex-direction: column;
    width: min(520px, 94vw);
    max-height: 88vh;
    transform: translate(-50%, -50%);
    border-radius: 16px;
    background: var(--panel-background, #ffffff);
    box-shadow: 0 26px 70px rgba(10, 24, 46, 0.32);
    overflow: hidden;
}

.feedback-dialog-header[b-zhpd0a26km] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(23, 105, 220, 0.13);
    background: linear-gradient(135deg, rgba(23, 105, 220, 0.07) 0%, rgba(88, 172, 192, 0.08) 100%);
}

.feedback-dialog-header strong[b-zhpd0a26km] {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: var(--primary-text);
}

.feedback-dialog-header span[b-zhpd0a26km] {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--secondary-text);
}

.feedback-close-button[b-zhpd0a26km] {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border: 0;
    border-radius: 8px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.feedback-close-button:hover[b-zhpd0a26km] {
    color: var(--primary-text);
    background: rgba(23, 105, 220, 0.1);
}

.feedback-dialog-body[b-zhpd0a26km] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 18px;
    overflow-y: auto;
}

.feedback-field[b-zhpd0a26km] {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.feedback-field > span[b-zhpd0a26km] {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
    color: var(--secondary-text);
    text-transform: uppercase;
}

.feedback-category-row[b-zhpd0a26km] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.feedback-category-chip[b-zhpd0a26km] {
    padding: 7px 14px;
    border: 1px solid rgba(23, 105, 220, 0.24);
    border-radius: 999px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease, box-shadow 130ms ease;
}

.feedback-category-chip:hover[b-zhpd0a26km] {
    background: rgba(23, 105, 220, 0.08);
}

.feedback-category-chip.active[b-zhpd0a26km] {
    color: #ffffff;
    border-color: transparent;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    box-shadow: 0 6px 16px rgba(23, 105, 220, 0.28);
}

.feedback-field textarea[b-zhpd0a26km] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(23, 105, 220, 0.22);
    border-radius: 10px;
    background: var(--panel-background, #ffffff);
    color: var(--primary-text);
    font-size: 12.5px;
    font-family: inherit;
    line-height: 1.45;
    resize: vertical;
}

.feedback-field textarea:focus[b-zhpd0a26km] {
    outline: 2px solid rgba(23, 105, 220, 0.35);
    outline-offset: 1px;
}

.feedback-field small[b-zhpd0a26km] {
    align-self: flex-end;
    font-size: 10px;
    color: var(--secondary-text);
}

.feedback-attachments[b-zhpd0a26km] {
    display: grid;
    gap: 9px;
}

.feedback-attachments-heading[b-zhpd0a26km] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.feedback-attachments-heading > div[b-zhpd0a26km] {
    display: grid;
    gap: 2px;
}

.feedback-attachments-heading span[b-zhpd0a26km] {
    color: var(--secondary-text);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.feedback-attachments-heading small[b-zhpd0a26km] {
    color: var(--secondary-text);
    font-size: 10.5px;
    line-height: 1.35;
}

.feedback-attachments-heading > strong[b-zhpd0a26km] {
    flex: 0 0 auto;
    padding: 3px 8px;
    border-radius: 999px;
    color: #1769dc;
    background: rgba(23, 105, 220, .09);
    font-size: 10px;
    font-weight: 850;
}

.feedback-drop-zone[b-zhpd0a26km] {
    position: relative;
    display: flex;
    min-height: 74px;
    align-items: center;
    justify-content: center;
    gap: 10px;
    overflow: hidden;
    border: 1px dashed rgba(23, 105, 220, .42);
    border-radius: 12px;
    color: var(--secondary-text);
    background:
        linear-gradient(135deg, rgba(23, 105, 220, .055), rgba(88, 172, 192, .07)),
        var(--panel-background, #ffffff);
    text-align: left;
    transition: border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.feedback-drop-zone:hover[b-zhpd0a26km],
.feedback-drop-zone:focus-within[b-zhpd0a26km] {
    border-color: rgba(23, 105, 220, .72);
    box-shadow: 0 0 0 3px rgba(23, 105, 220, .10);
}

.feedback-drop-zone.processing[b-zhpd0a26km] {
    opacity: .72;
}

.feedback-file-input[b-zhpd0a26km] {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.feedback-file-input:disabled[b-zhpd0a26km] {
    cursor: wait;
}

.feedback-drop-icon[b-zhpd0a26km] {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    color: #1769dc;
    background: rgba(23, 105, 220, .11);
    font-size: 17px;
}

.feedback-drop-zone > div[b-zhpd0a26km] {
    display: grid;
    gap: 2px;
}

.feedback-drop-zone > div strong[b-zhpd0a26km] {
    color: var(--primary-text);
    font-size: 11.5px;
}

.feedback-drop-zone > div span[b-zhpd0a26km] {
    font-size: 10.5px;
}

.feedback-attachment-list[b-zhpd0a26km] {
    display: grid;
    gap: 7px;
}

.feedback-attachment-card[b-zhpd0a26km] {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 6px;
    border: 1px solid rgba(23, 105, 220, .14);
    border-radius: 10px;
    background: color-mix(in srgb, var(--panel-background, #ffffff) 94%, #1769dc 6%);
}

.feedback-attachment-card img[b-zhpd0a26km] {
    display: block;
    width: 52px;
    height: 42px;
    border-radius: 7px;
    background: rgba(10, 24, 46, .08);
    object-fit: cover;
}

.feedback-attachment-card > div[b-zhpd0a26km] {
    display: grid;
    min-width: 0;
    gap: 3px;
}

.feedback-attachment-card > div strong[b-zhpd0a26km] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.feedback-attachment-card > div span[b-zhpd0a26km] {
    color: var(--secondary-text);
    font-size: 10px;
}

.feedback-attachment-card button[b-zhpd0a26km] {
    position: relative;
    z-index: 3;
    padding: 6px 8px;
    border: 1px solid rgba(216, 76, 95, .28);
    border-radius: 8px;
    color: #b13b4d;
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
}

.feedback-attachment-card button:hover:not(:disabled)[b-zhpd0a26km] {
    color: #ffffff;
    background: #c13c50;
}

.feedback-attachment-card button:disabled[b-zhpd0a26km] {
    opacity: .5;
    cursor: default;
}

.feedback-attachment-total[b-zhpd0a26km] {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
    color: var(--secondary-text);
    font-size: 10px;
}

.feedback-attachment-total strong[b-zhpd0a26km] {
    color: var(--primary-text);
}

.feedback-attachment-errors[b-zhpd0a26km] {
    display: grid;
    gap: 3px;
    padding: 8px 10px;
    border-radius: 9px;
    color: #9c2f18;
    background: rgba(226, 84, 59, .10);
    font-size: 10.5px;
}

.feedback-attachment-errors p[b-zhpd0a26km] {
    margin: 0;
}

.feedback-page-note[b-zhpd0a26km] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 9px;
    background: rgba(23, 105, 220, 0.06);
    font-size: 11px;
    color: var(--secondary-text);
}

.feedback-page-note code[b-zhpd0a26km] {
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(23, 105, 220, 0.1);
    color: var(--primary-text);
    font-size: 10.5px;
}

.feedback-error[b-zhpd0a26km] {
    padding: 9px 12px;
    border-radius: 9px;
    color: #9c2f18;
    background: rgba(226, 84, 59, 0.1);
    font-size: 12px;
    font-weight: 600;
}

.feedback-dialog-footer[b-zhpd0a26km] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    padding: 14px 18px;
    border-top: 1px solid rgba(23, 105, 220, 0.12);
}

.feedback-primary-button[b-zhpd0a26km] {
    padding: 9px 18px;
    border: 0;
    border-radius: 9px;
    color: #ffffff;
    background: linear-gradient(135deg, #2158bd 0%, #1769dc 58%, #58acc0 100%);
    font-size: 12.5px;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.28);
    transition: transform 130ms ease, box-shadow 130ms ease, opacity 130ms ease;
}

.feedback-primary-button:hover:not(:disabled)[b-zhpd0a26km] {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(23, 105, 220, 0.34);
}

.feedback-primary-button:disabled[b-zhpd0a26km] {
    opacity: 0.5;
    cursor: default;
    box-shadow: none;
}

.feedback-secondary-button[b-zhpd0a26km] {
    padding: 9px 16px;
    border: 1px solid rgba(23, 105, 220, 0.24);
    border-radius: 9px;
    color: var(--secondary-text);
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 130ms ease, color 130ms ease;
}

.feedback-secondary-button:hover[b-zhpd0a26km] {
    color: var(--primary-text);
    background: rgba(23, 105, 220, 0.08);
}

.feedback-success[b-zhpd0a26km] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 24px;
    text-align: center;
}

.feedback-success-icon[b-zhpd0a26km] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: #ffffff;
    background: linear-gradient(135deg, #2f9e6e 0%, #58c090 100%);
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 10px 24px rgba(47, 158, 110, 0.3);
}

.feedback-success strong[b-zhpd0a26km] {
    font-size: 15px;
    color: var(--primary-text);
}

.feedback-success p[b-zhpd0a26km] {
    margin: 0 0 8px;
    max-width: 340px;
    font-size: 12.5px;
    color: var(--secondary-text);
    line-height: 1.5;
}
/* /Components/Shared/GlobalErrorScreen.razor.rz.scp.css */
.global-error-screen[b-d4e3ibgo2x] {
    display: grid;
    min-height: 100vh;
    place-items: center;
    padding: 28px;
    color: #08223f;
    background:
        radial-gradient(ellipse at 20% 15%, rgba(255, 255, 255, 0.90), transparent 42%),
        radial-gradient(ellipse at 80% 86%, rgba(88, 209, 228, 0.20), transparent 42%),
        linear-gradient(135deg, #f8fcff 0%, #eaf6ff 48%, #dff2fb 100%);
    font-family: "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    user-select: none;
    -webkit-user-select: none;
}

.global-error-shell[b-d4e3ibgo2x] {
    position: relative;
    display: grid;
    width: min(560px, calc(100vw - 38px));
    justify-items: center;
    gap: 22px;
    padding: 48px 42px 36px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.86);
    border-radius: 30px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.88), rgba(239, 249, 255, 0.68)),
        radial-gradient(circle at 50% 0%, rgba(88, 209, 228, 0.18), transparent 42%);
    box-shadow:
        0 44px 120px rgba(5, 43, 76, 0.24),
        0 14px 36px rgba(20, 126, 196, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.98);
    text-align: center;
    backdrop-filter: blur(24px) saturate(1.16);
    animation: globalErrorIn-b-d4e3ibgo2x 240ms ease-out both;
}

.global-error-shell[b-d4e3ibgo2x]::before {
    position: absolute;
    inset: -26%;
    background:
        radial-gradient(circle at 50% 14%, rgba(88, 209, 228, 0.20), transparent 30%),
        url("/images/login/bio-microorganism-field.png");
    background-position: center;
    background-size: cover;
    content: "";
    opacity: 0.07;
    pointer-events: none;
    filter: blur(10px) saturate(0.9);
    animation: globalErrorMicrobes-b-d4e3ibgo2x 18s ease-in-out infinite alternate;
}

.global-error-shell > *[b-d4e3ibgo2x] {
    position: relative;
    z-index: 1;
}

.global-error-mark[b-d4e3ibgo2x] {
    position: relative;
    display: grid;
    width: 106px;
    height: 106px;
    place-items: center;
}

.global-error-mark span[b-d4e3ibgo2x] {
    position: absolute;
    inset: 0;
    border: 2px solid rgba(8, 120, 215, 0.16);
    border-top-color: #0878d7;
    border-right-color: #58d1e4;
    border-radius: 50%;
    box-shadow: 0 0 34px rgba(31, 159, 237, 0.18);
    animation: globalErrorSpin-b-d4e3ibgo2x 1.45s linear infinite;
}

.global-error-mark[b-d4e3ibgo2x]::after {
    position: absolute;
    inset: -8px;
    border: 1px solid rgba(202, 66, 78, 0.16);
    border-radius: 50%;
    content: "";
    animation: globalErrorPulse-b-d4e3ibgo2x 2.4s ease-out infinite;
}

.global-error-mark strong[b-d4e3ibgo2x] {
    display: grid;
    width: 66px;
    height: 66px;
    place-items: center;
    border: 1px solid rgba(202, 66, 78, 0.34);
    border-radius: 50%;
    color: #fff;
    background: linear-gradient(145deg, #ca424e, #0878d7);
    box-shadow: 0 16px 34px rgba(8, 120, 215, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    font-size: 28px;
    font-weight: 900;
}

.global-error-copy[b-d4e3ibgo2x] {
    display: grid;
    gap: 9px;
    max-width: 430px;
}

.global-error-copy span[b-d4e3ibgo2x] {
    color: #ca424e;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
    text-transform: uppercase;
}

.global-error-copy h1[b-d4e3ibgo2x] {
    margin: 0;
    color: #082f5d;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 840;
    letter-spacing: 0;
    line-height: 1.08;
}

.global-error-copy p[b-d4e3ibgo2x] {
    margin: 0;
    color: #315b7e;
    font-size: 15px;
    font-weight: 630;
    line-height: 1.5;
}

.global-error-reference[b-d4e3ibgo2x] {
    display: grid;
    gap: 3px;
    width: min(380px, 100%);
    padding: 10px 12px;
    border: 1px solid rgba(78, 136, 184, 0.16);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.54);
}

.global-error-reference span[b-d4e3ibgo2x] {
    color: #5b7894;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
}

.global-error-reference strong[b-d4e3ibgo2x] {
    overflow: hidden;
    color: #153d68;
    font-size: 12px;
    font-weight: 760;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.global-error-actions[b-d4e3ibgo2x] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.global-error-actions button[b-d4e3ibgo2x],
.global-error-actions a[b-d4e3ibgo2x] {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border: 1px solid rgba(8, 120, 215, 0.22);
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #1f9fed, #075fba);
    box-shadow: 0 12px 26px rgba(8, 120, 215, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    font-family: inherit;
    font-size: 13px;
    font-weight: 820;
    text-decoration: none;
    cursor: pointer;
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.global-error-actions button.secondary[b-d4e3ibgo2x],
.global-error-actions a[b-d4e3ibgo2x] {
    color: #17446f;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.global-error-actions button:hover[b-d4e3ibgo2x],
.global-error-actions a:hover[b-d4e3ibgo2x] {
    transform: translateY(-1px);
    filter: saturate(1.05);
    box-shadow: 0 14px 30px rgba(8, 120, 215, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.20);
}

@keyframes globalErrorIn-b-d4e3ibgo2x {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.985);
    }

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

@keyframes globalErrorMicrobes-b-d4e3ibgo2x {
    from {
        transform: translate3d(-16px, 10px, 0) scale(1.04);
    }

    to {
        transform: translate3d(20px, -14px, 0) scale(1.12);
    }
}

@keyframes globalErrorSpin-b-d4e3ibgo2x {
    to {
        transform: rotate(360deg);
    }
}

@keyframes globalErrorPulse-b-d4e3ibgo2x {
    from {
        opacity: 0.58;
        transform: scale(0.82);
    }

    to {
        opacity: 0;
        transform: scale(1.28);
    }
}

@media (max-width: 620px) {
    .global-error-screen[b-d4e3ibgo2x] {
        padding: 10px;
    }

    .global-error-shell[b-d4e3ibgo2x] {
        padding: 36px 22px 28px;
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-error-shell[b-d4e3ibgo2x],
    .global-error-shell[b-d4e3ibgo2x]::before,
    .global-error-mark span[b-d4e3ibgo2x],
    .global-error-mark[b-d4e3ibgo2x]::after {
        animation: none;
    }
}
/* /Components/Shared/MaintenanceLockScreen.razor.rz.scp.css */
.maintenance-lock-screen[b-t6wt58ta9k] {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: grid;
    min-height: 100dvh;
    overflow: hidden;
    place-items: center;
    padding: 92px 24px 54px;
    color: #f5f9ff;
    background:
        radial-gradient(circle at 50% 44%, rgba(28, 113, 232, .18), transparent 30%),
        linear-gradient(145deg, #07142b 0%, #0a1d40 50%, #061124 100%);
    font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
    isolation: isolate;
}

.maintenance-lock-screen[b-t6wt58ta9k],
.maintenance-lock-screen *[b-t6wt58ta9k] {
    box-sizing: border-box;
}

.maintenance-background[b-t6wt58ta9k] {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    overflow: hidden;
}

.maintenance-background[b-t6wt58ta9k]::before,
.maintenance-background[b-t6wt58ta9k]::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

.maintenance-background[b-t6wt58ta9k]::before {
    inset: -12%;
    background: url('/images/maintenance-bio-network.png') center / cover no-repeat;
    filter: blur(10px) saturate(1.04) brightness(.82);
    transform: scale(1.12) translate3d(-1%, -.6%, 0);
    animation: maintenanceBackgroundCamera-b-t6wt58ta9k 28s ease-in-out infinite alternate;
}

.maintenance-background[b-t6wt58ta9k]::after {
    inset: 0;
    background:
        radial-gradient(circle at 50% 45%, rgba(7, 30, 70, .05) 0 23%, rgba(2, 13, 36, .24) 68%, rgba(1, 7, 21, .5) 100%),
        linear-gradient(180deg, rgba(1, 10, 29, .08), rgba(1, 10, 29, .24));
}

.maintenance-vignette[b-t6wt58ta9k] {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 46%, rgba(35, 112, 225, .1), transparent 30%),
        radial-gradient(circle at 17% 24%, rgba(55, 154, 255, .08), transparent 16%),
        radial-gradient(circle at 82% 74%, rgba(25, 104, 238, .09), transparent 18%);
    mix-blend-mode: screen;
    opacity: .8;
    pointer-events: none;
    animation: maintenanceVignetteBreathe-b-t6wt58ta9k 9s ease-in-out infinite alternate;
}

.maintenance-droplet[b-t6wt58ta9k] {
    position: absolute;
    width: 30px;
    height: 38px;
    border: 1px solid rgba(150, 220, 255, .22);
    border-radius: 52% 48% 57% 43% / 46% 45% 55% 54%;
    background:
        radial-gradient(circle at 30% 22%, rgba(235, 250, 255, .48) 0 5%, transparent 17%),
        radial-gradient(circle at 60% 66%, rgba(53, 160, 242, .12), rgba(20, 98, 205, .04) 58%, transparent 73%);
    box-shadow:
        0 0 18px rgba(48, 147, 247, .12),
        3px 5px 10px rgba(0, 10, 35, .25),
        inset -3px -5px 10px rgba(8, 75, 173, .11),
        inset 3px 3px 7px rgba(205, 241, 255, .12);
    backdrop-filter: blur(1.5px);
    opacity: 0;
    pointer-events: none;
    animation: maintenanceDropletDrift-b-t6wt58ta9k var(--drop-duration, 16s) ease-in-out infinite;
}

.maintenance-droplet[b-t6wt58ta9k]::before {
    position: absolute;
    top: 17%;
    left: 20%;
    width: 22%;
    height: 16%;
    border-radius: 50%;
    background: rgba(243, 252, 255, .52);
    filter: blur(.4px);
    content: "";
}

.droplet-1[b-t6wt58ta9k] { left: 9%; top: 74%; --drop-x: 38px; --drop-scale: .72; --drop-duration: 18s; animation-delay: -6s; }
.droplet-2[b-t6wt58ta9k] { left: 18%; top: 34%; --drop-x: -24px; --drop-scale: .48; --drop-duration: 14s; animation-delay: -11s; }
.droplet-3[b-t6wt58ta9k] { left: 31%; top: 88%; --drop-x: 54px; --drop-scale: .92; --drop-duration: 21s; animation-delay: -3s; }
.droplet-4[b-t6wt58ta9k] { left: 42%; top: 27%; --drop-x: -42px; --drop-scale: .58; --drop-duration: 17s; animation-delay: -9s; }
.droplet-5[b-t6wt58ta9k] { left: 55%; top: 82%; --drop-x: 28px; --drop-scale: .78; --drop-duration: 19s; animation-delay: -14s; }
.droplet-6[b-t6wt58ta9k] { left: 65%; top: 38%; --drop-x: 46px; --drop-scale: .5; --drop-duration: 15s; animation-delay: -4s; }
.droplet-7[b-t6wt58ta9k] { left: 76%; top: 91%; --drop-x: -34px; --drop-scale: 1.08; --drop-duration: 22s; animation-delay: -12s; }
.droplet-8[b-t6wt58ta9k] { left: 86%; top: 58%; --drop-x: 24px; --drop-scale: .64; --drop-duration: 16s; animation-delay: -7s; }
.droplet-9[b-t6wt58ta9k] { left: 93%; top: 28%; --drop-x: -46px; --drop-scale: .86; --drop-duration: 20s; animation-delay: -16s; }
.droplet-10[b-t6wt58ta9k] { left: 4%; top: 45%; --drop-x: 30px; --drop-scale: .55; --drop-duration: 17s; animation-delay: -2s; }

.maintenance-particle[b-t6wt58ta9k] {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #68bdff;
    box-shadow: 0 0 12px #2786f4;
    opacity: .45;
    animation: maintenanceParticle-b-t6wt58ta9k 9s ease-in-out infinite;
}

.particle-1[b-t6wt58ta9k] { left: 7%; top: 21%; animation-delay: -1s; }
.particle-2[b-t6wt58ta9k] { left: 15%; top: 67%; animation-delay: -4s; }
.particle-3[b-t6wt58ta9k] { left: 24%; top: 36%; animation-delay: -7s; }
.particle-4[b-t6wt58ta9k] { left: 33%; top: 84%; animation-delay: -2s; }
.particle-5[b-t6wt58ta9k] { left: 42%; top: 14%; animation-delay: -5s; }
.particle-6[b-t6wt58ta9k] { left: 51%; top: 74%; animation-delay: -8s; }
.particle-7[b-t6wt58ta9k] { left: 60%; top: 26%; animation-delay: -3s; }
.particle-8[b-t6wt58ta9k] { left: 68%; top: 88%; animation-delay: -6s; }
.particle-9[b-t6wt58ta9k] { left: 76%; top: 41%; animation-delay: -9s; }
.particle-10[b-t6wt58ta9k] { left: 84%; top: 70%; animation-delay: -4.5s; }
.particle-11[b-t6wt58ta9k] { left: 92%; top: 18%; animation-delay: -7.5s; }
.particle-12[b-t6wt58ta9k] { left: 5%; top: 89%; animation-delay: -2.5s; }

.maintenance-brand[b-t6wt58ta9k] {
    position: absolute;
    top: 24px;
    left: 28px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.maintenance-brand-mark[b-t6wt58ta9k] {
    position: relative;
    display: grid;
    min-width: 108px;
    min-height: 48px;
    place-items: center;
    padding: 4px 8px;
    isolation: isolate;
}

.maintenance-brand-mark[b-t6wt58ta9k]::before {
    position: absolute;
    z-index: -1;
    inset: -18px -28px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center, rgba(225, 248, 255, .66) 0%, rgba(76, 182, 233, .3) 36%, transparent 74%);
    content: "";
    filter: blur(12px);
    transform-origin: center;
    animation: maintenanceBrandGlow-b-t6wt58ta9k 6s ease-in-out infinite alternate;
}

.maintenance-brand-mark img[b-t6wt58ta9k] {
    position: relative;
    z-index: 1;
    width: 88px;
    height: 36px;
    object-fit: contain;
    filter: none;
    opacity: 1;
}

.maintenance-brand > span:not(.maintenance-brand-mark)[b-t6wt58ta9k] {
    width: 1px;
    height: 34px;
    background: rgba(147, 195, 255, .3);
}

.maintenance-brand div[b-t6wt58ta9k] {
    display: flex;
    flex-direction: column;
}

.maintenance-brand strong[b-t6wt58ta9k] { font-size: 14px; }
.maintenance-brand small[b-t6wt58ta9k] { color: #8fa9cd; font-size: 10px; }

.maintenance-card[b-t6wt58ta9k] {
    position: relative;
    display: flex;
    width: min(520px, 100%);
    overflow: hidden;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 34px 38px 30px;
    border: 1px solid rgba(68, 151, 255, .55);
    border-radius: 22px;
    background: linear-gradient(155deg, rgba(15, 41, 83, .92), rgba(7, 22, 49, .94));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .09) inset,
        0 0 0 1px rgba(24, 87, 175, .18),
        0 34px 90px rgba(0, 5, 18, .55),
        0 0 65px rgba(21, 101, 235, .12);
    backdrop-filter: blur(20px);
    animation:
        maintenanceCardArrive-b-t6wt58ta9k .8s cubic-bezier(.18, .9, .25, 1.08) both,
        maintenanceCardBreath-b-t6wt58ta9k 6s ease-in-out .8s infinite;
}

.maintenance-shield[b-t6wt58ta9k] {
    position: relative;
    display: grid;
    width: 128px;
    height: 128px;
    place-items: center;
}

.maintenance-shield svg[b-t6wt58ta9k] {
    z-index: 2;
    width: 86px;
    filter: drop-shadow(0 14px 24px rgba(17, 104, 243, .45));
    animation: maintenanceShieldFloat-b-t6wt58ta9k 3.2s ease-in-out infinite;
}

.shield-ring[b-t6wt58ta9k] {
    position: absolute;
    inset: 10px;
    border: 1px solid rgba(66, 152, 255, .34);
    border-radius: 50%;
    animation: maintenanceRing-b-t6wt58ta9k 3s ease-out infinite;
}

.shield-ring-two[b-t6wt58ta9k] { animation-delay: -1.5s; }

.maintenance-state-badge[b-t6wt58ta9k] {
    display: inline-flex;
    min-height: 30px;
    align-items: center;
    gap: 8px;
    padding: 0 15px;
    border: 1px solid rgba(255, 169, 58, .42);
    border-radius: 999px;
    color: #ffd99a;
    background: rgba(185, 102, 17, .18);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.maintenance-state-badge span[b-t6wt58ta9k],
.footer-status-dot[b-t6wt58ta9k] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ffad32;
    box-shadow: 0 0 0 5px rgba(255, 173, 50, .1), 0 0 16px rgba(255, 173, 50, .7);
    animation: maintenanceStatusPulse-b-t6wt58ta9k 1.8s ease-in-out infinite;
}

.maintenance-copy[b-t6wt58ta9k] { text-align: center; }
.maintenance-copy h1[b-t6wt58ta9k] { margin: 0 0 9px; font-size: clamp(30px, 4vw, 42px); line-height: 1.05; }
.maintenance-copy p[b-t6wt58ta9k] { margin: 0 auto 8px; max-width: 390px; color: #c2d3eb; font-size: 14px; line-height: 1.55; }
.maintenance-copy small[b-t6wt58ta9k] { display: block; color: #829abc; font-size: 11.5px; line-height: 1.5; }

.maintenance-details[b-t6wt58ta9k] {
    display: grid;
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid rgba(93, 153, 231, .22);
    border-radius: 14px;
    background: rgba(4, 18, 43, .38);
}

.maintenance-details > div[b-t6wt58ta9k] {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 9px;
    padding: 13px 11px;
    border-right: 1px solid rgba(93, 153, 231, .16);
}

.maintenance-details > div:last-child[b-t6wt58ta9k] { border-right: 0; }
.maintenance-details span:not(.detail-icon)[b-t6wt58ta9k] { display: flex; min-width: 0; flex-direction: column; }
.maintenance-details small[b-t6wt58ta9k] { color: #7891b4; font-size: 9px; text-transform: uppercase; }
.maintenance-details strong[b-t6wt58ta9k] { overflow: hidden; margin-top: 2px; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }

.maintenance-details .started-value[b-t6wt58ta9k] {
    overflow: visible;
    font-size: 10px;
    line-height: 1.18;
    text-overflow: clip;
    white-space: normal;
}

.maintenance-details .started-value time[b-t6wt58ta9k] {
    display: block;
    margin-top: 2px;
    color: #8fc8ff;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: .2px;
}

.detail-icon[b-t6wt58ta9k] {
    display: grid;
    width: 28px;
    height: 28px;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid rgba(68, 151, 255, .4);
    border-radius: 9px;
    color: #66b5ff;
    background: rgba(30, 112, 226, .12);
}

.maintenance-logout-form[b-t6wt58ta9k] {
    display: none;
}

.maintenance-waiting-status[b-t6wt58ta9k] {
    display: flex;
    width: min(360px, 100%);
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: #9db3d1;
    font-size: 11.5px;
    font-weight: 650;
    letter-spacing: .12px;
}

.maintenance-waiting-track[b-t6wt58ta9k] {
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(83, 151, 235, .13);
}

.maintenance-waiting-track > span[b-t6wt58ta9k] {
    display: block;
    width: 34%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(113, 188, 255, .85), transparent);
    animation: maintenanceWaiting-b-t6wt58ta9k 2.6s ease-in-out infinite;
}

.maintenance-administrator-access[b-t6wt58ta9k] {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border: 1px solid rgba(100, 151, 210, .42);
    border-radius: 8px;
    color: #9fb8d8;
    background: rgba(4, 16, 38, .3);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .16s ease, color .16s ease, background .16s ease;
}

.maintenance-administrator-access:hover[b-t6wt58ta9k] {
    border-color: rgba(116, 180, 244, .64);
    color: #c3daf4;
    background: rgba(17, 50, 91, .45);
}

.maintenance-administrator-access:focus-visible[b-t6wt58ta9k] {
    outline: 2px solid rgba(112, 190, 255, .82);
    outline-offset: 3px;
}

.maintenance-release-progress[b-t6wt58ta9k] {
    width: 100%;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(71, 137, 226, .14);
}

.maintenance-release-progress span[b-t6wt58ta9k] {
    display: block;
    width: 42%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, #72c5ff, #2b7ff2, transparent);
    animation: maintenanceRelease-b-t6wt58ta9k 1.2s ease-in-out infinite;
}

.maintenance-footer[b-t6wt58ta9k] {
    position: absolute;
    right: 28px;
    bottom: 22px;
    display: flex;
    align-items: center;
    gap: 9px;
    color: #91a9c9;
    font-size: 11px;
    font-weight: 700;
}

.is-releasing .maintenance-state-badge[b-t6wt58ta9k] {
    border-color: rgba(65, 217, 158, .38);
    color: #9cf0cf;
    background: rgba(24, 143, 100, .17);
}

.is-releasing .maintenance-state-badge span[b-t6wt58ta9k] {
    background: #41d99e;
    box-shadow: 0 0 0 5px rgba(65, 217, 158, .1), 0 0 16px rgba(65, 217, 158, .65);
}

.is-releasing .maintenance-shield svg[b-t6wt58ta9k] {
    filter:
        hue-rotate(92deg)
        saturate(.82)
        drop-shadow(0 14px 26px rgba(38, 205, 137, .46));
}

.is-releasing .maintenance-card[b-t6wt58ta9k] {
    border-color: rgba(65, 217, 158, .42);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .09) inset,
        0 0 0 1px rgba(28, 159, 111, .14),
        0 34px 90px rgba(0, 5, 18, .55),
        0 0 72px rgba(45, 202, 145, .13);
}

.is-releasing .footer-status-dot[b-t6wt58ta9k] {
    background: #41d99e;
    box-shadow: 0 0 0 5px rgba(65, 217, 158, .1), 0 0 16px rgba(65, 217, 158, .65);
}

@keyframes maintenanceBackgroundCamera-b-t6wt58ta9k {
    0% { transform: scale(1.12) translate3d(-1%, -.6%, 0); }
    45% { transform: scale(1.17) translate3d(.7%, .5%, 0); }
    100% { transform: scale(1.22) translate3d(1.2%, -.3%, 0); }
}

@keyframes maintenanceVignetteBreathe-b-t6wt58ta9k {
    from { transform: scale(.98); opacity: .62; }
    to { transform: scale(1.04); opacity: .92; }
}

@keyframes maintenanceDropletDrift-b-t6wt58ta9k {
    0% { transform: translate3d(0, 32px, 0) scale(var(--drop-scale, .7)) rotate(-8deg); opacity: 0; }
    14% { opacity: .4; }
    52% { transform: translate3d(var(--drop-x, 30px), -58px, 0) scale(var(--drop-scale, .7)) rotate(5deg); opacity: .58; }
    86% { opacity: .32; }
    100% { transform: translate3d(0, -148px, 0) scale(var(--drop-scale, .7)) rotate(-3deg); opacity: 0; }
}

@keyframes maintenanceBrandGlow-b-t6wt58ta9k {
    from { transform: translate3d(-5px, 1px, 0) scale(.92); opacity: .72; }
    to { transform: translate3d(7px, -2px, 0) scale(1.1); opacity: 1; }
}
@keyframes maintenanceParticle-b-t6wt58ta9k { 0%, 100% { transform: translateY(18px) scale(.7); opacity: .15; } 50% { transform: translateY(-28px) scale(1.3); opacity: .65; } }
@keyframes maintenanceCardArrive-b-t6wt58ta9k { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes maintenanceCardBreath-b-t6wt58ta9k {
    0%, 100% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .09) inset, 0 0 0 1px rgba(24, 87, 175, .18), 0 34px 90px rgba(0, 5, 18, .55), 0 0 58px rgba(21, 101, 235, .1);
    }
    50% {
        box-shadow: 0 1px 0 rgba(255, 255, 255, .11) inset, 0 0 0 1px rgba(50, 127, 228, .24), 0 36px 96px rgba(0, 5, 18, .58), 0 0 76px rgba(21, 101, 235, .18);
    }
}
@keyframes maintenanceShieldFloat-b-t6wt58ta9k { 0%, 100% { transform: translateY(2px); } 50% { transform: translateY(-6px); } }
@keyframes maintenanceRing-b-t6wt58ta9k { from { transform: scale(.55); opacity: .7; } to { transform: scale(1.25); opacity: 0; } }
@keyframes maintenanceStatusPulse-b-t6wt58ta9k { 50% { transform: scale(1.12); opacity: .72; } }
@keyframes maintenanceRelease-b-t6wt58ta9k { from { transform: translateX(-125%); } to { transform: translateX(330%); } }
@keyframes maintenanceWaiting-b-t6wt58ta9k { from { transform: translateX(-130%); } to { transform: translateX(390%); } }

@media (max-width: 640px) {
    .maintenance-lock-screen[b-t6wt58ta9k] { padding: 88px 12px 50px; }
    .maintenance-brand[b-t6wt58ta9k] { top: 18px; left: 18px; }
    .maintenance-brand-mark[b-t6wt58ta9k] { min-width: 88px; min-height: 42px; padding: 3px 6px; }
    .maintenance-brand img[b-t6wt58ta9k] { width: 70px; height: 30px; }
    .maintenance-card[b-t6wt58ta9k] { gap: 14px; padding: 24px 18px 22px; }
    .maintenance-shield[b-t6wt58ta9k] { width: 100px; height: 100px; }
    .maintenance-shield svg[b-t6wt58ta9k] { width: 70px; }
    .maintenance-details[b-t6wt58ta9k] { grid-template-columns: 1fr; }
    .maintenance-details > div[b-t6wt58ta9k] { border-right: 0; border-bottom: 1px solid rgba(93, 153, 231, .16); }
    .maintenance-details > div:last-child[b-t6wt58ta9k] { border-bottom: 0; }
    .maintenance-footer[b-t6wt58ta9k] { right: 18px; bottom: 14px; }
}



/* ============================================================
   SOFT BIO LIGHT MAINTENANCE THEME
   - User-supplied light biological background
   - Slow transform-only background drift
   - Five subtle water droplets
   - No glow behind the PDI logo
   - Hidden Super Admin gesture remains unchanged
   ============================================================ */

.maintenance-lock-screen[b-t6wt58ta9k] {
    overflow-x: hidden;
    overflow-y: auto;
    color: #102d4f;
    background: #f8fcff;
}

.maintenance-background[b-t6wt58ta9k] {
    background: #f8fcff;
}

.maintenance-background[b-t6wt58ta9k]::before {
    inset: -4%;
    background-color: #f8fcff;
    background-image: url('/images/maintenance-bio-soft.webp');
    background-repeat: no-repeat;
    background-position: left -24px center;
    background-size: auto 116%;
    opacity: .92;
    filter: none;
    transform: translate3d(0, 0, 0) scale(1.018);
    transform-origin: center;
    will-change: transform;
    animation: maintenanceSoftBioDrift-b-t6wt58ta9k 38s ease-in-out infinite alternate;
}

.maintenance-background[b-t6wt58ta9k]::after {
    inset: 0;
    background:
        radial-gradient(ellipse at 50% 47%,
            rgba(255, 255, 255, .78) 0%,
            rgba(255, 255, 255, .6) 25%,
            rgba(249, 253, 255, .25) 48%,
            rgba(241, 249, 254, .08) 72%,
            transparent 100%),
        linear-gradient(180deg,
            rgba(255, 255, 255, .08),
            rgba(235, 247, 253, .12));
}

.maintenance-vignette[b-t6wt58ta9k] {
    background:
        radial-gradient(circle at 13% 20%, rgba(74, 164, 222, .06), transparent 16%),
        radial-gradient(circle at 88% 78%, rgba(38, 126, 201, .045), transparent 19%);
    mix-blend-mode: normal;
    opacity: .62;
    animation: none;
}

.maintenance-particle[b-t6wt58ta9k] {
    display: none;
}

/* Five deliberately sparse droplets. All other generated droplets remain hidden. */
.maintenance-droplet[b-t6wt58ta9k] {
    display: none;
    width: 24px;
    height: 32px;
    border: 1px solid rgba(53, 142, 201, .42);
    border-radius: 54% 46% 59% 41% / 45% 43% 57% 55%;
    background:
        radial-gradient(circle at 30% 22%,
            rgba(255, 255, 255, .96) 0 8%,
            rgba(255, 255, 255, .34) 21%,
            transparent 39%),
        radial-gradient(circle at 58% 68%,
            rgba(61, 157, 215, .28),
            rgba(61, 157, 215, .11) 58%,
            rgba(61, 157, 215, .035) 76%);
    box-shadow:
        0 9px 20px rgba(36, 113, 165, .15),
        inset -3px -4px 8px rgba(42, 128, 188, .14),
        inset 2px 2px 7px rgba(255, 255, 255, .88);
    backdrop-filter: none;
    opacity: 0;
    will-change: transform, opacity;
    animation: maintenanceSoftDropletDrift-b-t6wt58ta9k var(--drop-duration, 26s) ease-in-out infinite;
}

.maintenance-droplet[b-t6wt58ta9k]::before {
    top: 18%;
    left: 22%;
    width: 24%;
    height: 17%;
    background: rgba(255, 255, 255, .78);
    filter: none;
}

.droplet-1[b-t6wt58ta9k],
.droplet-3[b-t6wt58ta9k],
.droplet-5[b-t6wt58ta9k],
.droplet-7[b-t6wt58ta9k],
.droplet-9[b-t6wt58ta9k] {
    display: block;
}

.droplet-1[b-t6wt58ta9k] {
    left: 7%;
    top: 76%;
    --drop-x: 20px;
    --drop-scale: .72;
    --drop-duration: 28s;
    animation-delay: -8s;
}

.droplet-3[b-t6wt58ta9k] {
    left: 28%;
    top: 89%;
    --drop-x: 26px;
    --drop-scale: .58;
    --drop-duration: 31s;
    animation-delay: -19s;
}

.droplet-5[b-t6wt58ta9k] {
    left: 53%;
    top: 14%;
    --drop-x: -18px;
    --drop-scale: .48;
    --drop-duration: 27s;
    animation-delay: -14s;
}

.droplet-7[b-t6wt58ta9k] {
    right: 9%;
    left: auto;
    top: 83%;
    --drop-x: -24px;
    --drop-scale: .7;
    --drop-duration: 30s;
    animation-delay: -22s;
}

.droplet-9[b-t6wt58ta9k] {
    right: 6%;
    left: auto;
    top: 30%;
    --drop-x: -18px;
    --drop-scale: .52;
    --drop-duration: 29s;
    animation-delay: -11s;
}

.maintenance-brand[b-t6wt58ta9k] {
    color: #153557;
}

.maintenance-brand-mark[b-t6wt58ta9k] {
    border: 0;
    background: transparent;
}

.maintenance-admin-trigger[b-t6wt58ta9k] {
    margin: 0;
    cursor: default;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.maintenance-admin-trigger img[b-t6wt58ta9k] {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.maintenance-admin-trigger:focus[b-t6wt58ta9k],
.maintenance-admin-trigger:focus-visible[b-t6wt58ta9k] {
    outline: none;
}

/* Explicitly remove the former halo behind the PDI logo. */
.maintenance-brand-mark[b-t6wt58ta9k]::before {
    display: none;
    content: none;
    background: none;
    filter: none;
    animation: none;
}

.maintenance-brand-mark img[b-t6wt58ta9k] {
    filter: none;
}

.maintenance-brand > span:not(.maintenance-brand-mark)[b-t6wt58ta9k] {
    background: rgba(80, 137, 184, .28);
}

.maintenance-brand small[b-t6wt58ta9k] {
    color: #6885a2;
}

.maintenance-card[b-t6wt58ta9k] {
    border-color: rgba(92, 156, 204, .32);
    color: #102d4f;
    background: rgba(255, 255, 255, .965);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .96) inset,
        0 0 0 1px rgba(69, 133, 184, .045),
        0 28px 72px rgba(35, 82, 118, .15),
        0 10px 26px rgba(38, 97, 138, .07);
    backdrop-filter: none;
    animation: maintenanceCardArrive-b-t6wt58ta9k .6s cubic-bezier(.18, .9, .25, 1.05) both;
}

.maintenance-shield svg[b-t6wt58ta9k] {
    filter: drop-shadow(0 12px 22px rgba(39, 111, 196, .2));
}

.shield-ring[b-t6wt58ta9k] {
    border-color: rgba(48, 137, 218, .18);
}

.maintenance-state-badge[b-t6wt58ta9k] {
    border-color: rgba(218, 143, 43, .35);
    color: #9b5a08;
    background: #fff6e8;
}

.maintenance-state-badge span[b-t6wt58ta9k],
.footer-status-dot[b-t6wt58ta9k] {
    background: #f3a52f;
    box-shadow:
        0 0 0 5px rgba(243, 165, 47, .11),
        0 0 14px rgba(243, 165, 47, .3);
}

.maintenance-copy h1[b-t6wt58ta9k] {
    color: #0b2d51;
}

.maintenance-copy p[b-t6wt58ta9k] {
    color: #46627f;
}

.maintenance-copy small[b-t6wt58ta9k] {
    color: #7289a0;
}

.maintenance-details[b-t6wt58ta9k] {
    border-color: rgba(78, 143, 194, .2);
    background: rgba(246, 251, 254, .94);
}

.maintenance-details > div[b-t6wt58ta9k] {
    border-color: rgba(78, 143, 194, .15);
}

.maintenance-details small[b-t6wt58ta9k] {
    color: #6e88a1;
}

.maintenance-details strong[b-t6wt58ta9k] {
    color: #173a5d;
}

.maintenance-details .started-value time[b-t6wt58ta9k] {
    color: #1670bd;
}

.detail-icon[b-t6wt58ta9k] {
    border-color: rgba(55, 135, 202, .26);
    color: #1670bd;
    background: #eaf6fd;
}

.maintenance-waiting-status[b-t6wt58ta9k] {
    color: #617b94;
}

.maintenance-waiting-track[b-t6wt58ta9k] {
    background: #e2eef6;
}

.maintenance-waiting-track > span[b-t6wt58ta9k] {
    background: linear-gradient(90deg, transparent, #4aaee6, transparent);
}

.maintenance-release-progress[b-t6wt58ta9k] {
    background: #e0edf5;
}

.maintenance-release-progress span[b-t6wt58ta9k] {
    background: linear-gradient(90deg, transparent, #64c7ef, #2583d8, transparent);
}

.maintenance-footer[b-t6wt58ta9k] {
    color: #607a92;
}

.is-releasing .maintenance-state-badge[b-t6wt58ta9k] {
    border-color: rgba(44, 176, 119, .3);
    color: #14724d;
    background: #eaf9f2;
}

.is-releasing .maintenance-state-badge span[b-t6wt58ta9k],
.is-releasing .footer-status-dot[b-t6wt58ta9k] {
    background: #2fbd82;
    box-shadow:
        0 0 0 5px rgba(47, 189, 130, .12),
        0 0 14px rgba(47, 189, 130, .3);
}

.is-releasing .maintenance-shield svg[b-t6wt58ta9k] {
    filter:
        hue-rotate(92deg)
        saturate(.82)
        drop-shadow(0 12px 22px rgba(38, 170, 113, .22));
}

.is-releasing .maintenance-card[b-t6wt58ta9k] {
    border-color: rgba(48, 173, 121, .28);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .96) inset,
        0 0 0 1px rgba(48, 173, 121, .045),
        0 28px 72px rgba(35, 82, 118, .13),
        0 10px 26px rgba(38, 97, 138, .06);
}

@keyframes maintenanceSoftBioDrift-b-t6wt58ta9k {
    0% {
        transform: translate3d(-.45%, -.25%, 0) scale(1.018);
    }
    50% {
        transform: translate3d(.35%, .3%, 0) scale(1.026);
    }
    100% {
        transform: translate3d(.65%, -.15%, 0) scale(1.034);
    }
}

@keyframes maintenanceSoftDropletDrift-b-t6wt58ta9k {
    0% {
        transform: translate3d(0, 24px, 0) scale(var(--drop-scale, .65)) rotate(-5deg);
        opacity: 0;
    }
    16% {
        opacity: .38;
    }
    52% {
        transform: translate3d(var(--drop-x, 20px), -34px, 0) scale(var(--drop-scale, .65)) rotate(3deg);
        opacity: .55;
    }
    84% {
        opacity: .3;
    }
    100% {
        transform: translate3d(0, -92px, 0) scale(var(--drop-scale, .65)) rotate(-2deg);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .maintenance-lock-screen[b-t6wt58ta9k] {
        place-items: start center;
        padding-top: 82px;
        padding-bottom: 64px;
    }

    .maintenance-background[b-t6wt58ta9k]::before {
        inset: -3%;
        background-position: center;
        background-size: cover;
        opacity: .82;
        animation-duration: 46s;
    }

    .maintenance-background[b-t6wt58ta9k]::after {
        background:
            radial-gradient(ellipse at 50% 47%,
                rgba(255, 255, 255, .82) 0%,
                rgba(255, 255, 255, .63) 28%,
                rgba(248, 253, 255, .2) 60%,
                transparent 100%);
    }

    .maintenance-droplet[b-t6wt58ta9k] {
        width: 18px;
        height: 24px;
        opacity: 0;
    }

    .droplet-3[b-t6wt58ta9k],
    .droplet-7[b-t6wt58ta9k] {
        display: none;
    }

    .maintenance-card[b-t6wt58ta9k] {
        margin-block: auto;
    }
}


@media (prefers-reduced-motion: reduce) {
    .maintenance-lock-screen *[b-t6wt58ta9k] { animation: none !important; }
}
/* /Components/Shared/PermissionToggle.razor.rz.scp.css */
.permission-toggle[b-znxwnn61hs] {
    position: relative;
    display: grid;
    min-width: 0;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    padding: 8px 7px;
    border: 1px solid transparent;
    border-radius: 7px;
    cursor: pointer;
    transition: border-color 130ms ease, background 130ms ease, transform 130ms ease;
}

.permission-toggle:hover:not(.disabled)[b-znxwnn61hs] {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, #1769dc 36%, var(--border-color) 64%);
    background: color-mix(in srgb, var(--panel-background) 82%, #1769dc 18%);
}

.permission-toggle.disabled[b-znxwnn61hs] {
    cursor: not-allowed;
    opacity: 0.72;
}

.permission-toggle[b-znxwnn61hs]  input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.permission-switch[b-znxwnn61hs] {
    position: relative;
    display: block;
    width: 34px;
    height: 19px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--secondary-text) 33%, var(--panel-background) 67%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--secondary-text) 30%, transparent 70%);
    transition: background 140ms ease, box-shadow 140ms ease;
}

.permission-switch[b-znxwnn61hs]::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(15, 23, 42, 0.24);
    content: "";
    transition: transform 140ms ease;
}

.permission-toggle[b-znxwnn61hs]  input:checked + .permission-switch {
    background: #1769dc;
    box-shadow: inset 0 0 0 1px #125dbf, 0 0 0 3px rgba(23, 105, 220, 0.10);
}

.permission-toggle[b-znxwnn61hs]  input:checked + .permission-switch::after {
    transform: translateX(15px);
}

.permission-copy[b-znxwnn61hs] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.permission-copy strong[b-znxwnn61hs] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 10.8px;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.permission-copy small[b-znxwnn61hs] {
    color: var(--secondary-text);
    font-size: 9.4px;
    line-height: 1.35;
}

:global(.app-shell.theme-dark) .permission-toggle:hover:not(.disabled)[b-znxwnn61hs] {
    background: rgba(47, 140, 255, 0.12);
}

:global(.app-shell.theme-dark) .permission-toggle[b-znxwnn61hs]  input:checked + .permission-switch {
    background: #2f8cff;
    box-shadow: inset 0 0 0 1px #2f8cff, 0 0 0 3px rgba(47, 140, 255, 0.10);
}
/* /Components/Shared/UserAccessEditor.razor.rz.scp.css */
.access-editor[b-5uasa003kn] {
    --access-blue: #2483ed;
    --access-green: #15966d;
    --access-amber: #c58a1c;
    --access-surface: var(--panel-background, #ffffff);
    --access-surface-soft: color-mix(in srgb, var(--panel-background, #ffffff) 92%, var(--access-blue) 8%);
    --access-surface-raised: color-mix(in srgb, var(--panel-background, #ffffff) 96%, var(--access-blue) 4%);
    --access-border: color-mix(in srgb, var(--border-color, #d5e1f2) 78%, var(--access-blue) 22%);
    --access-text: var(--primary-text, #18243a);
    --access-muted: var(--secondary-text, #71809a);
    display: grid;
    gap: 1.65rem;
    padding: .2rem .15rem .65rem;
    color: var(--access-text);
}

.access-category[b-5uasa003kn] { display: grid; gap: .8rem; }

.access-category-heading[b-5uasa003kn] {
    display: grid;
    grid-template-columns: 38px auto minmax(32px, 1fr);
    gap: .75rem;
    align-items: center;
    margin: 0 .4rem;
    padding: .68rem .8rem;
    border: 1px solid var(--access-border);
    border-left: 4px solid var(--access-blue);
    border-radius: 12px;
    background: linear-gradient(100deg, var(--access-surface-soft), var(--access-surface-raised));
    box-shadow: 0 5px 16px color-mix(in srgb, var(--shadow-color, rgba(37, 105, 190, .16)) 55%, transparent);
}

.access-category-index[b-5uasa003kn] {
    width: 38px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: linear-gradient(145deg, #3294ff, #1265c8);
    box-shadow: 0 5px 12px rgba(25, 119, 229, .23);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.access-category-copy[b-5uasa003kn] { display: grid; gap: .12rem; min-width: max-content; }
.access-category-copy strong[b-5uasa003kn] { color: var(--access-text); font-size: .82rem; font-weight: 900; letter-spacing: .075em; text-transform: uppercase; }
.access-category-copy small[b-5uasa003kn] { color: var(--access-muted); font-size: .68rem; font-weight: 600; letter-spacing: .01em; }
.access-category-rule[b-5uasa003kn] { height: 1px; margin-left: .35rem; background: linear-gradient(90deg, var(--access-border), transparent); }

.access-module-list[b-5uasa003kn] { display: grid; gap: .65rem; }

.access-module-card[b-5uasa003kn] {
    overflow: hidden;
    border: 1px solid var(--access-border);
    border-radius: 16px;
    color: var(--access-text);
    background: var(--access-surface);
    box-shadow: 0 7px 22px color-mix(in srgb, var(--shadow-color, rgba(34, 73, 133, .14)) 48%, transparent);
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.access-module-card:hover[b-5uasa003kn] {
    border-color: color-mix(in srgb, var(--access-blue) 58%, var(--access-border));
    box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow-color, rgba(34, 92, 173, .18)) 65%, transparent);
    transform: translateY(-1px);
}

.access-module-card.has-access[b-5uasa003kn] { border-color: color-mix(in srgb, var(--access-blue) 52%, var(--access-border)); }

.access-module-header[b-5uasa003kn] {
    width: 100%;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto 22px;
    gap: .75rem;
    align-items: center;
    padding: .85rem 1rem;
    border: 0;
    color: var(--access-text);
    background: linear-gradient(135deg, var(--access-surface-raised), var(--access-surface-soft));
    text-align: left;
    cursor: pointer;
}

.access-module-icon[b-5uasa003kn] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--access-blue) 22%, transparent);
    border-radius: 12px;
    color: color-mix(in srgb, var(--access-blue) 88%, var(--access-text));
    background: color-mix(in srgb, var(--access-blue) 12%, var(--access-surface));
    font-size: 1.15rem;
}

.access-module-copy[b-5uasa003kn],
.access-module-master > span:first-child[b-5uasa003kn],
.access-permission-row > span:first-child[b-5uasa003kn] { display: grid; gap: .18rem; min-width: 0; }

.access-module-copy strong[b-5uasa003kn] { color: var(--access-text); font-size: .95rem; }
.access-module-copy small[b-5uasa003kn],
.access-module-master small[b-5uasa003kn],
.access-permission-row small[b-5uasa003kn] { color: var(--access-muted); font-size: .75rem; line-height: 1.35; }

.access-status-badge[b-5uasa003kn] { padding: .28rem .55rem; border-radius: 999px; color: var(--access-muted); background: var(--access-surface-soft); font-size: .68rem; font-weight: 800; text-transform: uppercase; }
.access-status-badge.view[b-5uasa003kn] { color: color-mix(in srgb, var(--access-blue) 88%, var(--access-text)); background: color-mix(in srgb, var(--access-blue) 13%, var(--access-surface)); }
.access-status-badge.manage[b-5uasa003kn] { color: color-mix(in srgb, var(--access-green) 88%, var(--access-text)); background: color-mix(in srgb, var(--access-green) 14%, var(--access-surface)); }
.access-status-badge.custom[b-5uasa003kn] { color: color-mix(in srgb, var(--access-amber) 88%, var(--access-text)); background: color-mix(in srgb, var(--access-amber) 16%, var(--access-surface)); }

.access-chevron[b-5uasa003kn] { color: var(--access-muted); font-size: 1.1rem; transition: transform .2s ease; }
.access-chevron.expanded[b-5uasa003kn] { transform: rotate(180deg); }

.access-module-master[b-5uasa003kn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .72rem 1rem;
    border-top: 1px solid var(--access-border);
    color: var(--access-text);
    background: var(--access-surface);
}

.access-module-master.with-grant-columns[b-5uasa003kn] { grid-template-columns: minmax(0, 1fr) 70px 70px; }
.access-master-control[b-5uasa003kn] { display: grid; gap: .45rem; place-items: center; }
.column-caption[b-5uasa003kn] { color: var(--access-muted); font-size: .63rem; font-weight: 800; text-align: center; text-transform: uppercase; }

.access-module-details[b-5uasa003kn] { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .24s ease; }
.access-module-details.expanded[b-5uasa003kn] { grid-template-rows: 1fr; }
.access-module-details-inner[b-5uasa003kn] { min-height: 0; overflow: hidden; }

.access-permission-row[b-5uasa003kn] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: .75rem;
    align-items: center;
    padding: .72rem 1rem;
    border-top: 1px solid var(--access-border);
    color: var(--access-text);
    background: var(--access-surface-soft);
    transition: background .16s ease;
}

.access-permission-row:hover[b-5uasa003kn] { background: color-mix(in srgb, var(--access-blue) 11%, var(--access-surface)); }
.access-permission-row:has(.grant-switch)[b-5uasa003kn] { grid-template-columns: minmax(0, 1fr) 70px 70px; }
.access-permission-row strong[b-5uasa003kn],
.access-module-master strong[b-5uasa003kn] { color: var(--access-text); font-size: .81rem; }

.access-empty-state[b-5uasa003kn] { padding: .9rem 1rem; border-top: 1px solid var(--access-border); color: var(--access-muted); background: var(--access-surface-soft); font-size: .78rem; }
.access-editor.is-readonly[b-5uasa003kn] { opacity: .86; }

@media (max-width: 760px) {
    .access-editor[b-5uasa003kn] { gap: 1.3rem; }
    .access-category-heading[b-5uasa003kn] { grid-template-columns: 34px minmax(0, 1fr); margin: 0 .15rem; padding: .58rem .65rem; }
    .access-category-index[b-5uasa003kn] { width: 34px; height: 30px; }
    .access-category-copy[b-5uasa003kn] { min-width: 0; }
    .access-category-rule[b-5uasa003kn] { display: none; }
    .access-module-header[b-5uasa003kn] { grid-template-columns: 38px minmax(0, 1fr) auto; }
    .access-chevron[b-5uasa003kn] { display: none; }
    .access-module-master.with-grant-columns[b-5uasa003kn],
    .access-permission-row:has(.grant-switch)[b-5uasa003kn] { grid-template-columns: minmax(0, 1fr) 58px 58px; }
    .column-caption[b-5uasa003kn] { font-size: .56rem; }
}

@media (prefers-reduced-motion: reduce) {
    .access-module-card[b-5uasa003kn],
    .access-chevron[b-5uasa003kn],
    .access-module-details[b-5uasa003kn],
    .access-permission-row[b-5uasa003kn] { transition: none; }
}
/* /Components/Shared/WeeklyManningLiveUpdateIndicator.razor.rz.scp.css */
.weekly-manning-live-indicator[b-dewm9wddyf] {
    --live-update-line: #356fae;
    --live-update-grid: #4a82bd;
    --live-update-dot: #08a8d3;
    --remote-rotation-turns: 0;
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    box-sizing: border-box;
    overflow: visible;
    border: 0;
    border-radius: 50%;
    color: var(--live-update-line);
    background:
        radial-gradient(circle at 48% 44%, rgb(70 130 190 / 9%) 0 28%, transparent 64%),
        linear-gradient(145deg, #edf4fb 0%, #e5eef8 100%);
    box-shadow:
        inset 0 0 8px rgb(56 113 172 / 8%),
        0 1px 4px rgb(24 58 94 / 10%);
    isolation: isolate;
    transition: background 180ms ease, box-shadow 180ms ease;
}

.weekly-manning-live-indicator[b-dewm9wddyf]::after {
    position: absolute;
    z-index: 2;
    inset: 2px;
    border: 1px solid transparent;
    border-radius: inherit;
    content: "";
    opacity: 0;
    pointer-events: none;
}

.weekly-manning-live-indicator .live-update-symbol[b-dewm9wddyf] {
    position: relative;
    z-index: 1;
    display: block;
    width: 44px;
    height: 44px;
    overflow: visible;
}

.weekly-manning-live-indicator .live-update-main-ring[b-dewm9wddyf] {
    fill: none;
    stroke: var(--live-update-line);
    stroke-width: 1.15;
    filter: drop-shadow(0 0 1.4px rgb(53 111 174 / 20%));
    transition: stroke 180ms ease, filter 180ms ease, opacity 180ms ease;
}

.weekly-manning-live-indicator .live-update-arrow-layer[b-dewm9wddyf],
.weekly-manning-live-indicator .live-update-collaboration-layer[b-dewm9wddyf] {
    transform-box: view-box;
    transform-origin: 23px 23px;
}

.weekly-manning-live-indicator .live-update-arrow-layer[b-dewm9wddyf] {
    transform: rotate(0);
}

.weekly-manning-live-indicator .live-update-sync-arrow[b-dewm9wddyf] {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.45;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.weekly-manning-live-indicator .live-update-grid[b-dewm9wddyf] {
    fill: var(--live-update-grid);
    opacity: .88;
    transform-box: fill-box;
    transform-origin: center;
}

.weekly-manning-live-indicator .live-update-collaboration-layer[b-dewm9wddyf] {
    opacity: 0;
    animation: live-update-collaboration-orbit-b-dewm9wddyf 4s linear infinite;
    animation-play-state: paused;
    transition: opacity 340ms ease;
}

.weekly-manning-live-indicator.has-collaborators .live-update-collaboration-layer[b-dewm9wddyf] {
    opacity: 1;
    animation-play-state: running;
}

.weekly-manning-live-indicator .live-update-orbit-dot[b-dewm9wddyf] {
    fill: var(--live-update-dot);
    stroke: color-mix(in srgb, var(--live-update-dot) 36%, #0c4161);
    stroke-width: .55;
    filter: drop-shadow(0 0 1.8px rgb(8 168 211 / 48%));
}

.weekly-manning-live-indicator.is-remote-rotating .live-update-arrow-layer[b-dewm9wddyf] {
    transform: rotate(calc(var(--remote-rotation-turns) * 1turn));
    transition: transform 1200ms cubic-bezier(.36, .05, .22, 1);
}

.weekly-manning-live-indicator.is-active[b-dewm9wddyf] {
    background:
        radial-gradient(circle at 48% 44%, rgb(55 119 185 / 13%) 0 30%, transparent 65%),
        linear-gradient(145deg, #eaf3fc 0%, #dfeaf6 100%);
    box-shadow: inset 0 0 9px rgb(49 111 177 / 11%), 0 1px 5px rgb(28 69 110 / 12%);
}

.weekly-manning-live-indicator.is-active .live-update-main-ring[b-dewm9wddyf] {
    stroke: #2e72bd;
    filter: drop-shadow(0 0 2px rgb(46 114 189 / 27%));
}

.weekly-manning-live-indicator.intensity-bulk .live-update-main-ring[b-dewm9wddyf] {
    stroke: #266bb6;
    filter: drop-shadow(0 0 2.4px rgb(38 107 182 / 31%));
}

.weekly-manning-live-indicator.is-success[b-dewm9wddyf]::after {
    border-color: rgb(54 126 199 / 48%);
    animation: live-update-success-pulse-b-dewm9wddyf 560ms ease-out both;
}

.weekly-manning-live-indicator.is-failure .live-update-main-ring[b-dewm9wddyf] {
    animation: live-update-failure-ring-b-dewm9wddyf 600ms ease-out both;
}

.weekly-manning-live-indicator.is-failure[b-dewm9wddyf]::after {
    border-color: rgb(211 74 88 / 64%);
    animation: live-update-failure-pulse-b-dewm9wddyf 600ms ease-out both;
}

.weekly-manning-live-indicator.is-remote .live-update-grid[b-dewm9wddyf] {
    animation: live-update-grid-remote-b-dewm9wddyf 520ms ease-out both;
}

.weekly-manning-live-indicator.is-remote[b-dewm9wddyf]::after {
    border-color: rgb(53 130 210 / 46%);
    animation: live-update-remote-pulse-b-dewm9wddyf 580ms ease-out both;
}

@keyframes live-update-collaboration-orbit-b-dewm9wddyf {
    to { transform: rotate(360deg); }
}

@keyframes live-update-success-pulse-b-dewm9wddyf {
    0% { opacity: 0; transform: scale(.94); }
    38% { opacity: .58; }
    100% { opacity: 0; transform: scale(1.1); }
}

@keyframes live-update-failure-ring-b-dewm9wddyf {
    0%, 100% { stroke: var(--live-update-line); filter: none; }
    42% { stroke: #d34a58; filter: drop-shadow(0 0 2.5px rgb(211 74 88 / 44%)); }
}

@keyframes live-update-failure-pulse-b-dewm9wddyf {
    0%, 100% { opacity: 0; transform: scale(.96); }
    42% { opacity: .66; transform: scale(1.08); }
}

@keyframes live-update-grid-remote-b-dewm9wddyf {
    0%, 100% { opacity: .88; }
    44% { opacity: 1; fill: #6ba6e4; }
}

@keyframes live-update-remote-pulse-b-dewm9wddyf {
    0% { opacity: 0; transform: scale(.96); }
    38% { opacity: .52; }
    100% { opacity: 0; transform: scale(1.09); }
}

.app-shell.theme-dark .weekly-manning-live-indicator[b-dewm9wddyf] {
    --live-update-line: #75a9e9;
    --live-update-grid: #7eb1ed;
    --live-update-dot: #19bfe8;
    background:
        radial-gradient(circle at 48% 44%, rgb(50 111 178 / 15%) 0 29%, transparent 65%),
        linear-gradient(145deg, #12263e 0%, #0b1a2b 100%);
    box-shadow:
        inset 0 0 9px rgb(58 124 197 / 13%),
        0 1px 5px rgb(1 8 18 / 28%);
}

.app-shell.theme-dark .weekly-manning-live-indicator.is-active[b-dewm9wddyf] {
    background:
        radial-gradient(circle at 48% 44%, rgb(56 124 198 / 21%) 0 31%, transparent 66%),
        linear-gradient(145deg, #142d49 0%, #0c1e32 100%);
    box-shadow: inset 0 0 10px rgb(62 135 216 / 18%), 0 1px 6px rgb(1 8 18 / 31%);
}

.app-shell.theme-dark .weekly-manning-live-indicator.is-active .live-update-main-ring[b-dewm9wddyf] {
    stroke: #83b6f2;
    filter: drop-shadow(0 0 2px rgb(94 165 238 / 29%));
}

@media (prefers-reduced-motion: reduce) {
    .weekly-manning-live-indicator[b-dewm9wddyf],
    .weekly-manning-live-indicator[b-dewm9wddyf]::after,
    .weekly-manning-live-indicator .live-update-main-ring[b-dewm9wddyf],
    .weekly-manning-live-indicator .live-update-arrow-layer[b-dewm9wddyf],
    .weekly-manning-live-indicator .live-update-collaboration-layer[b-dewm9wddyf],
    .weekly-manning-live-indicator .live-update-grid[b-dewm9wddyf],
    .weekly-manning-live-indicator.is-remote-rotating .live-update-arrow-layer[b-dewm9wddyf],
    .weekly-manning-live-indicator.is-success[b-dewm9wddyf]::after,
    .weekly-manning-live-indicator.is-failure .live-update-main-ring[b-dewm9wddyf],
    .weekly-manning-live-indicator.is-failure[b-dewm9wddyf]::after,
    .weekly-manning-live-indicator.is-remote .live-update-grid[b-dewm9wddyf],
    .weekly-manning-live-indicator.is-remote[b-dewm9wddyf]::after {
        animation: none !important;
        transition: none !important;
    }

    .weekly-manning-live-indicator .live-update-collaboration-layer[b-dewm9wddyf],
    .weekly-manning-live-indicator.is-remote-rotating .live-update-arrow-layer[b-dewm9wddyf] {
        transform: rotate(0) !important;
    }

    .weekly-manning-live-indicator.has-collaborators .live-update-collaboration-layer[b-dewm9wddyf] {
        opacity: 1;
    }

    .weekly-manning-live-indicator.is-remote .live-update-grid[b-dewm9wddyf] {
        fill: #6ba6e4;
        opacity: 1;
    }

    .weekly-manning-live-indicator.is-success[b-dewm9wddyf]::after,
    .weekly-manning-live-indicator.is-failure[b-dewm9wddyf]::after,
    .weekly-manning-live-indicator.is-remote[b-dewm9wddyf]::after {
        opacity: .48;
        transform: none;
    }

    .weekly-manning-live-indicator.is-failure .live-update-main-ring[b-dewm9wddyf] {
        stroke: #d34a58;
    }
}
/* /Components/Shared/WeeklyManningToastHost.razor.rz.scp.css */
.weekly-manning-toast-host[b-hvip413ary] {
    position: fixed;
    top: 20px;
    right: 24px;
    z-index: 5000;
    display: grid;
    width: min(360px, calc(100vw - 32px));
    gap: 0.55rem;
    pointer-events: none;
}

.weekly-manning-toast[b-hvip413ary] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.8rem;
    border: 1px solid color-mix(in srgb, #2e9b87 48%, transparent);
    border-radius: 0.7rem;
    color: #163932;
    background: color-mix(in srgb, #ecfffa 96%, transparent);
    box-shadow: 0 10px 28px rgb(12 35 48 / 22%);
    pointer-events: auto;
}

.weekly-manning-toast.is-conflict[b-hvip413ary] {
    border-color: color-mix(in srgb, #d94242 60%, transparent);
    color: #6e1717;
    background: color-mix(in srgb, #fff1f1 97%, transparent);
}

.weekly-manning-toast-copy[b-hvip413ary] {
    display: grid;
    gap: 0.18rem;
}

.weekly-manning-toast-copy span[b-hvip413ary] {
    font-size: 0.82rem;
    line-height: 1.35;
}

.weekly-manning-toast button[b-hvip413ary] {
    border: 0;
    padding: 0.05rem 0.22rem;
    color: inherit;
    background: transparent;
    font: inherit;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.app-shell.theme-dark .weekly-manning-toast[b-hvip413ary] {
    color: #d9fff6;
    background: #173d39;
}

.app-shell.theme-dark .weekly-manning-toast.is-conflict[b-hvip413ary] {
    color: #ffdcdc;
    background: #4a2024;
}

@media (max-width: 600px) {
    .weekly-manning-toast-host[b-hvip413ary] {
        top: 12px;
        right: 16px;
    }
}
/* /Components/WeeklyManning/TbcRequiredHoursDialog.razor.rz.scp.css */
.tbc-hours-backdrop[b-3gpivo5n2z] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(13, 26, 45, 0.42);
    backdrop-filter: blur(3px);
}

.tbc-hours-dialog[b-3gpivo5n2z] {
    width: min(430px, calc(100vw - 32px));
    overflow: hidden;
    border: 1px solid var(--border-color, #b7c9e0);
    border-radius: 18px;
    background: var(--panel-background, #fff);
    box-shadow: 0 24px 70px rgba(8, 27, 54, 0.32);
}

.tbc-hours-dialog header[b-3gpivo5n2z],
.tbc-hours-dialog footer[b-3gpivo5n2z] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
}

.tbc-hours-dialog header[b-3gpivo5n2z] {
    border-bottom: 1px solid var(--border-color, #d8e2ef);
}

.tbc-hours-dialog h2[b-3gpivo5n2z] {
    margin: 2px 0 0;
    color: var(--primary-text, #17243a);
    font-size: 20px;
}

.tbc-hours-eyebrow[b-3gpivo5n2z] {
    color: #1769dc;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.tbc-hours-close[b-3gpivo5n2z] {
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-color, #cdd9e8);
    border-radius: 10px;
    color: var(--secondary-text, #53657d);
    background: transparent;
    font-size: 22px;
    cursor: pointer;
}

.tbc-hours-summary[b-3gpivo5n2z] {
    margin: 0;
    padding: 16px 20px 6px;
    color: var(--secondary-text, #60728c);
    font-size: 12px;
}

.tbc-hours-fields[b-3gpivo5n2z] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: end;
    gap: 10px;
    padding: 14px 20px 18px;
}

.tbc-hours-fields label[b-3gpivo5n2z] {
    display: grid;
    gap: 6px;
    color: var(--secondary-text, #60728c);
    font-size: 11px;
    font-weight: 800;
}

.tbc-hours-fields select[b-3gpivo5n2z] {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--border-color, #b8c9df);
    border-radius: 10px;
    color: var(--primary-text, #17243a);
    background: var(--panel-background, #fff);
    font: inherit;
    font-size: 14px;
}

.tbc-hours-separator[b-3gpivo5n2z] {
    padding-bottom: 12px;
    color: var(--secondary-text, #71839b);
    font-weight: 900;
}

.tbc-hours-error[b-3gpivo5n2z] {
    margin: 0 20px 10px;
    padding: 9px 11px;
    border: 1px solid #ef9da6;
    border-radius: 9px;
    color: #a61f32;
    background: #fff0f2;
    font-size: 11px;
}

.tbc-hours-dialog footer[b-3gpivo5n2z] {
    justify-content: flex-end;
    border-top: 1px solid var(--border-color, #d8e2ef);
    background: color-mix(in srgb, var(--panel-background, #fff) 88%, var(--button-hover, #edf4fc) 12%);
}

.tbc-hours-dialog footer button[b-3gpivo5n2z] {
    min-height: 40px;
    padding: 0 16px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
}

.tbc-hours-cancel[b-3gpivo5n2z] {
    border: 1px solid var(--border-color, #b8c9df);
    color: var(--primary-text, #17243a);
    background: transparent;
}

.tbc-hours-save[b-3gpivo5n2z] {
    border: 1px solid #1769dc;
    color: #fff;
    background: linear-gradient(135deg, #1769dc, #2f9fd5);
    box-shadow: 0 8px 18px rgba(23, 105, 220, 0.23);
}

/* Weekly Manning typography stays local to this viewport-level dialog. */
.tbc-hours-dialog[b-3gpivo5n2z] {
    font-family: var(--font-manning-sans);
}

.tbc-hours-eyebrow[b-3gpivo5n2z],
.tbc-hours-fields select[b-3gpivo5n2z],
.tbc-hours-separator[b-3gpivo5n2z] {
    font-family: var(--font-manning-mono);
    font-variant-numeric: tabular-nums;
}
/* /Components/WeeklyManning/WeeklyManningAbsencesPanel.razor.rz.scp.css */
.internal-absence-calendar[b-zacb19tmy9] {
    display: flex;
    box-sizing: border-box;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    color: var(--primary-text);
    background: var(--panel-background);
    font-family: var(--font-manning-sans);
}

.internal-absence-calendar-header[b-zacb19tmy9] {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) 30px;
    align-items: center;
    gap: 8px;
}

.internal-absence-calendar-title[b-zacb19tmy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.internal-absence-calendar-title strong[b-zacb19tmy9] {
    color: var(--primary-text);
    font-family: var(--font-manning-mono);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.1px;
}

.internal-absence-calendar-nav[b-zacb19tmy9] {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--secondary-text);
    background: transparent;
    box-shadow: none;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: color 120ms ease, border-color 120ms ease, background 120ms ease;
}

.internal-absence-calendar-nav:hover[b-zacb19tmy9] {
    border-color: color-mix(in srgb, #1769dc 48%, var(--border-color) 52%);
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 6%, transparent);
}

.internal-absence-calendar-nav:focus-visible[b-zacb19tmy9] {
    outline: 2px solid color-mix(in srgb, #1769dc 58%, transparent);
    outline-offset: 2px;
}

.internal-absence-modeswitch[b-zacb19tmy9] {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--border-color);
    border-radius: 9px;
    background: color-mix(in srgb, var(--panel-background) 80%, var(--border-color) 20%);
}

.internal-absence-mode-button[b-zacb19tmy9] {
    position: relative;
    z-index: 1;
    min-height: 30px;
    padding: 4px 8px;
    border: 0;
    border-radius: 6px;
    color: var(--secondary-text);
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.2px;
    cursor: pointer;
    transition: background 140ms ease, color 140ms ease;
}

.internal-absence-mode-button:hover[b-zacb19tmy9] {
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 6%, transparent);
}

.internal-absence-mode-button.active[b-zacb19tmy9] {
    color: color-mix(in srgb, #1769dc 82%, var(--primary-text) 18%);
    background: var(--panel-background);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1769dc 34%, var(--border-color) 66%);
}

.internal-absence-mode-button:focus-visible[b-zacb19tmy9] {
    outline: 2px solid color-mix(in srgb, #1769dc 55%, transparent);
    outline-offset: 2px;
}

.internal-absence-calendar-view[b-zacb19tmy9] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
}

.internal-absence-calendar-grid[b-zacb19tmy9] {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 3px;
}

.internal-absence-weekday[b-zacb19tmy9] {
    padding: 2px 0 4px;
    color: var(--secondary-text);
    font-family: var(--font-manning-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-align: center;
    text-transform: uppercase;
}

.internal-absence-day[b-zacb19tmy9] {
    position: relative;
    display: grid;
    box-sizing: border-box;
    min-width: 0;
    min-height: 54px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto;
    gap: 1px 2px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--border-color) 82%, transparent);
    border-radius: 6px;
    color: var(--primary-text);
    background: transparent;
    font-family: var(--font-manning-mono);
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background 120ms ease;
}

.internal-absence-day:hover[b-zacb19tmy9] {
    border-color: color-mix(in srgb, #1769dc 42%, var(--border-color) 58%);
    background: color-mix(in srgb, #1769dc 4%, transparent);
}

.internal-absence-day:focus-visible[b-zacb19tmy9] {
    z-index: 1;
    outline: 2px solid color-mix(in srgb, #1769dc 60%, transparent);
    outline-offset: 1px;
}

.internal-absence-day.is-today[b-zacb19tmy9] {
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #1769dc 72%, transparent);
}

.internal-absence-day.selected[b-zacb19tmy9] {
    border-color: color-mix(in srgb, #1769dc 52%, var(--border-color) 48%);
    background: color-mix(in srgb, #1769dc 9%, var(--panel-background) 91%);
}

.internal-absence-day.weekend[b-zacb19tmy9] {
    color: color-mix(in srgb, var(--primary-text) 78%, var(--secondary-text) 22%);
    background: color-mix(in srgb, var(--border-color) 11%, transparent);
}

.internal-absence-day.outside-month[b-zacb19tmy9] {
    min-height: 54px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: color-mix(in srgb, var(--border-color) 5%, transparent);
}

.internal-absence-day-number[b-zacb19tmy9] {
    align-self: start;
    color: var(--secondary-text);
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.internal-absence-day.is-today .internal-absence-day-number[b-zacb19tmy9] {
    color: #1769dc;
}

.internal-absence-day-count[b-zacb19tmy9] {
    align-self: center;
    justify-self: end;
    color: var(--primary-text);
    font-size: 14px;
    font-weight: 750;
    line-height: 1;
}

.internal-absence-day-count.empty[b-zacb19tmy9] {
    color: color-mix(in srgb, var(--secondary-text) 38%, transparent);
    font-size: 10px;
    font-weight: 500;
}

.internal-absence-statuses[b-zacb19tmy9] {
    display: flex;
    min-width: 0;
    grid-column: 1 / -1;
    align-items: center;
    gap: 3px;
    align-self: end;
}

.internal-absence-status-dot[b-zacb19tmy9] {
    display: inline-block;
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #b79fe0;
}

.internal-absence-status-dot.holiday[b-zacb19tmy9] {
    background: #7fb2ee;
}

.internal-absence-status-dot.sick[b-zacb19tmy9] {
    background: #e79aa0;
}

.internal-absence-status-dot.other[b-zacb19tmy9],
.internal-absence-status-dot.maternity[b-zacb19tmy9] {
    background: #b79fe0;
}

.internal-absence-status-dot.training[b-zacb19tmy9] {
    background: #4bc2a3;
}

.internal-absence-status-dot.half[b-zacb19tmy9] {
    background: #2fb3a4;
}

.internal-absence-half[b-zacb19tmy9] {
    display: inline-flex;
    min-width: 12px;
    height: 12px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, #2fb3a4 58%, transparent);
    border-radius: 4px;
    color: #16796d;
    font-family: var(--font-manning-mono);
    font-size: 8px;
    font-style: normal;
    font-weight: 800;
    line-height: 1;
}

.internal-absence-legend[b-zacb19tmy9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px 10px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 600;
}

.internal-absence-legend span[b-zacb19tmy9] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.internal-absence-day-details[b-zacb19tmy9] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 10px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
}

.internal-absence-day-details h3[b-zacb19tmy9] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0;
    color: var(--secondary-text);
    font-family: var(--font-manning-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
}

.internal-absence-day-details h3 strong[b-zacb19tmy9] {
    color: var(--primary-text);
    font: inherit;
}

.internal-absence-empty[b-zacb19tmy9] {
    margin: 0;
    padding: 14px 6px;
    color: var(--secondary-text);
    font-size: 11.5px;
    line-height: 1.4;
    text-align: center;
}

.internal-absence-detail-list[b-zacb19tmy9] {
    display: flex;
    flex-direction: column;
}

.internal-absence-detail-row[b-zacb19tmy9] {
    display: grid;
    min-width: 0;
    min-height: 38px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 6px 4px;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 64%, transparent);
    color: var(--primary-text);
    background: transparent;
    font-family: var(--font-manning-sans);
    text-align: left;
    cursor: pointer;
}

.internal-absence-detail-row:last-child[b-zacb19tmy9] {
    border-bottom: 0;
}

.internal-absence-detail-row:hover[b-zacb19tmy9] {
    background: color-mix(in srgb, #1769dc 5%, transparent);
}

.internal-absence-detail-row:focus-visible[b-zacb19tmy9] {
    border-radius: 6px;
    outline: 2px solid color-mix(in srgb, #1769dc 58%, transparent);
    outline-offset: -2px;
}

.internal-absence-detail-name[b-zacb19tmy9] {
    min-width: 0;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.internal-absence-detail-status[b-zacb19tmy9] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

.internal-absence-summary[b-zacb19tmy9] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.internal-absence-summary-totals[b-zacb19tmy9] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.internal-absence-summary-totals > div[b-zacb19tmy9] {
    display: flex;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 8px;
}

.internal-absence-summary-totals > div + div[b-zacb19tmy9] {
    border-left: 1px solid var(--border-color);
}

.internal-absence-summary-totals span[b-zacb19tmy9] {
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 650;
}

.internal-absence-summary-totals strong[b-zacb19tmy9] {
    font-family: var(--font-manning-mono);
    font-size: 16px;
}

.internal-absence-mix[b-zacb19tmy9] {
    display: flex;
    max-height: 140px;
    flex-direction: column;
    gap: 7px;
    padding: 9px 10px;
    border: 1px solid color-mix(in srgb, var(--border-color) 78%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--panel-background) 96%, var(--border-color) 4%);
}

.internal-absence-mix h3[b-zacb19tmy9] {
    margin: 0 0 1px;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.internal-absence-mix-row[b-zacb19tmy9] {
    display: grid;
    min-height: 16px;
    grid-template-columns: 68px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 7px;
}

.internal-absence-mix-row > span[b-zacb19tmy9] {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    gap: 6px;
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 650;
}

.internal-absence-mix-row progress[b-zacb19tmy9] {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    appearance: none;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.internal-absence-mix-row progress[b-zacb19tmy9]::-webkit-progress-bar {
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 62%, transparent);
}

.internal-absence-mix-row progress[b-zacb19tmy9]::-webkit-progress-value {
    border-radius: 999px;
    background: #1769dc;
}

.internal-absence-mix-row progress.sick[b-zacb19tmy9]::-webkit-progress-value {
    background: #d84c5f;
}

.internal-absence-mix-row progress.other[b-zacb19tmy9]::-webkit-progress-value {
    background: #d88f29;
}

.internal-absence-mix-row progress[b-zacb19tmy9]::-moz-progress-bar {
    border-radius: 999px;
    background: #1769dc;
}

.internal-absence-mix-row progress.sick[b-zacb19tmy9]::-moz-progress-bar {
    background: #d84c5f;
}

.internal-absence-mix-row progress.other[b-zacb19tmy9]::-moz-progress-bar {
    background: #d88f29;
}

.internal-absence-mix-row strong[b-zacb19tmy9],
.internal-absence-mix-half strong[b-zacb19tmy9] {
    font-family: var(--font-manning-mono);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.internal-absence-mix-half[b-zacb19tmy9] {
    display: flex;
    min-height: 20px;
    align-items: center;
    justify-content: space-between;
    padding-top: 5px;
    border-top: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 650;
}

.internal-absence-mix-half span[b-zacb19tmy9] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.internal-absence-mix-half i[b-zacb19tmy9] {
    color: #209d8a;
    font-style: normal;
    font-weight: 850;
}

.internal-absence-summary-people[b-zacb19tmy9] {
    display: flex;
    flex-direction: column;
}

.internal-absence-summary-people h3[b-zacb19tmy9] {
    margin: 0 0 4px;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 750;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.internal-absence-summary-person[b-zacb19tmy9] {
    display: grid;
    min-height: 34px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 62%, transparent);
}

.internal-absence-summary-person span[b-zacb19tmy9] {
    min-width: 0;
    overflow: hidden;
    font-size: 11.5px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.internal-absence-summary-person strong[b-zacb19tmy9] {
    color: var(--secondary-text);
    font-family: var(--font-manning-mono);
    font-size: 10px;
}

.theme-dark .internal-absence-mode-button.active[b-zacb19tmy9] {
    color: #58d1e4;
    background: color-mix(in srgb, #58d1e4 9%, var(--panel-background) 91%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #58d1e4 38%, var(--border-color) 62%);
}

.theme-dark .internal-absence-half[b-zacb19tmy9] {
    color: #6ad8c9;
}

@media (max-width: 520px) {
    .internal-absence-calendar[b-zacb19tmy9] {
        gap: 10px;
        padding: 10px;
    }

    .internal-absence-calendar-grid[b-zacb19tmy9] {
        gap: 2px;
    }

    .internal-absence-day[b-zacb19tmy9],
    .internal-absence-day.outside-month[b-zacb19tmy9] {
        min-height: 48px;
    }

    .internal-absence-day[b-zacb19tmy9] {
        padding: 4px;
    }

    .internal-absence-day-count[b-zacb19tmy9] {
        font-size: 13px;
    }

    .internal-absence-detail-row[b-zacb19tmy9] {
        gap: 6px;
    }

    .internal-absence-detail-status[b-zacb19tmy9] {
        max-width: 112px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* /Components/WeeklyManning/WeeklyManningAllAreasOverview.razor.rz.scp.css */
.all-areas-overview[b-pxwyf2hil2] {
    --all-areas-action: #bd4d5d;
    --all-areas-action-soft: color-mix(in srgb, #bd4d5d 12%, var(--panel-background, #fff));
    --all-areas-cover: #a96e12;
    --all-areas-cover-soft: color-mix(in srgb, #a96e12 12%, var(--panel-background, #fff));
    --all-areas-above: #6f62a9;
    --all-areas-above-soft: color-mix(in srgb, #6f62a9 12%, var(--panel-background, #fff));
    --all-areas-ready: #238c75;
    --all-areas-ready-soft: color-mix(in srgb, #238c75 12%, var(--panel-background, #fff));
    --all-areas-idle: #69798d;
    --all-areas-idle-soft: color-mix(in srgb, #69798d 11%, var(--panel-background, #fff));
    display: grid;
    min-width: 0;
    gap: 9px;
}

.all-areas-global[b-pxwyf2hil2],
.all-areas-list[b-pxwyf2hil2] {
    min-width: 0;
}

.all-areas-global-grid[b-pxwyf2hil2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    min-width: 0;
    gap: 7px;
}

.global-summary-card[b-pxwyf2hil2] {
    box-sizing: border-box;
    display: grid;
    align-content: center;
    min-width: 0;
    min-height: 82px;
    gap: 3px;
    padding: 9px 11px;
    border: 1px solid var(--readiness-muted-border, var(--border-color));
    border-radius: 9px;
    background: var(--readiness-surface, var(--panel-background));
}

.global-summary-card small[b-pxwyf2hil2],
.area-metric-group small[b-pxwyf2hil2] {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.055em;
    text-transform: uppercase;
}

.global-summary-card strong[b-pxwyf2hil2] {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 15px;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.global-summary-card strong span[b-pxwyf2hil2] {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
}

.global-summary-card > span[b-pxwyf2hil2],
.global-summary-card > div > span[b-pxwyf2hil2] {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 650;
    line-height: 1.2;
}

.global-summary-card .is-additional[b-pxwyf2hil2],
.area-metric-group .is-additional[b-pxwyf2hil2] {
    color: var(--all-areas-above);
    font-weight: 800;
}

.global-availability[b-pxwyf2hil2],
.global-production[b-pxwyf2hil2] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.global-availability > div[b-pxwyf2hil2],
.global-production > div[b-pxwyf2hil2] {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.global-metric-icon[b-pxwyf2hil2] {
    display: inline-grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 8px;
    background: color-mix(in srgb, var(--readiness-available, #287fa8) 14%, transparent);
    color: var(--readiness-available, #287fa8);
    font-size: 15px;
    font-weight: 900;
}

.global-mix-track[b-pxwyf2hil2] {
    display: flex;
    height: 4px;
    margin-top: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--all-areas-idle-soft);
}

.global-mix-track .is-permanent[b-pxwyf2hil2] {
    background: var(--all-areas-ready);
}

.global-mix-track .is-agency[b-pxwyf2hil2] {
    background: #6279bd;
}

.global-attention[b-pxwyf2hil2] {
    --area-status: var(--all-areas-idle);
    --area-status-soft: var(--all-areas-idle-soft);
    border-left: 3px solid var(--area-status);
}

.global-attention-heading[b-pxwyf2hil2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
    gap: 6px;
}

.global-status-badge[b-pxwyf2hil2] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 4px;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--area-status) 34%, transparent);
    border-radius: 999px;
    background: var(--area-status-soft);
    color: var(--area-status) !important;
    font-size: 8px !important;
    font-weight: 850 !important;
    white-space: nowrap;
}

.global-status-badge i[b-pxwyf2hil2] {
    font-style: normal;
}

.all-areas-list[b-pxwyf2hil2] {
    display: grid;
    gap: 6px;
}

.all-areas-card[b-pxwyf2hil2] {
    --area-status: var(--all-areas-idle);
    --area-status-soft: var(--all-areas-idle-soft);
    box-sizing: border-box;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--area-status) 26%, var(--border-color));
    border-left: 4px solid var(--area-status);
    border-radius: 9px;
    background: color-mix(in srgb, var(--area-status-soft) 14%, var(--panel-background));
}

.all-areas-card.is-action-required[b-pxwyf2hil2],
.area-day-status.is-action-required[b-pxwyf2hil2],
.global-attention.is-action-required[b-pxwyf2hil2] {
    --area-status: var(--all-areas-action);
    --area-status-soft: var(--all-areas-action-soft);
}

.all-areas-card.is-cover-pending[b-pxwyf2hil2],
.area-day-status.is-cover-pending[b-pxwyf2hil2],
.global-attention.is-cover-pending[b-pxwyf2hil2] {
    --area-status: var(--all-areas-cover);
    --area-status-soft: var(--all-areas-cover-soft);
}

.all-areas-card.is-above-plan[b-pxwyf2hil2],
.area-day-status.is-above-plan[b-pxwyf2hil2],
.global-attention.is-above-plan[b-pxwyf2hil2] {
    --area-status: var(--all-areas-above);
    --area-status-soft: var(--all-areas-above-soft);
}

.all-areas-card.is-ready[b-pxwyf2hil2],
.area-day-status.is-ready[b-pxwyf2hil2],
.global-attention.is-ready[b-pxwyf2hil2] {
    --area-status: var(--all-areas-ready);
    --area-status-soft: var(--all-areas-ready-soft);
}

.all-areas-card.is-no-production[b-pxwyf2hil2],
.area-day-status.is-no-production[b-pxwyf2hil2],
.global-attention.is-no-production[b-pxwyf2hil2] {
    --area-status: var(--all-areas-idle);
    --area-status-soft: var(--all-areas-idle-soft);
}

.all-areas-card.is-compact-active[b-pxwyf2hil2] {
    display: grid;
    grid-template-columns:
        minmax(180px, 1.25fr)
        minmax(105px, 0.78fr)
        minmax(90px, 0.68fr)
        minmax(90px, 0.66fr)
        minmax(105px, 0.76fr)
        minmax(330px, 2.15fr)
        auto;
    align-items: center;
    min-height: 78px;
    gap: 11px;
    padding: 7px 9px;
}

.all-areas-card.is-compact-inactive[b-pxwyf2hil2] {
    display: grid;
    grid-template-columns: minmax(230px, 1.15fr) minmax(250px, 2fr) auto auto;
    align-items: center;
    min-height: 52px;
    gap: 14px;
    padding: 6px 9px;
}

.area-card-heading[b-pxwyf2hil2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    min-width: 0;
    gap: 7px;
}

.area-card-title[b-pxwyf2hil2] {
    display: flex;
    align-items: center;
    flex: 1 1 140px;
    min-width: 0;
    gap: 8px;
}

.area-card-title > div[b-pxwyf2hil2] {
    min-width: 0;
}

.area-card-heading h4[b-pxwyf2hil2] {
    overflow: hidden;
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-card-title div > span[b-pxwyf2hil2] {
    display: block;
    overflow: hidden;
    margin-top: 2px;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-status-icon[b-pxwyf2hil2] {
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    background: var(--area-status);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    font-weight: 900;
}

.area-status-label[b-pxwyf2hil2] {
    flex: 0 0 auto;
    padding: 2px 5px;
    border: 1px solid color-mix(in srgb, var(--area-status) 36%, transparent);
    border-radius: 999px;
    background: var(--area-status-soft);
    color: var(--area-status);
    font-size: 8px;
    font-weight: 850;
    white-space: nowrap;
}

.area-metric-group[b-pxwyf2hil2] {
    display: grid;
    align-content: center;
    min-width: 0;
    gap: 2px;
}

.area-metric-group strong[b-pxwyf2hil2] {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    font-weight: 850;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-metric-group > span[b-pxwyf2hil2] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.area-card-days[b-pxwyf2hil2] {
    display: grid;
    grid-template-columns: repeat(5, minmax(56px, 1fr));
    min-width: 0;
    gap: 4px;
}

.area-day-status[b-pxwyf2hil2] {
    --area-status: var(--all-areas-idle);
    --area-status-soft: var(--all-areas-idle-soft);
    display: grid;
    min-width: 0;
    min-height: 48px;
    align-content: center;
    justify-items: center;
    gap: 1px;
    padding: 3px 4px;
    border: 1px solid color-mix(in srgb, var(--area-status) 30%, var(--border-color));
    border-radius: 7px;
    background: color-mix(in srgb, var(--area-status-soft) 50%, var(--panel-background));
    color: var(--area-status);
    text-align: center;
}

.area-day-status b[b-pxwyf2hil2] {
    overflow: hidden;
    max-width: 100%;
    font-size: 8px;
    line-height: 1;
    text-overflow: ellipsis;
    text-transform: uppercase;
}

.area-day-status strong[b-pxwyf2hil2] {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.area-day-status small[b-pxwyf2hil2] {
    overflow: hidden;
    max-width: 100%;
    font-size: 8px;
    font-weight: 800;
    line-height: 1;
    text-overflow: ellipsis;
}

.all-areas-card.is-compact-inactive p[b-pxwyf2hil2] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 650;
}

.area-inactive-days[b-pxwyf2hil2] {
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 750;
    white-space: nowrap;
}

.open-area-button[b-pxwyf2hil2] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 28px;
    padding: 4px 5px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--area-status);
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    white-space: nowrap;
    cursor: pointer;
}

.open-area-button:hover[b-pxwyf2hil2] {
    background: var(--area-status-soft);
}

.open-area-button:focus-visible[b-pxwyf2hil2] {
    outline: 3px solid color-mix(in srgb, var(--area-status) 35%, transparent);
    outline-offset: 2px;
}

.all-areas-empty[b-pxwyf2hil2] {
    display: grid;
    gap: 3px;
    padding: 18px;
    border: 1px dashed var(--border-color);
    border-radius: 9px;
    color: var(--text-secondary);
    text-align: center;
}

.all-areas-empty strong[b-pxwyf2hil2] {
    color: var(--text-primary);
}

@container (max-width: 1000px) {
    .all-areas-global-grid[b-pxwyf2hil2] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .all-areas-card.is-compact-active[b-pxwyf2hil2] {
        grid-template-areas:
            "identity coverage staffing output mix open"
            "days days days days days open";
        grid-template-columns:
            minmax(170px, 1.2fr)
            repeat(4, minmax(82px, 0.8fr))
            auto;
        min-height: 96px;
        row-gap: 6px;
    }

    .is-compact-active .area-card-heading[b-pxwyf2hil2] {
        grid-area: identity;
    }

    .is-compact-active .area-coverage[b-pxwyf2hil2] {
        grid-area: coverage;
    }

    .is-compact-active .area-staffing[b-pxwyf2hil2] {
        grid-area: staffing;
    }

    .is-compact-active .area-output[b-pxwyf2hil2] {
        grid-area: output;
    }

    .is-compact-active .area-mix[b-pxwyf2hil2] {
        grid-area: mix;
    }

    .is-compact-active .area-card-days[b-pxwyf2hil2] {
        grid-area: days;
    }

    .is-compact-active .open-area-button[b-pxwyf2hil2] {
        grid-area: open;
        align-self: stretch;
    }

    .all-areas-card.is-compact-inactive[b-pxwyf2hil2] {
        grid-template-columns: minmax(210px, 1fr) minmax(220px, 1.7fr) auto auto;
    }
}

@container (max-width: 760px) {
    .all-areas-global-grid[b-pxwyf2hil2] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .global-attention[b-pxwyf2hil2] {
        grid-column: 1 / -1;
    }

    .all-areas-card.is-compact-active[b-pxwyf2hil2] {
        grid-template-areas:
            "identity identity"
            "coverage staffing"
            "output mix"
            "days days"
            "open open";
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
        gap: 8px 12px;
        padding: 9px;
    }

    .is-compact-active .open-area-button[b-pxwyf2hil2] {
        min-height: 30px;
    }

    .all-areas-card.is-compact-inactive[b-pxwyf2hil2] {
        grid-template-areas:
            "identity open"
            "message message"
            "inactive inactive";
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 5px 10px;
        padding: 8px 9px;
    }

    .is-compact-inactive .area-card-heading[b-pxwyf2hil2] {
        grid-area: identity;
    }

    .is-compact-inactive p[b-pxwyf2hil2] {
        grid-area: message;
    }

    .is-compact-inactive .area-inactive-days[b-pxwyf2hil2] {
        grid-area: inactive;
    }

    .is-compact-inactive .open-area-button[b-pxwyf2hil2] {
        grid-area: open;
    }
}

@container (max-width: 480px) {
    .all-areas-global-grid[b-pxwyf2hil2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .global-attention[b-pxwyf2hil2] {
        grid-column: auto;
    }

    .global-summary-card[b-pxwyf2hil2] {
        min-height: 70px;
    }

    .area-card-heading[b-pxwyf2hil2] {
        align-items: flex-start;
    }

    .area-card-days[b-pxwyf2hil2] {
        grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .open-area-button[b-pxwyf2hil2] {
        transition: none;
    }
}
/* /Components/WeeklyManning/WeeklyManningBulkClearIndicator.razor.rz.scp.css */
.bulk-clear-indicator[b-8x9rbx5a0m] {
    position: absolute;
    top: 0.25rem;
    right: 0.3rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.18rem;
    min-width: 1.65rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    border: 1px solid color-mix(in srgb, #ef4444 70%, transparent);
    border-radius: 999px;
    color: #fff;
    background: color-mix(in srgb, #b91c1c 82%, transparent);
    box-shadow: 0 0 0.55rem color-mix(in srgb, #ef4444 32%, transparent);
    font-size: 0.63rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.bulk-clear-indicator svg[b-8x9rbx5a0m] {
    width: 0.72rem;
    height: 0.72rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.bulk-clear-indicator.is-confirmed[b-8x9rbx5a0m] {
    background: #dc2626;
    border-color: #fecaca;
    box-shadow: 0 0 0.8rem color-mix(in srgb, #ef4444 58%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    .bulk-clear-indicator[b-8x9rbx5a0m] {
        transition: none;
    }
}
/* /Components/WeeklyManning/WeeklyManningReadinessOverview.razor.rz.scp.css */
.staffing-readiness-cockpit[b-2tbhe234d8] {
    --readiness-shell: color-mix(in srgb, var(--panel-background, #fff) 96%, #eaf2fb 4%);
    --readiness-surface: color-mix(in srgb, var(--panel-background, #fff) 89%, #e8f1fb 11%);
    --readiness-raised: var(--panel-background, #fff);
    --readiness-border: color-mix(in srgb, var(--border-color, #cad7e7) 82%, #8aa6c6 18%);
    --readiness-muted-border: color-mix(in srgb, var(--border-color, #cad7e7) 72%, transparent 28%);
    --readiness-teal: #238c75;
    --readiness-teal-soft: #d9f1ea;
    --readiness-violet: #6f62a9;
    --readiness-violet-soft: #e9e5f5;
    --readiness-agency-mix: #6279bd;
    --readiness-available: #287fa8;
    --readiness-amber: #a96e12;
    --readiness-amber-soft: #faebc8;
    --readiness-coral: #bd4d5d;
    --readiness-coral-soft: #f7dfe2;
    --readiness-slate: #69798d;
    --readiness-slate-soft: #edf1f5;
    --workforce-training: #0e8f68;
    --workforce-holiday: #1a6fd4;
    --workforce-sick: #d1323d;
    --workforce-other: #7a45cf;
    --workforce-maternity: #a06a12;
    container-type: inline-size;
    position: relative;
    display: grid;
    min-width: 0;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--readiness-border);
    border-radius: 14px;
    background: var(--readiness-shell);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--shadow-color, rgba(15, 35, 60, 0.18)) 72%, transparent 28%);
    animation: readiness-shell-in-b-2tbhe234d8 220ms ease-out both;
}

.readiness-scope-toolbar[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 33px;
    gap: 10px;
}

.readiness-scope-toolbar.is-all-areas[b-2tbhe234d8] {
    min-height: 33px;
    padding: 0;
    border-bottom: 0;
}

.readiness-all-areas-heading[b-2tbhe234d8] {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 8px;
}

.readiness-all-areas-heading h2[b-2tbhe234d8] {
    margin: 0;
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}

.readiness-all-areas-heading span[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-scope-toggle[b-2tbhe234d8] {
    display: inline-grid;
    grid-column: 2;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    justify-self: end;
    gap: 2px;
    padding: 2px;
    border: 1px solid var(--readiness-muted-border);
    border-radius: 9px;
    background: var(--readiness-surface);
}

.readiness-scope-toggle button[b-2tbhe234d8] {
    min-height: 27px;
    padding: 4px 10px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
    cursor: pointer;
}

.readiness-scope-toggle button.active[b-2tbhe234d8] {
    background: var(--readiness-raised);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-color, rgba(15, 35, 60, 0.18)) 56%, transparent 44%);
    color: var(--text-primary);
}

.readiness-scope-toggle button:focus-visible[b-2tbhe234d8] {
    outline: 3px solid color-mix(in srgb, var(--readiness-available) 34%, transparent);
    outline-offset: 2px;
}

#current-area-readiness-panel[b-2tbhe234d8] {
    display: grid;
    min-width: 0;
    gap: 12px;
}

#current-area-readiness-panel[hidden][b-2tbhe234d8] {
    display: none;
}

#all-areas-readiness-panel[b-2tbhe234d8] {
    min-width: 0;
}

.readiness-hero[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.8fr);
    min-width: 0;
    gap: 12px;
}

.readiness-score-panel[b-2tbhe234d8],
.readiness-facts[b-2tbhe234d8] {
    border: 1px solid var(--readiness-muted-border);
    border-radius: 11px;
    background: var(--readiness-raised);
}

.readiness-score-panel[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: 8px 12px;
    padding: 13px 15px;
}

.readiness-heading[b-2tbhe234d8] {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.readiness-heading h2[b-2tbhe234d8] {
    margin: 1px 0 0;
    color: var(--text-primary);
    font-size: 18px;
    line-height: 1.1;
    letter-spacing: -0.015em;
}

.readiness-eyebrow[b-2tbhe234d8],
.readiness-week-range[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.105em;
    text-transform: uppercase;
}

.readiness-week-range[b-2tbhe234d8] {
    padding-top: 2px;
    white-space: nowrap;
}

.readiness-score[b-2tbhe234d8] {
    display: flex;
    align-items: baseline;
    gap: 7px;
    min-width: 0;
}

.readiness-score strong[b-2tbhe234d8] {
    color: var(--readiness-teal);
    font-size: clamp(36px, 2vw, 44px);
    line-height: 1;
    letter-spacing: -0.055em;
}

.readiness-score strong.no-running[b-2tbhe234d8] {
    color: var(--readiness-slate);
}

.readiness-score span[b-2tbhe234d8] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 750;
    line-height: 1.15;
    text-overflow: ellipsis;
}

.readiness-expected-score[b-2tbhe234d8] {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.readiness-expected-score span[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 11px;
}

.readiness-expected-score strong[b-2tbhe234d8] {
    color: var(--readiness-violet);
    font-size: 16px;
}

.readiness-track[b-2tbhe234d8] {
    grid-column: 1 / -1;
    display: flex;
    height: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--readiness-slate-soft);
}

.readiness-track > span[b-2tbhe234d8] {
    min-width: 0;
    transform-origin: left center;
    animation: readiness-progress-draw-b-2tbhe234d8 280ms ease-out both;
    transition: width 240ms ease-out;
}

.readiness-track .is-assigned[b-2tbhe234d8] {
    background: var(--readiness-teal);
}

.readiness-track .is-expected[b-2tbhe234d8] {
    background: var(--readiness-violet);
}

.readiness-track .is-to-fill[b-2tbhe234d8] {
    background: var(--readiness-coral);
}

.readiness-legend[b-2tbhe234d8] {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 5px 14px;
    padding-top: 2px;
}

.readiness-legend span[b-2tbhe234d8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.readiness-legend span[b-2tbhe234d8]::before {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.readiness-legend .is-assigned[b-2tbhe234d8] {
    color: var(--readiness-teal);
}

.readiness-legend .is-expected[b-2tbhe234d8] {
    color: var(--readiness-violet);
}

.readiness-legend .is-to-fill[b-2tbhe234d8] {
    color: var(--readiness-coral);
}

.readiness-facts[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    overflow: hidden;
}

.readiness-facts > div[b-2tbhe234d8] {
    min-width: 0;
    padding: 11px 12px 10px;
    border-right: 1px solid var(--readiness-muted-border);
    border-bottom: 1px solid var(--readiness-muted-border);
}

.readiness-facts > div:nth-child(4n)[b-2tbhe234d8] {
    border-right: 0;
}

.readiness-facts > div:nth-last-child(-n + 4)[b-2tbhe234d8] {
    border-bottom: 0;
}

.readiness-facts dt[b-2tbhe234d8] {
    overflow: hidden;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.075em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.readiness-facts dd[b-2tbhe234d8] {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 4px 0 0;
    color: var(--text-primary);
    font-size: clamp(20px, 1.15vw, 24px);
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

.readiness-facts dd span[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.readiness-facts small[b-2tbhe234d8] {
    display: block;
    overflow: hidden;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-facts small.staffing-level-summary[b-2tbhe234d8] {
    color: var(--readiness-teal);
    font-weight: 800;
}

.readiness-facts .is-expected dd[b-2tbhe234d8] {
    color: var(--readiness-violet);
}

.readiness-facts .is-attention dd[b-2tbhe234d8] {
    color: var(--readiness-coral);
}

.readiness-facts .is-training dd[b-2tbhe234d8] {
    color: var(--workforce-training);
}

.readiness-facts .is-available dd[b-2tbhe234d8] {
    color: var(--readiness-available);
}

.readiness-facts .is-workforce-mix[b-2tbhe234d8] {
    cursor: default;
}

.readiness-facts .is-workforce-mix dt[b-2tbhe234d8],
.readiness-facts .is-available dt[b-2tbhe234d8] {
    font-size: 9.5px;
    letter-spacing: 0.055em;
}

.readiness-facts .is-workforce-mix:focus-visible[b-2tbhe234d8] {
    position: relative;
    z-index: 1;
    outline: 2px solid color-mix(in srgb, var(--focus-ring, #4b8fd8) 72%, transparent 28%);
    outline-offset: -3px;
}

.readiness-facts dd.workforce-mix-values[b-2tbhe234d8] {
    align-items: start;
    justify-content: space-between;
    gap: 5px;
    margin-top: 3px;
}

.readiness-facts .workforce-mix-values > span[b-2tbhe234d8] {
    display: grid;
    gap: 1px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 9px;
    font-weight: 750;
    line-height: 1;
}

.readiness-facts .workforce-mix-values > span:last-child[b-2tbhe234d8] {
    justify-items: end;
    text-align: right;
}

.readiness-facts .workforce-mix-values i[b-2tbhe234d8] {
    overflow: hidden;
    max-width: 100%;
    font-size: 9px;
    font-style: normal;
    text-overflow: ellipsis;
}

.readiness-facts .workforce-mix-values b[b-2tbhe234d8] {
    color: var(--readiness-teal);
    font-size: 13px;
}

.readiness-facts .workforce-mix-values .is-agency b[b-2tbhe234d8] {
    color: var(--readiness-agency-mix);
}

.workforce-mix-track[b-2tbhe234d8],
.workforce-mix-detail-track[b-2tbhe234d8] {
    display: flex;
    height: 6px;
    overflow: hidden;
    margin-top: 6px;
    border-radius: 999px;
    background: var(--readiness-slate-soft);
}

.workforce-mix-track > span[b-2tbhe234d8],
.workforce-mix-detail-track > span[b-2tbhe234d8] {
    min-width: 0;
    transform-origin: left center;
    animation: readiness-progress-draw-b-2tbhe234d8 280ms ease-out both;
    transition: width 240ms ease-out;
}

.workforce-mix-track .is-permanent[b-2tbhe234d8],
.workforce-mix-detail-track .is-permanent[b-2tbhe234d8] {
    background: var(--readiness-teal);
}

.workforce-mix-track .is-agency[b-2tbhe234d8],
.workforce-mix-detail-track .is-agency[b-2tbhe234d8] {
    background: var(--readiness-agency-mix);
}

.readiness-facts dd.workforce-mix-empty[b-2tbhe234d8] {
    margin-top: 7px;
    color: var(--readiness-slate);
    font-size: 14px;
    line-height: 1.05;
}

.workforce-mix-detail-track[b-2tbhe234d8] {
    height: 8px;
    margin-top: 12px;
}

.workforce-mix-detail-card > header strong[b-2tbhe234d8] {
    color: var(--text-primary);
}

.workforce-mix-detail-card dl > div:first-child dd[b-2tbhe234d8] {
    color: var(--readiness-teal);
}

.workforce-mix-detail-card dl > div:nth-child(2) dd[b-2tbhe234d8] {
    color: var(--readiness-agency-mix);
}

.readiness-days[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    min-width: 0;
}

.readiness-day-segment[b-2tbhe234d8] {
    position: relative;
    display: grid;
    min-width: 0;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid var(--readiness-muted-border);
    border-radius: 10px;
    color: var(--text-primary);
    background: var(--readiness-raised);
    text-align: left;
    cursor: pointer;
    animation: readiness-day-in-b-2tbhe234d8 180ms ease-out both;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.readiness-day-segment:nth-child(2)[b-2tbhe234d8] {
    animation-delay: 24ms;
}

.readiness-day-segment:nth-child(3)[b-2tbhe234d8] {
    animation-delay: 48ms;
}

.readiness-day-segment:nth-child(4)[b-2tbhe234d8] {
    animation-delay: 72ms;
}

.readiness-day-segment:nth-child(5)[b-2tbhe234d8] {
    animation-delay: 96ms;
}

.readiness-day-segment:hover[b-2tbhe234d8] {
    border-color: var(--readiness-border);
    box-shadow: 0 5px 14px color-mix(in srgb, var(--shadow-color, rgba(15, 35, 60, 0.16)) 58%, transparent 42%);
    transform: translateY(-1px);
}

.readiness-day-segment:focus-visible[b-2tbhe234d8] {
    outline: 2px solid color-mix(in srgb, var(--focus-ring, #4b8fd8) 72%, transparent 28%);
    outline-offset: 2px;
}

.readiness-day-segment.is-selected[b-2tbhe234d8] {
    border-color: color-mix(in srgb, var(--focus-ring, #4b8fd8) 62%, var(--readiness-border) 38%);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--focus-ring, #4b8fd8) 20%, transparent 80%);
}

.readiness-day-segment.is-today[b-2tbhe234d8]::before {
    position: absolute;
    top: -1px;
    right: 12px;
    left: 12px;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: var(--readiness-teal);
    content: "";
}

.readiness-day-segment header[b-2tbhe234d8] {
    display: flex;
    align-items: center;
    gap: 5px;
}

.readiness-day-segment header strong[b-2tbhe234d8] {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.readiness-day-segment header span[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 11px;
}

.readiness-day-segment header i[b-2tbhe234d8] {
    margin-left: auto;
    padding: 2px 6px;
    border-radius: 999px;
    color: var(--readiness-teal);
    background: var(--readiness-teal-soft);
    font-size: 11px;
    font-style: normal;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.readiness-day-score[b-2tbhe234d8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 5px;
}

.readiness-day-score strong[b-2tbhe234d8] {
    overflow: hidden;
    color: var(--text-primary);
    font-size: clamp(16px, 0.9vw, 18px);
    line-height: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-day-score strong span[b-2tbhe234d8] {
    margin-left: 3px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
}

.readiness-day-score > span[b-2tbhe234d8] {
    color: var(--readiness-teal);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.readiness-day-score.no-running strong[b-2tbhe234d8] {
    color: var(--readiness-slate);
    font-size: 18px;
}

.readiness-day-score.no-running span[b-2tbhe234d8] {
    overflow: hidden;
    color: var(--readiness-slate);
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-day-support[b-2tbhe234d8] {
    overflow: hidden;
    color: var(--readiness-available);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-day-arithmetic[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 5px 10px;
}

.readiness-day-arithmetic span[b-2tbhe234d8] {
    display: flex;
    justify-content: space-between;
    gap: 4px;
    min-width: 0;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.readiness-day-arithmetic b[b-2tbhe234d8] {
    color: var(--text-primary);
    font-size: 12px;
}

.readiness-day-segment footer[b-2tbhe234d8] {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 8px;
    padding-top: 6px;
    border-top: 1px solid var(--readiness-muted-border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 650;
    line-height: 1.2;
}

.readiness-day-segment footer span:not(:last-child)[b-2tbhe234d8]::after {
    margin-left: 7px;
    color: var(--readiness-border);
    content: "·";
}

.workforce-availability-strip[b-2tbhe234d8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--readiness-muted-border);
    border-radius: 9px;
    background: var(--readiness-surface);
}

.workforce-availability-strip > strong[b-2tbhe234d8] {
    margin-right: 2px;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.workforce-availability-strip > span[b-2tbhe234d8] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-secondary);
    font-size: 11px;
    white-space: nowrap;
}

.workforce-availability-strip > span[b-2tbhe234d8]::before {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: currentColor;
    content: "";
}

.workforce-availability-strip b[b-2tbhe234d8] {
    color: var(--text-primary);
    font-size: 12px;
}

.workforce-availability-strip .is-holiday[b-2tbhe234d8] {
    color: var(--workforce-holiday);
}

.workforce-availability-strip .is-sick[b-2tbhe234d8] {
    color: var(--workforce-sick);
}

.workforce-availability-strip .is-training[b-2tbhe234d8] {
    color: var(--workforce-training);
}

.workforce-availability-strip .is-maternity[b-2tbhe234d8] {
    color: var(--workforce-maternity);
}

.workforce-availability-strip .is-other[b-2tbhe234d8] {
    color: var(--workforce-other);
}

.readiness-attention[b-2tbhe234d8] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 9px 12px;
    border-left: 3px solid var(--readiness-coral);
    border-radius: 7px;
    background: color-mix(in srgb, var(--readiness-coral-soft) 55%, var(--readiness-raised) 45%);
}

.readiness-attention span[b-2tbhe234d8] {
    color: var(--readiness-coral);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.085em;
    text-transform: uppercase;
}

.readiness-attention strong[b-2tbhe234d8] {
    overflow: hidden;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.readiness-attention.is-cover-pending[b-2tbhe234d8] {
    border-left-color: var(--readiness-violet);
    background: color-mix(in srgb, var(--readiness-violet-soft) 55%, var(--readiness-raised) 45%);
}

.readiness-attention.is-cover-pending span[b-2tbhe234d8] {
    color: var(--readiness-violet);
}

.readiness-attention.is-above-plan[b-2tbhe234d8] {
    border-left-color: var(--readiness-available);
    background: color-mix(in srgb, var(--readiness-available) 12%, var(--readiness-raised) 88%);
}

.readiness-attention.is-above-plan span[b-2tbhe234d8] {
    color: var(--readiness-available);
}

.readiness-attention.is-fully-staffed[b-2tbhe234d8] {
    border-left-color: var(--readiness-teal);
    background: color-mix(in srgb, var(--readiness-teal-soft) 55%, var(--readiness-raised) 45%);
}

.readiness-attention.is-fully-staffed span[b-2tbhe234d8] {
    color: var(--readiness-teal);
}

.readiness-attention.is-no-production[b-2tbhe234d8] {
    border-left-color: var(--readiness-slate);
    background: color-mix(in srgb, var(--readiness-slate-soft) 62%, var(--readiness-raised) 38%);
}

.readiness-attention.is-no-production span[b-2tbhe234d8] {
    color: var(--readiness-slate);
}

.line-readiness-section[b-2tbhe234d8] {
    min-width: 0;
    overflow: visible;
    border: 1px solid var(--readiness-muted-border);
    border-radius: 10px;
    background: var(--readiness-raised);
}

.line-readiness-heading[b-2tbhe234d8] {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 8px 12px;
}

.line-readiness-title-row[b-2tbhe234d8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.line-readiness-heading h3[b-2tbhe234d8] {
    margin: 0;
    color: var(--text-primary);
    font-size: 13px;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}

.line-readiness-heading > div > span[b-2tbhe234d8] {
    display: block;
    margin-top: 3px;
    color: var(--text-secondary);
    font-size: 11px;
}

.line-readiness-toggle[b-2tbhe234d8] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 5px 9px;
    border: 1px solid var(--readiness-muted-border);
    border-radius: 7px;
    color: var(--text-secondary);
    background: var(--readiness-surface);
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.line-readiness-toggle:hover[b-2tbhe234d8] {
    border-color: var(--readiness-border);
    color: var(--text-primary);
}

.line-readiness-toggle:focus-visible[b-2tbhe234d8] {
    outline: 2px solid color-mix(in srgb, var(--focus-ring, #4b8fd8) 72%, transparent 28%);
    outline-offset: 2px;
}

.line-readiness-toggle svg[b-2tbhe234d8] {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
    transition: transform 150ms ease;
}

.line-readiness-toggle svg.is-expanded[b-2tbhe234d8] {
    transform: rotate(180deg);
}

.line-readiness-scroll[b-2tbhe234d8] {
    overflow-x: auto;
    border-top: 1px solid var(--readiness-muted-border);
}

.line-readiness-matrix[b-2tbhe234d8] {
    min-width: 900px;
}

.line-readiness-row[b-2tbhe234d8] {
    display: grid;
    grid-template-columns: minmax(160px, 0.8fr) repeat(5, minmax(138px, 1fr));
    gap: 6px;
    align-items: stretch;
    padding: 5px 7px;
    border-bottom: 1px solid var(--readiness-muted-border);
    animation: readiness-row-in-b-2tbhe234d8 170ms ease-out both;
}

.line-readiness-row:last-child[b-2tbhe234d8] {
    border-bottom: 0;
}

.line-readiness-row.is-header[b-2tbhe234d8] {
    position: sticky;
    top: 0;
    z-index: 1;
    align-items: center;
    padding-top: 7px;
    padding-bottom: 7px;
    color: var(--text-secondary);
    background: var(--readiness-surface);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.055em;
    text-align: center;
    text-transform: uppercase;
}

.line-readiness-row.is-header > span:first-child[b-2tbhe234d8] {
    padding-left: 4px;
    text-align: left;
}

.line-readiness-row.is-header .is-today[b-2tbhe234d8] {
    color: var(--readiness-teal);
}

.line-readiness-name[b-2tbhe234d8] {
    align-self: center;
    overflow: hidden;
    padding: 0 7px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-readiness-cell[b-2tbhe234d8] {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: center;
    min-width: 0;
    min-height: 38px;
    padding: 6px 22px 6px 8px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: var(--text-primary);
    background: var(--readiness-surface);
    font: inherit;
    text-align: center;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.line-readiness-cell:hover[b-2tbhe234d8] {
    z-index: 2;
    box-shadow: 0 4px 12px color-mix(in srgb, var(--shadow-color, rgba(15, 35, 60, 0.16)) 64%, transparent 36%);
    transform: translateY(-1px);
}

.line-readiness-cell:focus-visible[b-2tbhe234d8] {
    z-index: 3;
    outline: 2px solid color-mix(in srgb, var(--focus-ring, #4b8fd8) 76%, transparent 24%);
    outline-offset: 1px;
}

.line-readiness-cell strong[b-2tbhe234d8] {
    overflow: hidden;
    max-width: 100%;
    font-size: 12px;
    line-height: 1.1;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-readiness-cell span[b-2tbhe234d8] {
    overflow: hidden;
    max-width: 100%;
    margin-top: 2px;
    font-size: 11px;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.line-readiness-cell.has-additional-support > span[b-2tbhe234d8] {
    padding-right: 54px;
}

.line-readiness-cell small.additional-support-indicator[b-2tbhe234d8] {
    position: absolute;
    right: 5px;
    bottom: 4px;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 10px);
    padding: 2px 4px;
    border: 1px solid color-mix(in srgb, currentColor 32%, transparent 68%);
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 10%, transparent 90%);
    font-size: 9px;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
}

.line-readiness-cell.is-ready[b-2tbhe234d8] {
    border-color: color-mix(in srgb, var(--readiness-teal) 55%, transparent 45%);
    color: #165f50;
    background: var(--readiness-teal-soft);
}

.line-readiness-cell.is-cover-pending[b-2tbhe234d8],
.line-readiness-cell.is-cover-requested[b-2tbhe234d8] {
    border-color: color-mix(in srgb, var(--readiness-violet) 54%, transparent 46%);
    color: #514783;
    background: var(--readiness-violet-soft);
}

.line-readiness-cell.needs-support[b-2tbhe234d8] {
    border-color: color-mix(in srgb, var(--readiness-amber) 56%, transparent 44%);
    color: #73500f;
    background: var(--readiness-amber-soft);
}

.line-readiness-cell.is-critical-gap[b-2tbhe234d8] {
    border-color: color-mix(in srgb, var(--readiness-coral) 58%, transparent 42%);
    color: #7c2d39;
    background: var(--readiness-coral-soft);
}

.line-readiness-cell.is-not-running[b-2tbhe234d8] {
    border-color: color-mix(in srgb, var(--readiness-slate) 28%, transparent 72%);
    color: var(--readiness-slate);
    background: var(--readiness-slate-soft);
}

.line-readiness-cell.is-live-change[b-2tbhe234d8] {
    animation: readiness-cell-change-b-2tbhe234d8 820ms ease-out both;
}

.line-readiness-detail-card[b-2tbhe234d8] {
    position: fixed;
    z-index: 900;
    inset: auto;
    width: 300px;
    max-width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
    overflow: auto;
    margin: 0;
    padding: 14px;
    border: 1px solid var(--readiness-border);
    border-radius: 11px;
    color: var(--text-primary);
    background: var(--readiness-raised);
    box-shadow: 0 18px 42px rgba(12, 25, 45, 0.24);
    white-space: normal;
    overflow-wrap: anywhere;
    pointer-events: none;
    animation: readiness-detail-in-b-2tbhe234d8 130ms ease-out both;
}

.line-readiness-detail-card > header[b-2tbhe234d8] {
    display: grid;
    gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--readiness-muted-border);
}

.line-readiness-detail-card > header span[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: normal;
}

.line-readiness-detail-card > header strong[b-2tbhe234d8] {
    font-size: 13px;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.line-readiness-detail-card > header strong.is-ready[b-2tbhe234d8] {
    color: var(--readiness-teal);
}

.line-readiness-detail-card > header strong.is-cover-pending[b-2tbhe234d8],
.line-readiness-detail-card > header strong.is-cover-requested[b-2tbhe234d8] {
    color: var(--readiness-violet);
}

.line-readiness-detail-card > header strong.needs-support[b-2tbhe234d8] {
    color: var(--readiness-amber);
}

.line-readiness-detail-card > header strong.is-critical-gap[b-2tbhe234d8] {
    color: var(--readiness-coral);
}

.line-readiness-detail-card > header strong.is-not-running[b-2tbhe234d8] {
    color: var(--readiness-slate);
}

.line-readiness-detail-card dl[b-2tbhe234d8] {
    display: grid;
    gap: 7px;
    margin: 10px 0 0;
}

.line-readiness-detail-card dl > div[b-2tbhe234d8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.line-readiness-detail-card dt[b-2tbhe234d8] {
    color: var(--text-secondary);
    font-size: 12px;
}

.line-readiness-detail-card dd[b-2tbhe234d8] {
    margin: 0;
    font-size: 12px;
    font-weight: 800;
    text-align: right;
}

.detail-message[b-2tbhe234d8] {
    display: grid;
    gap: 6px;
    margin-top: 10px;
    color: var(--text-secondary);
    font-size: 12px;
}

.detail-message b[b-2tbhe234d8] {
    color: var(--text-primary);
}

.line-readiness-detail-card > section[b-2tbhe234d8] {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid var(--readiness-muted-border);
}

.line-readiness-detail-card h4[b-2tbhe234d8] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.line-readiness-detail-card > footer[b-2tbhe234d8] {
    margin-top: 11px;
    padding-top: 9px;
    border-top: 1px solid var(--readiness-muted-border);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 700;
}

.readiness-live-value[b-2tbhe234d8] {
    animation: readiness-value-crossfade-b-2tbhe234d8 180ms ease-out both;
}

.app-shell.theme-dark .staffing-readiness-cockpit[b-2tbhe234d8] {
    --readiness-shell: #172235;
    --readiness-surface: #1b293e;
    --readiness-raised: #1e2d43;
    --readiness-border: #425a76;
    --readiness-muted-border: #344a65;
    --readiness-teal: #61c9b0;
    --readiness-teal-soft: #173f3c;
    --readiness-violet: #a89ad8;
    --readiness-violet-soft: #383550;
    --readiness-agency-mix: #93a8e8;
    --readiness-available: #6fc1e8;
    --readiness-amber: #e2b45f;
    --readiness-amber-soft: #4a3a22;
    --readiness-coral: #e7838f;
    --readiness-coral-soft: #4b2e38;
    --readiness-slate: #9cabbc;
    --readiness-slate-soft: #29384c;
    --workforce-training: #35d5a6;
    --workforce-holiday: #5ea7f2;
    --workforce-sick: #ff6b78;
    --workforce-other: #b18cff;
    --workforce-maternity: #e0b158;
    box-shadow: 0 16px 38px rgba(4, 10, 20, 0.38);
}

.app-shell.theme-dark .line-readiness-cell.is-ready[b-2tbhe234d8] {
    color: #b8f1e3;
}

.app-shell.theme-dark .line-readiness-cell.is-cover-pending[b-2tbhe234d8],
.app-shell.theme-dark .line-readiness-cell.is-cover-requested[b-2tbhe234d8] {
    color: #d0c7f1;
}

.app-shell.theme-dark .line-readiness-cell.needs-support[b-2tbhe234d8] {
    color: #f3d596;
}

.app-shell.theme-dark .line-readiness-cell.is-critical-gap[b-2tbhe234d8] {
    color: #f2b2ba;
}

.app-shell.theme-dark .line-readiness-detail-card[b-2tbhe234d8] {
    box-shadow: 0 20px 48px rgba(2, 7, 16, 0.55);
}

@keyframes readiness-shell-in-b-2tbhe234d8 {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes readiness-day-in-b-2tbhe234d8 {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

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

@keyframes readiness-row-in-b-2tbhe234d8 {
    from {
        opacity: 0;
        transform: translateY(3px);
    }

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

@keyframes readiness-detail-in-b-2tbhe234d8 {
    from {
        opacity: 0;
        transform: translateY(3px) scale(0.985);
    }

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

@keyframes readiness-value-crossfade-b-2tbhe234d8 {
    from {
        opacity: 0.28;
    }

    to {
        opacity: 1;
    }
}

@keyframes readiness-progress-draw-b-2tbhe234d8 {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes readiness-cell-change-b-2tbhe234d8 {
    0% {
        box-shadow: 0 0 0 0 color-mix(in srgb, #58d1e4 0%, transparent 100%);
    }

    36% {
        box-shadow: 0 0 0 3px color-mix(in srgb, #58d1e4 30%, transparent 70%);
    }

    100% {
        box-shadow: 0 0 0 0 color-mix(in srgb, #58d1e4 0%, transparent 100%);
    }
}

@container (max-width: 1200px) {
    .readiness-hero[b-2tbhe234d8] {
        grid-template-columns: minmax(290px, 0.75fr) minmax(0, 1.55fr);
    }

    .readiness-facts > div[b-2tbhe234d8] {
        padding-right: 9px;
        padding-left: 9px;
    }

    .readiness-day-segment[b-2tbhe234d8] {
        padding-right: 9px;
        padding-left: 9px;
    }
}

@container (max-width: 900px) {
    .readiness-hero[b-2tbhe234d8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .readiness-days[b-2tbhe234d8] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@container (max-width: 780px) {
    .readiness-scope-toolbar.is-all-areas[b-2tbhe234d8] {
        gap: 10px;
    }

    .readiness-attention[b-2tbhe234d8] {
        align-items: flex-start;
    }

    .readiness-attention strong[b-2tbhe234d8] {
        white-space: normal;
    }

    .workforce-availability-strip[b-2tbhe234d8] {
        align-items: flex-start;
    }
}

@container (max-width: 540px) {
    .readiness-scope-toolbar[b-2tbhe234d8],
    .readiness-scope-toolbar.is-all-areas[b-2tbhe234d8] {
        display: block;
        min-height: 33px;
        padding: 0;
        border-bottom: 0;
    }

    .readiness-all-areas-heading[b-2tbhe234d8] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .readiness-scope-toggle[b-2tbhe234d8] {
        width: 100%;
        justify-self: stretch;
    }

    .readiness-facts[b-2tbhe234d8] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .readiness-facts small.staffing-level-summary[b-2tbhe234d8] {
        font-size: 9.5px;
        letter-spacing: -0.01em;
    }

    .readiness-facts > div:nth-child(2n)[b-2tbhe234d8] {
        border-right: 0;
    }

    .readiness-facts > div:nth-child(-n + 4)[b-2tbhe234d8] {
        border-bottom: 1px solid var(--readiness-muted-border);
    }

    .readiness-facts > div:nth-last-child(-n + 2)[b-2tbhe234d8] {
        border-bottom: 0;
    }

    .readiness-days[b-2tbhe234d8] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (prefers-reduced-motion: reduce) {
    .staffing-readiness-cockpit[b-2tbhe234d8],
    .readiness-day-segment[b-2tbhe234d8],
    .line-readiness-row[b-2tbhe234d8],
    .line-readiness-cell.is-live-change[b-2tbhe234d8],
    .line-readiness-detail-card[b-2tbhe234d8],
    .readiness-live-value[b-2tbhe234d8],
    .readiness-track > span[b-2tbhe234d8],
    .workforce-mix-track > span[b-2tbhe234d8],
    .workforce-mix-detail-track > span[b-2tbhe234d8] {
        animation: none;
    }

    .readiness-track > span[b-2tbhe234d8],
    .workforce-mix-track > span[b-2tbhe234d8],
    .workforce-mix-detail-track > span[b-2tbhe234d8],
    .line-readiness-toggle svg[b-2tbhe234d8] {
        transition: none;
    }

    .readiness-day-segment:hover[b-2tbhe234d8],
    .line-readiness-cell:hover[b-2tbhe234d8] {
        transform: none;
    }
}

/* ============================================================
   Weekly Manning secondary segmented control polish
   Shares the inherited Week/Day surface and state language while
   retaining this component's existing scope state and geometry.
   ============================================================ */

.readiness-scope-toggle[b-2tbhe234d8] {
    box-sizing: border-box;
    gap: 0;
    border-color: var(--manning-segment-border, var(--readiness-muted-border));
    background: var(--manning-segment-surface, var(--readiness-surface));
    box-shadow: none;
}

.readiness-scope-toggle button[b-2tbhe234d8] {
    box-sizing: border-box;
    color: var(--text-secondary);
    background: transparent;
    box-shadow: none;
    text-shadow: none;
    transform: none;
    transition:
        color 140ms ease,
        background 140ms ease;
}

.readiness-scope-toggle button + button[b-2tbhe234d8] {
    border-left: 1px solid var(--manning-segment-divider, var(--readiness-muted-border));
}

.readiness-scope-toggle button:not(.active):hover[b-2tbhe234d8] {
    color: var(--text-primary);
    background: var(--manning-segment-hover-surface, var(--readiness-surface));
}

.readiness-scope-toggle button.active[b-2tbhe234d8] {
    color: var(--manning-segment-active-text, var(--text-primary));
    background: var(--manning-segment-active-surface, var(--readiness-raised));
    box-shadow:
        inset 0 -2px 0 var(--manning-segment-accent, var(--readiness-available)),
        inset 0 0 0 1px color-mix(
            in srgb,
            var(--manning-segment-accent, var(--readiness-available)) 16%,
            transparent);
    text-shadow: none;
}

.readiness-scope-toggle button:active[b-2tbhe234d8] {
    transform: none;
}

.readiness-scope-toggle button:focus-visible[b-2tbhe234d8] {
    position: relative;
    z-index: 1;
    outline: 2px solid var(--manning-segment-focus, var(--readiness-available));
    outline-offset: -2px;
}