/* /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[b-gupy3untei] {
    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-brand[b-gupy3untei] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.account-brand img[b-gupy3untei] {
    width: 42px;
    height: 42px;
    object-fit: contain;
}

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

.account-brand strong[b-gupy3untei] {
    font-size: 15px;
    font-weight: 900;
}

.account-brand span[b-gupy3untei],
.account-heading p[b-gupy3untei] {
    color: #49647f;
    font-size: 12px;
}

.account-heading[b-gupy3untei] {
    gap: 6px;
}

.account-heading > span[b-gupy3untei] {
    color: #1769dc;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
}

.account-heading h1[b-gupy3untei] {
    margin: 0;
    font-size: 28px;
    font-weight: 950;
}

.account-heading p[b-gupy3untei] {
    margin: 0;
    line-height: 1.5;
}

.account-form[b-gupy3untei] {
    gap: 14px;
}

.account-field[b-gupy3untei] {
    gap: 7px;
    font-size: 12px;
    font-weight: 850;
}

.account-input[b-gupy3untei] {
    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-input:focus[b-gupy3untei] {
    border-color: #1769dc;
    box-shadow: 0 0 0 3px rgba(23, 105, 220, .14);
}

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

.account-submit[b-gupy3untei] {
    min-height: 46px;
    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;
    cursor: pointer;
}

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

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

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

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

.account-secondary-link[b-gupy3untei] {
    align-self: center;
    color: #1769dc;
    font-size: 12px;
    font-weight: 850;
    text-decoration: none;
}

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

@media (max-width: 768px), (pointer: coarse) {
    .account-card[b-gupy3untei] {
        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;
        overflow-x: hidden;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

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

    .account-brand[b-gupy3untei] {
        align-items: center;
    }

    .account-heading h1[b-gupy3untei] {
        font-size: clamp(24px, 7vw, 28px);
        overflow-wrap: anywhere;
    }

    .account-heading p[b-gupy3untei],
    .account-message[b-gupy3untei],
    .account-message a[b-gupy3untei] {
        overflow-wrap: anywhere;
        word-break: normal;
    }

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

    .account-secondary-link[b-gupy3untei] {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
}
/* /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] {
        width: min(420px, calc(100vw - 20px));
        min-height: 330px;
        padding: 38px 24px 32px;
        border-radius: 24px;
    }

    .transition-copy strong[b-56rwyaswry] {
        font-size: 24px;
    }
}

@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] {
        width: min(420px, calc(100vw - 20px));
        min-height: 330px;
        padding: 38px 24px 32px;
        border-radius: 24px;
    }

    .sign-out-copy strong[b-stqsxzifc4] {
        font-size: 24px;
    }
}

@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;
}

.server-status-pill[b-36b2wzwsbg] {
    position: relative;
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    gap: 9px;
    padding: 0 15px;
    overflow: hidden;
    border: 1px solid rgba(37, 189, 120, 0.20);
    border-radius: 999px;
    color: #1e4f3b;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(237, 251, 246, 0.98) 100%),
        radial-gradient(circle at 18% 50%, rgba(53, 201, 154, 0.14), transparent 42%);
    box-shadow:
        0 10px 22px rgba(32, 70, 57, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96),
        inset 0 -1px 0 rgba(37, 189, 120, 0.08);
    white-space: nowrap;
    transition: color 220ms ease, border-color 220ms ease, background 220ms ease, box-shadow 220ms ease;
}

.server-status-pill[b-36b2wzwsbg]::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.44) 42%, transparent 70%);
    content: "";
    pointer-events: none;
    transform: translateX(-120%);
    animation: serverStatusSheen-b-36b2wzwsbg 5.8s ease-in-out infinite;
}

.server-status-dot[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #25bd78;
    box-shadow: 0 0 0 4px rgba(37, 189, 120, 0.16), 0 0 12px rgba(37, 189, 120, 0.45);
    transition: background 220ms ease, box-shadow 220ms ease;
}

.server-status-label[b-36b2wzwsbg] {
    position: relative;
    z-index: 1;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0;
}

.server-status-pill.online .server-status-dot[b-36b2wzwsbg] {
    animation: serverStatusOnlinePulse-b-36b2wzwsbg 2.4s ease-in-out infinite;
}

.server-status-pill.checking[b-36b2wzwsbg] {
    border-color: rgba(214, 151, 44, 0.28);
    color: #775313;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 248, 230, 0.96) 100%);
}

.server-status-pill.checking .server-status-dot[b-36b2wzwsbg] {
    background: #d6972c;
    box-shadow: 0 0 0 4px rgba(214, 151, 44, 0.15), 0 0 10px rgba(214, 151, 44, 0.34);
    animation: serverStatusCheckingPulse-b-36b2wzwsbg 1.1s ease-in-out infinite;
}

.server-status-pill.offline[b-36b2wzwsbg] {
    border-color: rgba(202, 66, 78, 0.28);
    color: #842f39;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 238, 240, 0.96) 100%);
    box-shadow: 0 8px 18px rgba(132, 47, 57, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.server-status-pill.offline .server-status-dot[b-36b2wzwsbg] {
    background: #ca424e;
    box-shadow: 0 0 0 4px rgba(202, 66, 78, 0.14), 0 0 12px rgba(202, 66, 78, 0.34);
}

@keyframes serverStatusOnlinePulse-b-36b2wzwsbg {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(37, 189, 120, 0.14), 0 0 9px rgba(37, 189, 120, 0.34);
    }

    50% {
        box-shadow: 0 0 0 5px rgba(37, 189, 120, 0.08), 0 0 15px rgba(37, 189, 120, 0.52);
    }
}

@keyframes serverStatusSheen-b-36b2wzwsbg {
    0%, 55%, 100% {
        transform: translateX(-120%);
        opacity: 0;
    }

    68% {
        opacity: 0.85;
    }

    86% {
        transform: translateX(120%);
        opacity: 0;
    }
}

@keyframes serverStatusCheckingPulse-b-36b2wzwsbg {
    0%, 100% {
        opacity: 0.52;
        transform: scale(0.88);
    }

    50% {
        opacity: 1;
        transform: scale(1);
    }
}

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

    .server-status-pill[b-36b2wzwsbg] {
        min-width: 40px;
        justify-content: center;
        padding-inline: 14px;
    }

    .server-status-label[b-36b2wzwsbg] {
        display: none;
    }

    .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 Database Live,
   Messages and the profile remain available. This extension covers the
   header content to their left and fades out immediately before the status
   pill 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 .server-status-pill.online[b-36b2wzwsbg] {
    border-color: rgba(37, 189, 120, 0.18);
    color: #e7fff2;
    background: linear-gradient(180deg, rgba(18, 34, 29, 0.94) 0%, rgba(14, 27, 24, 0.94) 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 -1px 0 rgba(37, 189, 120, 0.10);
}

.app-shell.theme-dark .server-status-pill.checking[b-36b2wzwsbg] {
    border-color: rgba(214, 151, 44, 0.22);
    color: #fff1cf;
    background: linear-gradient(180deg, rgba(43, 35, 20, 0.95) 0%, rgba(34, 28, 18, 0.95) 100%);
}

.app-shell.theme-dark .server-status-pill.offline[b-36b2wzwsbg] {
    border-color: rgba(224, 92, 105, 0.24);
    color: #ffe8eb;
    background: linear-gradient(180deg, rgba(48, 25, 29, 0.95) 0%, rgba(38, 20, 24, 0.95) 100%);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.app-shell.theme-dark .server-status-label[b-36b2wzwsbg] {
    color: inherit;
}

.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: 12px;
    padding-right: 0;
}

/* Profile chip hugs the right edge, with a hairline separator in front of it. */
.topbar-actions > .user-menu[b-36b2wzwsbg] {
    margin-left: 4px;
    margin-right: -4px;
    padding-left: 12px;
}

.topbar-actions > .user-menu[b-36b2wzwsbg]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 26px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, transparent, var(--border-color) 26%, var(--border-color) 74%, transparent);
    opacity: 0.85;
    pointer-events: none;
}

.app-shell.theme-dark .topbar-actions > .user-menu[b-36b2wzwsbg]::before {
    background: linear-gradient(180deg, transparent, rgba(111, 199, 199, 0.24) 26%, rgba(111, 199, 199, 0.24) 74%, transparent);
}

.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-actions > .user-menu[b-36b2wzwsbg]::before {
        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
     - Database Live: much quieter sheen, calmer dot
     - hairline separator between the status pill and Messages
   ============================================================ */

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

/* --- Database Live: quieter, more premium -------------------- */

.topbar-actions > .server-status-pill[b-36b2wzwsbg] {
    min-height: 40px;
    padding: 0 16px;
    gap: 10px;
}

.server-status-label[b-36b2wzwsbg] {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

/* Sheen: was a bright flash every ~6s. Now a faint, slow glide. */
.server-status-pill[b-36b2wzwsbg]::after {
    background: linear-gradient(110deg, transparent 20%, rgba(255, 255, 255, 0.30) 50%, transparent 80%);
    transform: none;
    background-size: 240% 100%;
    background-position: 150% 0;
    opacity: 0;
    animation: serverStatusGlide-b-36b2wzwsbg 16s ease-in-out infinite;
}

.app-shell.theme-dark .server-status-pill[b-36b2wzwsbg]::after {
    background: linear-gradient(110deg, transparent 20%, rgba(159, 231, 240, 0.16) 50%, transparent 80%);
    background-size: 240% 100%;
}

@keyframes serverStatusGlide-b-36b2wzwsbg {
    0%, 72% {
        background-position: 150% 0;
        opacity: 0;
    }

    78% {
        opacity: 0.55;
    }

    96%, 100% {
        background-position: -60% 0;
        opacity: 0;
    }
}

/* Dot: slow, soft breathing instead of a hard blink. */
.server-status-pill.online .server-status-dot[b-36b2wzwsbg] {
    animation: serverStatusOnlineBreathe-b-36b2wzwsbg 3.8s ease-in-out infinite;
}

@keyframes serverStatusOnlineBreathe-b-36b2wzwsbg {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(37, 189, 120, 0.14), 0 0 8px rgba(37, 189, 120, 0.28);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(37, 189, 120, 0.05), 0 0 14px rgba(37, 189, 120, 0.42);
        transform: scale(1.06);
    }
}

/* --- Hairline separator: status pill | messages -------------- */

.topbar-actions > .chat-launcher-button[b-36b2wzwsbg] {
    margin-left: 12px;
}

.topbar-actions > .chat-launcher-button[b-36b2wzwsbg]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -13px;
    width: 1px;
    height: 26px;
    transform: translateY(-50%);
    background: linear-gradient(180deg, transparent, var(--border-color) 26%, var(--border-color) 74%, transparent);
    opacity: 0.85;
    pointer-events: none;
}

.app-shell.theme-dark .topbar-actions > .chat-launcher-button[b-36b2wzwsbg]::after {
    background: linear-gradient(180deg, transparent, rgba(111, 199, 199, 0.24) 26%, rgba(111, 199, 199, 0.24) 74%, transparent);
}

@media (max-width: 820px) {
    .topbar-actions > .chat-launcher-button[b-36b2wzwsbg] {
        margin-left: 0;
    }

    .topbar-actions > .chat-launcher-button[b-36b2wzwsbg]::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .server-status-pill[b-36b2wzwsbg]::after,
    .server-status-pill.online .server-status-dot[b-36b2wzwsbg],
    .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;
    }
}

/* ============================================================
   Database Live pill - dimensional treatment
   The flat 1px outline disappeared on white. This gives it a
   real edge: tinted border, layered inset highlights, a soft
   drop shadow and a top-lit gradient so it sits above the bar.
   ============================================================ */

.app-shell:not(.theme-dark) .topbar-actions > .server-status-pill[b-36b2wzwsbg] {
    border: 1px solid rgba(29, 150, 100, 0.42);
    color: #12513a;
    background:
        linear-gradient(180deg, #ffffff 0%, #eafaf3 55%, #ddf3e9 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(29, 150, 100, 0.16) inset,
        0 1px 2px rgba(20, 60, 46, 0.10),
        0 8px 18px rgba(20, 60, 46, 0.12);
}

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

.app-shell:not(.theme-dark) .topbar-actions > .server-status-pill:hover[b-36b2wzwsbg] {
    border-color: rgba(29, 150, 100, 0.58);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(29, 150, 100, 0.20) inset,
        0 2px 3px rgba(20, 60, 46, 0.12),
        0 12px 24px rgba(20, 60, 46, 0.16);
}

.app-shell:not(.theme-dark) .topbar-actions > .server-status-pill.checking[b-36b2wzwsbg] {
    border-color: rgba(191, 130, 22, 0.45);
    color: #6b4a10;
    background: linear-gradient(180deg, #ffffff 0%, #fff6e3 55%, #ffeecd 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(191, 130, 22, 0.18) inset,
        0 1px 2px rgba(90, 62, 12, 0.10),
        0 8px 18px rgba(90, 62, 12, 0.12);
}

.app-shell:not(.theme-dark) .topbar-actions > .server-status-pill.offline[b-36b2wzwsbg] {
    border-color: rgba(190, 55, 68, 0.45);
    color: #7a2530;
    background: linear-gradient(180deg, #ffffff 0%, #ffeef0 55%, #ffe1e5 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.95) inset,
        0 -1px 0 rgba(190, 55, 68, 0.18) inset,
        0 1px 2px rgba(96, 28, 35, 0.10),
        0 8px 18px rgba(96, 28, 35, 0.14);
}

.app-shell:not(.theme-dark) .server-status-dot[b-36b2wzwsbg] {
    border: 1px solid rgba(255, 255, 255, 0.9);
    background: radial-gradient(circle at 32% 30%, #6fe3ac 0%, #25bd78 55%, #128a55 100%);
}

/* Dark mode keeps its glass look, just a touch more edge. */
.app-shell.theme-dark .topbar-actions > .server-status-pill.online[b-36b2wzwsbg] {
    border-color: rgba(53, 209, 138, 0.30);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.06) inset,
        0 -1px 0 rgba(53, 209, 138, 0.14) inset,
        0 10px 22px rgba(0, 0, 0, 0.28);
}

.app-shell:not(.theme-dark) .topbar-actions > .server-status-pill.maintenance[b-36b2wzwsbg] {
    border-color: rgba(207, 130, 20, .52);
    color: #74470a;
    background: linear-gradient(180deg, #fffdf8 0%, #fff2d6 56%, #ffe5b6 100%);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .96) inset,
        0 -1px 0 rgba(207, 130, 20, .18) inset,
        0 8px 20px rgba(136, 81, 10, .16);
}

.server-status-pill.maintenance .server-status-dot[b-36b2wzwsbg] {
    background: #ed9e22;
    box-shadow: 0 0 0 4px rgba(237, 158, 34, .14), 0 0 13px rgba(237, 158, 34, .5);
    animation: serverStatusMaintenancePulse-b-36b2wzwsbg 1.7s ease-in-out infinite;
}

.app-shell.theme-dark .topbar-actions > .server-status-pill.maintenance[b-36b2wzwsbg] {
    border-color: rgba(238, 167, 54, .36);
    color: #ffe1a4;
    background: linear-gradient(180deg, rgba(58, 39, 16, .96), rgba(42, 28, 13, .96));
    box-shadow:
        0 1px 0 rgba(255, 255, 255, .06) inset,
        0 -1px 0 rgba(238, 167, 54, .16) inset,
        0 10px 22px rgba(0, 0, 0, .28);
}

@keyframes serverStatusMaintenancePulse-b-36b2wzwsbg {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
    .server-status-pill.maintenance .server-status-dot[b-36b2wzwsbg] {
        animation: none;
    }
}
/* /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/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: 1150px) {
    .manning-page.has-rail[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
    }

    .available-rail[b-7ov57acdan] {
        position: static;
        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;
}

.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: min(100%, 1500px);
    align-self: flex-start;
    overflow: visible;
}

.day-navigation[b-7ov57acdan] {
    display: grid;
    min-height: 66px;
    grid-template-columns: 38px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border-color);
    background: var(--button-hover);
}

.day-navigation-button[b-7ov57acdan] {
    width: 38px;
    height: 34px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--primary-text);
    background: var(--button-background);
    font-family: inherit;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

    .day-navigation-button:hover:not(:disabled)[b-7ov57acdan] {
        background: var(--panel-background);
        border-color: #1769dc;
    }

    .day-navigation-button:disabled[b-7ov57acdan] {
        opacity: 0.38;
        cursor: not-allowed;
    }

.selected-day[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    text-align: center;
}

    .selected-day span[b-7ov57acdan] {
        color: var(--primary-text);
        font-size: 13px;
        font-weight: 700;
    }

    .selected-day strong[b-7ov57acdan] {
        color: var(--secondary-text);
        font-size: 11px;
        font-weight: 600;
    }

.day-lines-grid[b-7ov57acdan] {
    display: grid;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px;
}

.day-line-card[b-7ov57acdan] {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    background: var(--panel-background);
}

.day-line-header[b-7ov57acdan] {
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 12px;
    border-bottom: 2px solid #1769dc;
    background: color-mix(in srgb, var(--panel-background) 82%, #1769dc 18%);
}

.day-line-title[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

    .day-line-title strong[b-7ov57acdan] {
        color: var(--primary-text);
        font-size: 13px;
        font-weight: 700;
    }

    .day-line-title span[b-7ov57acdan] {
        color: var(--secondary-text);
        font-size: 8px;
    }

.day-line-meta[b-7ov57acdan] {
    display: flex;
    flex-wrap: wrap;
    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: 8px;
        font-weight: 700;
        white-space: nowrap;
    }

.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: 38px;
    grid-template-columns: 112px minmax(0, 1fr);
    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] {
    overflow: hidden;
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.day-assignment-cell[b-7ov57acdan] {
    min-width: 0;
}

.day-assignment[b-7ov57acdan] {
    height: 30px;
    min-height: 30px;
    border-radius: 4px;
}

    .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: 30px;
    min-height: 26px;
    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);
    }

.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: 980px) {
    .day-workspace[b-7ov57acdan] {
        width: 100%;
    }

    .day-lines-grid[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@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;
    }

    .day-line-header[b-7ov57acdan] {
        align-items: flex-start;
    }

    .day-position-row[b-7ov57acdan] {
        grid-template-columns: 102px minmax(0, 1fr);
    }
}


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

.day-workspace[b-7ov57acdan] {
    width: 100%;
    max-width: none;
}

.day-navigation[b-7ov57acdan] {
    min-height: 50px;
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 8px;
    padding: 6px 10px;
}

.day-navigation-button[b-7ov57acdan] {
    width: 34px;
    height: 32px;
    font-size: 22px;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.day-navigation-button:hover:not(:disabled)[b-7ov57acdan] {
    transform: translateY(-1px);
    box-shadow: 0 5px 12px rgba(23, 105, 220, 0.12);
}

.selected-day[b-7ov57acdan] {
    gap: 1px;
}

.selected-day span[b-7ov57acdan] {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.selected-day strong[b-7ov57acdan] {
    font-size: 13px;
    font-weight: 700;
}

.day-lines-grid[b-7ov57acdan] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 8px;
}

.day-line-card[b-7ov57acdan] {
    border-radius: 7px;
    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] {
    min-height: 46px;
    gap: 10px;
    padding: 7px 9px;
}

.day-line-title[b-7ov57acdan] {
    gap: 1px;
}

.day-line-title strong[b-7ov57acdan] {
    font-size: 15px;
    font-weight: 800;
}

.day-line-title span[b-7ov57acdan] {
    font-size: 10.5px;
    font-weight: 650;
}

.day-line-meta[b-7ov57acdan] {
    gap: 4px;
}

.day-line-meta span[b-7ov57acdan] {
    padding: 3px 6px;
    font-size: 10px;
    font-weight: 800;
}

.day-position-row[b-7ov57acdan] {
    min-height: 34px;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 6px;
    padding: 3px 6px;
}

.day-position-name[b-7ov57acdan] {
    font-size: 13px;
    font-weight: 720;
}

.day-assignment[b-7ov57acdan] {
    height: 27px;
    min-height: 27px;
}

.day-empty-assignment[b-7ov57acdan] {
    height: 27px;
    min-height: 27px;
    gap: 0;
    padding: 0 4px;
    font-size: 0;
    transition: transform 140ms ease, border-color 140ms ease, color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.day-empty-assignment span:first-child[b-7ov57acdan] {
    font-size: 21px;
    font-weight: 450;
}

.day-empty-assignment:hover[b-7ov57acdan] {
    transform: translateY(-1px);
    box-shadow: inset 0 0 0 1px rgba(23, 105, 220, 0.12);
}

@media (max-width: 1320px) {
    .day-lines-grid[b-7ov57acdan] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .day-lines-grid[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
    }

    .day-position-row[b-7ov57acdan] {
        grid-template-columns: 96px minmax(0, 1fr);
    }
}


.week-button[b-7ov57acdan],
.current-week-button[b-7ov57acdan],
.day-navigation-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],
.day-navigation-button:active[b-7ov57acdan] {
    transform: translateY(1px) scale(0.97);
}

.manning-table[b-7ov57acdan] {
    --line-column-width: 150px;
    --position-column-width: 136px;
}

.primary-column-header .day-name[b-7ov57acdan] {
    font-size: 14.5px;
    font-weight: 700;
}

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

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


/* Restored resizable Day View columns */
.day-workspace[b-7ov57acdan] {
    --day-card-width: 330px;
    width: min(100%, calc((var(--day-card-width) * 3) + 32px));
    max-width: 100%;
}

.day-navigation[b-7ov57acdan] {
    position: relative;
}

.day-lines-grid[b-7ov57acdan] {
    grid-template-columns: repeat(3, var(--day-card-width));
    justify-content: start;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
}

.day-line-card[b-7ov57acdan] {
    width: var(--day-card-width);
}

.day-grid-resize-handle[b-7ov57acdan] {
    position: absolute;
    right: 49px;
    bottom: 7px;
    z-index: 4;
    display: inline-flex;
    width: 28px;
    height: 20px;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, #1769dc 34%, var(--border-color) 66%);
    border-radius: 7px;
    background: color-mix(in srgb, var(--panel-background) 86%, #1769dc 14%);
    cursor: ew-resize;
    touch-action: none;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.day-grid-resize-handle[b-7ov57acdan]::before {
    color: #1769dc;
    content: "↔";
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.day-grid-resize-handle:hover[b-7ov57acdan],
.day-grid-resize-handle.active[b-7ov57acdan] {
    transform: translateY(-1px);
    border-color: #1769dc;
    background: color-mix(in srgb, var(--panel-background) 78%, #1769dc 22%);
    box-shadow: 0 7px 16px rgba(23, 105, 220, 0.18);
}

.day-line-title strong[b-7ov57acdan] {
    font-size: 16px;
    font-weight: 500;
}

.line-cell strong[b-7ov57acdan] {
    font-size: 15px;
    font-weight: 500;
}

@media (max-width: 1040px) {
    .day-workspace[b-7ov57acdan] {
        width: min(100%, calc((var(--day-card-width) * 2) + 24px));
    }

    .day-lines-grid[b-7ov57acdan] {
        grid-template-columns: repeat(2, var(--day-card-width));
    }
}

@media (max-width: 720px) {
    .day-workspace[b-7ov57acdan] {
        width: 100%;
    }

    .day-lines-grid[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
    }

    .day-line-card[b-7ov57acdan] {
        width: 100%;
    }

    .day-grid-resize-handle[b-7ov57acdan] {
        display: none;
    }
}


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

.day-line-card.visual-group-row-start[b-7ov57acdan] {
    margin-top: 12px;
    border-top: 5px solid color-mix(in srgb, #1769dc 68%, var(--border-color) 32%);
}

.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[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 4px;
}

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

@media (max-width: 760px) {
    .day-line-header[b-7ov57acdan] {
        flex-wrap: wrap;
    }

    .day-line-agency-summary[b-7ov57acdan] {
        width: 100%;
        justify-content: flex-start;
    }
}


/* 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: 74px !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: 70px;
    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);
}

/* =====================================================
   Coverage summary strip
   ===================================================== */

.coverage-summary[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(200px, 236px) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    margin-bottom: 2px;
}

.coverage-week-card[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 6px 16px var(--shadow-color);
}

.coverage-week-card header[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.coverage-week-card header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

.coverage-week-card header span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
}

.coverage-week-percent[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.coverage-week-percent strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
}

.coverage-week-percent span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.coverage-week-facts[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px 10px;
    margin: 0;
}

.coverage-week-facts div[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.coverage-week-facts dt[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.coverage-week-facts dd[b-7ov57acdan] {
    margin: 0;
    color: var(--primary-text);
    font-size: 12.5px;
    font-weight: 800;
}

.coverage-day-grid[b-7ov57acdan] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    gap: 8px;
    min-width: 0;
}

.coverage-day-card[b-7ov57acdan] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 6px 16px var(--shadow-color);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.coverage-day-card:hover[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: 0 10px 22px rgba(23, 105, 220, 0.16);
    transform: translateY(-1px);
}

.coverage-day-card:active[b-7ov57acdan] {
    transform: translateY(0) scale(0.99);
}

.coverage-day-card.is-selected[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: 0 0 0 2px rgba(23, 105, 220, 0.28), 0 10px 22px rgba(23, 105, 220, 0.16);
}

.coverage-day-card.is-today[b-7ov57acdan] {
    background: color-mix(in srgb, var(--panel-background) 92%, #1769dc 8%);
}

.coverage-day-card header[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.coverage-day-card header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    white-space: nowrap;
}

.coverage-day-card header span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.coverage-today-chip[b-7ov57acdan],
.selected-day-today-chip[b-7ov57acdan] {
    margin-left: auto;
    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;
}

.selected-day-today-chip[b-7ov57acdan] {
    margin-left: 8px;
}

.coverage-day-numbers[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px;
}

.coverage-day-numbers strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 18px;
    font-weight: 800;
    line-height: 1;
}

.coverage-day-numbers strong small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 700;
}

.coverage-day-numbers span[b-7ov57acdan] {
    font-size: 12px;
    font-weight: 800;
}

.coverage-day-card.level-good .coverage-day-numbers span[b-7ov57acdan],
.coverage-week-card.level-good .coverage-week-percent strong[b-7ov57acdan] {
    color: #1d9d76;
}

.coverage-day-card.level-warning .coverage-day-numbers span[b-7ov57acdan],
.coverage-week-card.level-warning .coverage-week-percent strong[b-7ov57acdan] {
    color: #c07f13;
}

.coverage-day-card.level-critical .coverage-day-numbers span[b-7ov57acdan],
.coverage-week-card.level-critical .coverage-week-percent strong[b-7ov57acdan] {
    color: #d84c5f;
}

.coverage-bar[b-7ov57acdan] {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--border-color) 62%, var(--panel-background) 38%);
}

.coverage-bar-fill[b-7ov57acdan] {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 260ms ease;
}

.level-good .coverage-bar-fill[b-7ov57acdan] {
    background: linear-gradient(90deg, #2bb389 0%, #35c99a 100%);
}

.level-warning .coverage-bar-fill[b-7ov57acdan] {
    background: linear-gradient(90deg, #e0a53a 0%, #f2c94c 100%);
}

.level-critical .coverage-bar-fill[b-7ov57acdan] {
    background: linear-gradient(90deg, #c73f52 0%, #e0687a 100%);
}

.coverage-day-chips[b-7ov57acdan] {
    display: flex;
    min-height: 18px;
    flex-wrap: wrap;
    gap: 4px;
}

.coverage-chip[b-7ov57acdan] {
    padding: 1px 7px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--secondary-text);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.2px;
    white-space: nowrap;
}

.coverage-chip.vacant[b-7ov57acdan] {
    border-color: #d84c5f;
    color: #d84c5f;
    background: color-mix(in srgb, #d84c5f 10%, var(--panel-background) 90%);
}

.coverage-chip.holiday[b-7ov57acdan] {
    border-color: #82aee6;
    color: #173d69;
    background: #dcecff;
}

.coverage-chip.training[b-7ov57acdan] {
    border-color: #ae91db;
    color: #4d3273;
    background: #eee5fb;
}

.coverage-chip.sick[b-7ov57acdan] {
    border-color: #df9298;
    color: #762b33;
    background: #fde5e7;
}

.coverage-chip.agency[b-7ov57acdan] {
    border-color: #e3c85f;
    color: #6d5a10;
    background: #fff0ad;
}

.coverage-chip.full[b-7ov57acdan] {
    border-color: #35c99a;
    color: #1d9d76;
    background: color-mix(in srgb, #35c99a 12%, var(--panel-background) 88%);
}

@media (max-width: 1180px) {
    .coverage-summary[b-7ov57acdan] {
        grid-template-columns: minmax(0, 1fr);
    }

    .coverage-day-grid[b-7ov57acdan] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }
}

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

.coverage-chip.additional[b-7ov57acdan] {
    border-color: #1769dc;
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%);
}

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

/* =====================================================
   Line coverage heatmap
   ===================================================== */

.coverage-heatmap-block[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-column: 1 / -1;
}

.heatmap-toggle-button[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    min-height: 28px;
    padding: 0 11px;
    border: 1px solid var(--border-color);
    border-radius: 7px;
    color: var(--secondary-text);
    background: var(--panel-background);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 140ms ease, background 140ms ease, color 140ms ease, transform 120ms ease;
}

.heatmap-toggle-button svg[b-7ov57acdan] {
    width: 12px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.heatmap-toggle-button:hover[b-7ov57acdan] {
    border-color: #1769dc;
    color: #1769dc;
    background: var(--button-hover);
}

.heatmap-toggle-button:active[b-7ov57acdan] {
    transform: translateY(1px) scale(0.985);
}

.heatmap-toggle-button.active[b-7ov57acdan] {
    border-color: color-mix(in srgb, #1769dc 55%, var(--border-color) 45%);
    color: #1769dc;
    background: color-mix(in srgb, #1769dc 8%, var(--panel-background) 92%);
}

.coverage-heatmap[b-7ov57acdan] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    background: var(--panel-background);
    box-shadow: 0 6px 16px var(--shadow-color);
    animation: manning-slide-in-b-7ov57acdan 240ms ease both;
}

.heatmap-row[b-7ov57acdan] {
    display: grid;
    grid-template-columns: minmax(120px, 220px) repeat(5, minmax(0, 1fr));
    align-items: center;
    gap: 3px;
}

.heatmap-line-name[b-7ov57acdan] {
    overflow: hidden;
    padding-right: 8px;
    color: var(--primary-text);
    font-size: 11px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.heatmap-day-header[b-7ov57acdan] {
    padding: 2px 0;
    color: var(--secondary-text);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.4px;
    text-align: center;
    text-transform: uppercase;
}

.heatmap-day-header.is-today[b-7ov57acdan] {
    color: #1769dc;
}

.heatmap-cell[b-7ov57acdan] {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    cursor: pointer;
    transition: transform 120ms ease, box-shadow 140ms ease, filter 140ms ease;
}

.heatmap-cell small[b-7ov57acdan] {
    font-size: 9px;
    font-weight: 800;
    opacity: 0.85;
}

.heatmap-cell:hover[b-7ov57acdan] {
    z-index: 1;
    transform: scale(1.06);
    box-shadow: 0 6px 14px var(--shadow-color);
    filter: brightness(1.05);
}

.heatmap-cell:active[b-7ov57acdan] {
    transform: scale(1.0);
}

.heatmap-cell.heat-100[b-7ov57acdan] {
    border-color: #2bb389;
    color: #0d3f30;
    background: #b7ecd9;
}

.heatmap-cell.heat-90[b-7ov57acdan] {
    border-color: #7ed3ae;
    color: #185741;
    background: #d8f5e8;
}

.heatmap-cell.heat-75[b-7ov57acdan] {
    border-color: #e0c264;
    color: #5c4a08;
    background: #faedbd;
}

.heatmap-cell.heat-50[b-7ov57acdan] {
    border-color: #e6a05c;
    color: #6b3d0c;
    background: #fbdfc0;
}

.heatmap-cell.heat-0[b-7ov57acdan] {
    border-color: #df8f9a;
    color: #6e1f2a;
    background: #f9d4d9;
}

.heatmap-cell.heat-none[b-7ov57acdan] {
    border-color: var(--border-color);
    border-style: dashed;
    color: var(--secondary-text);
    background: transparent;
    font-style: italic;
}

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

@keyframes manning-rise-in-b-7ov57acdan {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }

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

.coverage-summary[b-7ov57acdan] {
    animation: manning-slide-in-b-7ov57acdan 260ms ease both;
}

.coverage-day-card[b-7ov57acdan] {
    animation: manning-rise-in-b-7ov57acdan 320ms cubic-bezier(0.2, 0.8, 0.25, 1) both;
}

.coverage-day-grid .coverage-day-card:nth-child(1)[b-7ov57acdan] { animation-delay: 30ms; }
.coverage-day-grid .coverage-day-card:nth-child(2)[b-7ov57acdan] { animation-delay: 70ms; }
.coverage-day-grid .coverage-day-card:nth-child(3)[b-7ov57acdan] { animation-delay: 110ms; }
.coverage-day-grid .coverage-day-card:nth-child(4)[b-7ov57acdan] { animation-delay: 150ms; }
.coverage-day-grid .coverage-day-card:nth-child(5)[b-7ov57acdan] { animation-delay: 190ms; }

.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) {
    .coverage-summary[b-7ov57acdan],
    .coverage-day-card[b-7ov57acdan],
    .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],
    .coverage-heatmap[b-7ov57acdan],
    .week-copy-confirmation[b-7ov57acdan],
    .week-copy-success[b-7ov57acdan] {
        animation: none;
    }

    .heatmap-cell:hover[b-7ov57acdan],
    .coverage-day-card:hover[b-7ov57acdan],
    .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: 1px solid var(--border-color);
    border-bottom-color: transparent;
    border-radius: 14px 14px 0 0;
    background: var(--panel-background);
    box-shadow:
        0 -12px 30px rgba(8, 15, 30, 0.24),
        inset 0 -1px 0 var(--panel-background);
    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: center;
    width: 100%;
    height: 44px;
    padding: 3px 18px 7px;
    border: 0;
    border-radius: 14px 14px 0 0;
    color: var(--primary-text);
    background: linear-gradient(180deg, color-mix(in srgb, #1769dc 10%, var(--panel-background) 90%) 0%, var(--panel-background) 100%);
    font-family: inherit;
    transition: background 160ms ease;
}

.absence-board:hover .absence-board-launcher[b-7ov57acdan] {
    background: linear-gradient(180deg, color-mix(in srgb, #1769dc 16%, var(--panel-background) 84%) 0%, var(--panel-background) 100%);
}

.absence-board:not(.open) .absence-board-launcher[b-7ov57acdan] {
    border-radius: 14px 14px 0 0;
}

.absence-board-grip[b-7ov57acdan] {
    position: absolute;
    top: 7px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    border-radius: 999px;
    background: color-mix(in srgb, #1769dc 55%, var(--border-color) 45%);
}

.absence-board-handle-label[b-7ov57acdan] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}

.absence-board-handle-label svg[b-7ov57acdan] {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: #1769dc;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.absence-board-handle-label strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.absence-board-handle-label small[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 11px;
    font-weight: 600;
}

.absence-board-caret[b-7ov57acdan] {
    position: absolute;
    right: 58px;
    bottom: 12px;
    color: #1769dc;
    font-size: 13px;
    font-weight: 800;
    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: 7px;
    z-index: 3;
    display: grid;
    width: 30px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid color-mix(in srgb, #1769dc 24%, var(--border-color) 76%);
    border-radius: 9px;
    color: #61748e;
    background: color-mix(in srgb, var(--panel-background) 88%, #dcecff 12%);
    box-shadow: 0 3px 9px rgba(23, 105, 220, 0.10);
    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 62%, var(--border-color) 38%);
    background: color-mix(in srgb, #1769dc 12%, var(--panel-background) 88%);
    box-shadow: 0 5px 13px rgba(23, 105, 220, 0.20);
    transform: translateY(-1px) scale(1.03);
}

.absence-board-pin-button.active[b-7ov57acdan] {
    color: #ffffff;
    border-color: #1769dc;
    background: linear-gradient(135deg, #1769dc, #2f9fd5);
    box-shadow:
        0 5px 15px rgba(23, 105, 220, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.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: 4px 10px 14px;
    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: 6px;
    background: var(--panel-background);
}

.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: 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-status-header[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
}

.absence-board-status-header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.absence-board-day-header[b-7ov57acdan] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.absence-board-day-header.is-today[b-7ov57acdan] {
    border-color: #1769dc;
    box-shadow: inset 0 0 0 1px #1769dc;
}

.absence-board-day-header strong[b-7ov57acdan] {
    color: var(--primary-text);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.absence-board-day-header span[b-7ov57acdan] {
    color: var(--secondary-text);
    font-size: 10.5px;
    font-weight: 600;
}

.absence-board-day-header em[b-7ov57acdan] {
    margin-left: auto;
    color: #d84c5f;
    font-size: 10px;
    font-weight: 800;
    font-style: normal;
}

.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] {
    display: inline-flex;
    max-width: 100%;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding: 3px 8px;
    border: 0;
    border-radius: 999px;
    color: var(--primary-text);
    background: color-mix(in srgb, var(--panel-background) 82%, var(--border-color) 18%);
    font-family: inherit;
    font-size: 11.4px;
    font-weight: 900;
    letter-spacing: 0.18px;
    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] {
    background: color-mix(in srgb, var(--panel-background) 72%, currentColor 14%);
}

.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: color-mix(in srgb, currentColor 80%, var(--secondary-text) 20%);
    font-size: 10px;
    line-height: 1;
}

.absence-status-icon[b-7ov57acdan] {
    display: inline-flex;
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 18%, transparent);
}

.absence-status-icon[b-7ov57acdan]::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 10px currentColor;
}

/* Light theme (default): strong, high-contrast label colours */
.absence-status-chip.training[b-7ov57acdan] { color: #0e8f68; }
.absence-status-chip.holiday[b-7ov57acdan] { color: #1a6fd4; }
.absence-status-chip.sick[b-7ov57acdan] { color: #d1323d; }
.absence-status-chip.other[b-7ov57acdan] { color: #7a45cf; }
.absence-status-chip.maternity[b-7ov57acdan] { color: #a06a12; }

/* Dark theme: softer pastel accents that read well on the dark board */
.app-shell.theme-dark .absence-status-chip.training[b-7ov57acdan] { color: #6ce5bf; }
.app-shell.theme-dark .absence-status-chip.holiday[b-7ov57acdan] { color: #86c5ff; }
.app-shell.theme-dark .absence-status-chip.sick[b-7ov57acdan] { color: #ff8791; }
.app-shell.theme-dark .absence-status-chip.other[b-7ov57acdan] { color: #c7a8ff; }
.app-shell.theme-dark .absence-status-chip.maternity[b-7ov57acdan] { color: #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] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 3px 9px;
    border: 1px dashed color-mix(in srgb, var(--border-color) 72%, transparent);
    border-radius: 999px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 86%, var(--border-color) 14%);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* 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-radius: 7px;
    background: color-mix(in srgb, var(--border-color) 14%, transparent);
}

.absence-board-day-guide:nth-child(even)[b-7ov57acdan] {
    background: color-mix(in srgb, var(--border-color) 7%, transparent);
}

/* Days with nobody assigned for this status: subtle hatched placeholder slot */
.absence-board-day-guide.is-vacant[b-7ov57acdan] {
    border: 1px dashed color-mix(in srgb, var(--border-color) 62%, transparent);
    background:
        repeating-linear-gradient(
            135deg,
            color-mix(in srgb, var(--border-color) 16%, transparent) 0 5px,
            transparent 5px 12px);
    opacity: 0.55;
}

.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-lane.is-empty[b-7ov57acdan] {
    min-height: 26px;
}

/* Weekly people counter next to the status chip */
.absence-status-count[b-7ov57acdan] {
    display: inline-flex;
    min-width: 19px;
    height: 19px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
    border: 1px solid color-mix(in srgb, var(--border-color) 80%, transparent);
    border-radius: 999px;
    color: var(--secondary-text);
    background: color-mix(in srgb, var(--panel-background) 78%, var(--border-color) 22%);
    font-size: 9.8px;
    font-weight: 800;
    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: 1px solid color-mix(in srgb, currentColor 30%, transparent);
    border-left: 3px solid currentColor;
    border-radius: 7px;
    background:
        linear-gradient(90deg, color-mix(in srgb, currentColor 10%, transparent), transparent 42%),
        color-mix(in srgb, var(--panel-background) 88%, currentColor 12%);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 8%, transparent);
    font-size: 11.5px;
    line-height: 1;
    transition: background 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.sb-entry:hover[b-7ov57acdan] {
    border-color: color-mix(in srgb, currentColor 55%, transparent);
    background:
        linear-gradient(90deg, color-mix(in srgb, currentColor 16%, transparent), transparent 42%),
        color-mix(in srgb, var(--panel-background) 80%, currentColor 20%);
}

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

/* 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-style: dashed;
}

.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: 700;
    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-radius: 999px;
    color: color-mix(in srgb, currentColor 68%, var(--primary-text) 32%);
    background: color-mix(in srgb, currentColor 14%, transparent);
    font-size: 9.5px;
    font-weight: 800;
    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-body[b-7ov57acdan] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .absence-board-status-column[b-7ov57acdan] {
        width: var(--absence-board-status-column-width);
    }
}

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

/* Amber chip keeps the status colour in every state - it never turns blue. */
.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] {
    left: 4px;
    bottom: 4px;
    padding: 0 5px 0 12px;
    border: 1px solid rgba(224, 165, 58, 0.5);
    border-radius: 4px;
    color: #4a3204;
    background: #ffdf9e;
    box-shadow: none;
    font-size: 7.5px;
    font-weight: 850;
    letter-spacing: 0.2px;
}

.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: #2b1d02;
    border-color: rgba(255, 226, 160, 0.35);
    background: #f0be5c;
}

.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: "";
    position: absolute;
    left: 4px;
    top: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #b57a12;
    transform: translateY(-50%);
    animation: pendingPip-b-7ov57acdan 2.2s ease-in-out infinite;
}

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

/* Confirmed agency cards only need room for the badge on the right.
   Pending cards retain the wider safe area for both side labels. */
.assignment.agency:not(.awaiting-confirmation) .employee-name[b-7ov57acdan],
.assignment.agency.has-custom-hours:not(.awaiting-confirmation) .employee-name[b-7ov57acdan] {
    width: calc(100% - 46px);
}

@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:not(.awaiting-confirmation) .employee-name[b-7ov57acdan],
    .assignment.agency.has-custom-hours:not(.awaiting-confirmation) .employee-name[b-7ov57acdan] {
        width: calc(100% - 38px);
    }

    .assignment.agency.awaiting-confirmation .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;
    }

    .confirmation-badge[b-7ov57acdan] {
        left: 2px;
        padding-right: 2px;
        padding-left: 2px;
        font-size: 6.7px;
    }
}

@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:not(.awaiting-confirmation) .employee-name[b-7ov57acdan],
    .assignment.agency.has-custom-hours:not(.awaiting-confirmation) .employee-name[b-7ov57acdan] {
        width: calc(100% - 33px);
    }

    .assignment.agency.awaiting-confirmation .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;
    }
}
/* /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], .modal-role-select 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], .modal-role-select 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; }
.modal-role-select select[b-7bpouszrki] { max-width: 300px; }
.modal-role-select select option[b-7bpouszrki] { color: #172033; background: #ffffff; }
.modal-role-select select option:disabled[b-7bpouszrki] { color: #667085; }
.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; }

@keyframes ua-shimmer-b-7bpouszrki { to { background-position: -200% 0; } }

@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); }
}

@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);
}