/* Shared employee phone treatment for static login and authenticated pages.
   Desktop and System User sign-in keep their existing appearance. */
.page .sidebar .brand-panel .brand-name .ep-brand-subtitle { display: none !important; }
@media screen and (max-width: 760px) {
    /* Employee sign-in: selection also scopes this to the employee preview. */
    .page.login-only-layout .login-shell:has([value="employee"]:checked) {
        --login-ink: #153e38;
        --login-muted: #62756f;
        min-height: 100dvh !important;
        padding: 28px 22px max(28px, env(safe-area-inset-bottom)) !important;
        background: #f3f5f0 !important;
        align-items: center !important;
        font-family: "Segoe UI", system-ui, sans-serif;
    }
    .login-shell:has([value="employee"]:checked) .login-window-stack {
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0;
    }
    .page.login-only-layout .login-shell:has([value="employee"]:checked) .login-panel {
        width: 100% !important;
        padding: 36px 0 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }
    .login-shell:has([value="employee"]:checked) .login-beta-ribbon {
        inset: 0 0 auto auto !important;
        width: auto !important;
        height: auto !important;
        overflow: visible;
    }
    .login-shell:has([value="employee"]:checked) .login-beta-ribbon > span {
        position: static;
        display: block;
        width: auto;
        padding: 5px 9px;
        border: 1px solid #dbdfce;
        border-radius: 6px;
        color: #657148;
        background: #eaf0df;
        box-shadow: none;
        transform: none;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: .09em;
    }
    .login-shell:has([value="employee"]:checked) .login-brand {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr);
        gap: 3px 12px;
        align-items: center;
        justify-items: start;
        text-align: left;
        padding: 0 0 28px;
        border-bottom: 1px solid #dce3d9;
    }
    .login-shell:has([value="employee"]:checked) .login-brand img {
        grid-column: 1;
        grid-row: 1 / 3;
        width: 58px !important;
        height: 58px !important;
        margin: 0 !important;
        padding: 3px !important;
        border: 1px solid #dce3d9 !important;
        box-shadow: none !important;
    }
    .login-shell:has([value="employee"]:checked) .login-brand p {
        align-self: end;
        color: var(--login-muted) !important;
        font-size: 9px !important;
        line-height: 1.5;
        font-weight: 600;
        letter-spacing: .06em;
    }
    .login-shell:has([value="employee"]:checked) .login-brand strong {
        align-self: start;
        margin: 0;
        color: var(--login-ink) !important;
        font-size: 16px !important;
        line-height: 1.3;
        letter-spacing: -.025em;
        text-transform: none;
        font-weight: 750;
    }
    .login-shell:has([value="employee"]:checked) .login-title {
        margin: 28px 0 22px !important;
        padding: 0 !important;
        border: 0 !important;
        text-align: left !important;
    }
    .login-shell:has([value="employee"]:checked) .login-title::before {
        content: "EMPLOYEE PORTAL";
        display: block;
        margin-bottom: 8px;
        color: #426657;
        font-size: 10px;
        font-weight: 700;
        letter-spacing: .14em;
    }
    .login-shell:has([value="employee"]:checked) .login-title p {
        margin: 0 !important;
        color: var(--login-ink) !important;
        font-size: 29px !important;
        font-weight: 700 !important;
        line-height: 1.2;
        letter-spacing: -.04em;
    }
    .login-shell:has([value="employee"]:checked) .login-form {
        gap: 16px !important;
        padding: 22px 18px;
        background: #fff;
        border: 1px solid #e0e6dd;
        border-radius: 22px;
        box-shadow: 0 6px 24px #193d3010;
    }
    .login-shell:has([value="employee"]:checked) .login-form .form-control {
        min-height: 56px !important;
        border: 1px solid #cbd7cf !important;
        border-radius: 12px !important;
        background: #fafcf9 !important;
        color: #183d35 !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }
    .login-shell:has([value="employee"]:checked) .login-form .form-control:focus {
        border-color: #24715e !important;
        box-shadow: 0 0 0 3px #24715e1a !important;
    }
    .login-shell:has([value="employee"]:checked) .login-floating-field > span {
        color: #61746a !important;
    }
    .login-shell:has([value="employee"]:checked) .password-toggle-button {
        width: 48px !important;
        min-height: 48px;
        color: #386456 !important;
    }
    .login-shell:has([value="employee"]:checked) .login-options-row {
        gap: 8px;
        flex-wrap: wrap;
        font-size: 12px !important;
    }
    .login-shell:has([value="employee"]:checked) .remember-me-option {
        min-height: 44px;
        color: #344e43;
        font-size: 12px !important;
        gap: 8px;
    }
    .login-shell:has([value="employee"]:checked) .remember-me-option input {
        width: 19px !important;
        height: 19px !important;
        accent-color: #1c5947;
    }
    .login-shell:has([value="employee"]:checked) .login-inline-link-disabled {
        font-size: 12px !important;
        color: #697d73 !important;
    }
    .login-shell:has([value="employee"]:checked) .login-actions .btn {
        min-height: 54px !important;
        border: 1px solid #174f3f !important;
        border-radius: 12px !important;
        background: #174f3f !important;
        color: white !important;
        font-size: 16px !important;
        font-weight: 650 !important;
        box-shadow: 0 4px 10px #174f3f20 !important;
    }
    .login-shell:has([value="employee"]:checked) .login-actions .btn:hover {
        background: #103d30 !important;
    }
    .login-shell:has([value="employee"]:checked) .login-account-links {
        margin: 22px 0 0 !important;
        text-align: center;
    }
    .login-shell:has([value="employee"]:checked) .login-account-link-disabled {
        color: #6c7b71 !important;
        font-size: 12px !important;
    }
    .login-shell:has([value="employee"]:checked) :is(button, input):focus-visible {
        outline: 3px solid #3a8069;
        outline-offset: 3px;
    }

    /* Authenticated employee screens share the same quiet surfaces and ink. */
    body .page:has(.employee-mobile-tabbar) {
        --ep-brand: #1b6651;
        --ep-soft: #e6efe4;
        --ep-bg: #f3f5f0;
        --ep-surface: #fff;
        --ep-text: #173d33;
        --ep-muted: #64766d;
        --ep-border: #dfe6dc;
        --ep-radius: 20px;
    }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) {
        --ep-brand: #9bd6bb;
        --ep-soft: #263f35;
        --ep-bg: #14231e;
        --ep-surface: #1d3028;
        --ep-text: #edf4ec;
        --ep-muted: #b5c8ba;
        --ep-border: #385044;
    }
    body .page:has(.employee-home-redesign) {
        --ep-brand: #008782;
        --ep-soft: #eaf8f7;
        --ep-bg: #f0f7fc;
        --ep-text: #101e47;
        --ep-muted: #53677f;
        --ep-border: #dce5f1;
        --ep-radius: 16px;
    }
    html[data-theme="dark"] body .page:has(.employee-home-redesign) {
        --ep-brand: #74dfd4;
        --ep-soft: #193f49;
        --ep-bg: #101e30;
        --ep-surface: #182b42;
        --ep-text: #edf5ff;
        --ep-muted: #aec2dc;
        --ep-border: #304862;
    }
    html body .page:not(.login-only-layout):has(.employee-mobile-tabbar) > .sidebar,
    html body .page:not(.login-only-layout):has(.employee-mobile-tabbar) > .sidebar .brand-panel {
        background: var(--ep-bg) !important;
        border-bottom: 1px solid var(--ep-border) !important;
        box-shadow: none !important;
    }
    body .page:has(.employee-mobile-tabbar) .sidebar .brand-panel .employee-mobile-header-actions > :is(.theme-toggle, .employee-mobile-avatar-trigger),
    body .page:has(.employee-mobile-tabbar) .sidebar .brand-panel .employee-mobile-header-actions > .notification-menu > summary {
        background: var(--ep-surface) !important;
        border-color: var(--ep-border) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign {
        gap: 14px !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card {
        padding: 16px 18px !important;
        border-radius: 18px !important;
        background: linear-gradient(115deg, #edf7ff, #e0f2ff) !important;
        border: 1px solid #fff !important;
        color: var(--ep-text) !important;
        box-shadow: 0 4px 14px #90b7ce10 !important;
        overflow: hidden !important;
        position: relative;
        isolation: isolate;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card::after {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        border: 24px solid #ffffff12;
        border-radius: 50%;
        right: -68px;
        top: -64px;
        pointer-events: none;
        z-index: -1;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card h1 {
        color: var(--ep-text) !important;
        font-size: 23px !important;
        letter-spacing: -.04em;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-home-subtitle {
        color: var(--ep-muted) !important;
        font-size: 12px;
        margin-bottom: 10px;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-home-datetime {
        padding-top: 9px;
        border-top: 1px solid #bedceb80;
        gap: 8px 14px;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-line {
        color: var(--ep-text) !important;
        font-size: 11px !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-line-icon {
        background-color: var(--ep-text) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-quick-links-heading {
        margin-bottom: -6px !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign h2 {
        color: var(--ep-text) !important;
        font-size: 15px !important;
        letter-spacing: -.025em;
        font-weight: 700 !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-grid {
        gap: 6px !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        padding: 12px 6px !important;
        border: 1px solid var(--ep-border);
        border-radius: 16px;
        background: var(--ep-surface);
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card {
        grid-template-columns: minmax(0, 1fr) !important;
        grid-template-rows: 44px auto !important;
        justify-items: center;
        align-content: start !important;
        padding: 0 2px !important;
        min-height: 82px !important;
        gap: 7px !important;
        border: 0 !important;
        border-radius: 10px !important;
        background: transparent !important;
        text-align: center !important;
        box-shadow: none !important;
        transition: border-color .15s, background-color .15s;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card > span {
        grid-area: 1 / 1 !important;
        display: grid !important;
        place-items: center;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        mask: none !important;
        -webkit-mask: none !important;
        color: #008d86 !important;
        background: #e3f6f3 !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .ep-service-icon svg {
        width: 24px;
        height: 24px;
        display: block;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .is-employment > .ep-service-icon { color: #086fd3 !important; background: #e7f0ff !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .is-payroll > .ep-service-icon { color: #995300 !important; background: #fff2e2 !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .is-file-leave > .ep-service-icon { color: #8d42c7 !important; background: #f2eaff !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card strong {
        grid-area: 2 / 1 !important;
        color: var(--ep-text) !important;
        font-size: 10.5px !important;
        line-height: 1.3 !important;
        font-weight: 650 !important;
        white-space: normal !important;
        overflow-wrap: normal;
        max-width: 100%;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card small {
        position: absolute !important;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card:is(:hover, :focus-visible) {
        border-color: var(--ep-brand) !important;
        background: var(--ep-soft) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .is-file-leave small {
        position: static !important;
        grid-area: 3 / 1 !important;
        justify-self: center;
        text-align: center;
        width: auto;
        height: auto;
        clip-path: none;
        padding: 0;
        margin-top: -5px;
        background: transparent !important;
        color: var(--ep-muted) !important;
        font-size: 9px !important;
        line-height: 1.2 !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }
    body .page:has(.employee-mobile-tabbar) main .content.content .employee-home-redesign :is(.employee-mobile-requests-card, .employee-mobile-announcements) {
        padding: 12px !important;
        gap: 10px !important;
        border: 1px solid #ffffff60 !important;
        border-radius: 20px !important;
        background: var(--ep-surface) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button {
        border-radius: 11px !important;
        padding: 8px 5px !important;
        background: var(--ep-bg) !important;
        min-height: 64px !important;
        gap: 3px !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button strong {
        font-size: 22px !important;
        letter-spacing: -.05em;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .pending strong { color: #a85a06 !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .processed strong { color: #007e70 !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .attention strong { color: #c13951 !important; }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .pending strong { color: #ffc370 !important; }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .processed strong { color: #68e0c4 !important; }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .attention strong { color: #ff93a6 !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button.is-active {
        background: var(--ep-soft) !important;
        border-color: var(--ep-brand) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button span {
        font-size: 10px !important;
        line-height: 1.4 !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign :is(.employee-mobile-request-empty, .employee-mobile-request-item) {
        padding: 12px !important;
        border: 1px solid var(--ep-border) !important;
        border-radius: 12px !important;
        background: var(--ep-bg) !important;
        color: var(--ep-text) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign :is(.employee-mobile-request-empty, .employee-mobile-request-item) strong {
        color: var(--ep-text) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign :is(.employee-mobile-request-empty, .employee-mobile-request-item) :is(span, p) {
        color: var(--ep-muted) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-card {
        border-radius: 12px !important;
        padding: 12px !important;
        border-left: 3px solid var(--ep-brand) !important;
    }
    body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar {
        border-top-color: var(--ep-border) !important;
        box-shadow: 0 -4px 18px #173d3308 !important;
    }
    body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar .employee-mobile-tab.active {
        background: var(--ep-soft) !important;
        color: var(--ep-brand) !important;
        border-radius: 14px !important;
    }
    body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab strong {
        display: block !important;
        width: 100%;
        height: auto !important;
        font-size: 10px !important;
        line-height: 1.4 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-request-menu-panel {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-request-menu-card {
        padding: 20px 16px !important;
        border: 1px solid var(--ep-border) !important;
        border-radius: 18px !important;
        background: var(--ep-surface) !important;
        box-shadow: none !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-request-menu-card::before {
        display: none !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-request-menu-card strong {
        color: var(--ep-text) !important;
        font-size: 14px !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-request-menu-card small {
        color: var(--ep-muted) !important;
        font-size: 12px !important;
        line-height: 1.6 !important;
    }
    /* Reference-inspired dashboard details; keep the four services on one row. */
    body .page:has(.employee-home-redesign) .sidebar .brand-panel .brand-name .ep-brand-subtitle {
        display: block !important;
        max-width: 138px;
        margin-top: 3px;
        color: var(--ep-muted) !important;
        font-size: 8px;
        font-weight: 400;
        line-height: 1.35;
        white-space: normal;
        letter-spacing: 0;
        text-transform: none !important;
    }
    html body .page:not(.login-only-layout):has(.employee-home-redesign) > .sidebar,
    html body .page:not(.login-only-layout):has(.employee-home-redesign) > .sidebar .brand-panel {
        background: var(--ep-surface) !important;
        border-bottom-color: transparent !important;
        border-radius: 0 0 16px 16px;
    }
    body .page:has(.employee-home-redesign) .sidebar .brand-panel .employee-mobile-header-actions > .theme-toggle,
    body .page:has(.employee-home-redesign) .sidebar .brand-panel .employee-mobile-header-actions > .notification-menu > summary {
        border-radius: 50% !important;
        color: var(--ep-muted) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card::before {
        content: "";
        position: absolute;
        right: -8px;
        top: -12px;
        width: 158px;
        height: 104px;
        background: url("../images/employee-civic-hall.svg") center / contain no-repeat;
        opacity: .65;
        pointer-events: none;
        z-index: -1;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign :is(.employee-mobile-quick-links-heading, .employee-mobile-requests-heading, .employee-mobile-announcement-heading) {
        display: flex !important;
        align-items: center;
        justify-content: space-between !important;
        gap: 8px;
        min-height: 28px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    body .page:has(.employee-home-redesign) .ep-section-link {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 7px;
        min-height: 28px;
        margin: 0;
        padding: 0 2px;
        border: 0;
        background: transparent;
        color: var(--ep-brand);
        font-size: 11px;
        font-weight: 500;
        white-space: nowrap;
        text-decoration: none;
    }
    .ep-section-link > span { font-size: 23px; line-height: 1; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .ep-quick-services {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid #ffffff60;
        border-radius: 20px;
        background: var(--ep-surface);
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-grid {
        margin-top: 0 !important;
        padding: 4px 0 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card > .ep-service-icon {
        border-radius: 13px !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs {
        gap: 8px !important;
        margin-top: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button {
        position: relative;
        display: grid !important;
        grid-template-columns: 21px minmax(0, 1fr) !important;
        grid-template-rows: 28px auto !important;
        align-content: start;
        justify-items: start;
        gap: 4px 8px !important;
        min-height: 68px !important;
        padding: 9px 10px !important;
        border: 1px solid transparent !important;
        border-radius: 14px !important;
        text-align: left;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .pending { background: #fff7ea !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .processed { background: #e4f8f3 !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .attention { background: #fff0f4 !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button strong { grid-area: 1 / 2; align-self: center; font-size: 23px !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button > span { grid-area: 2 / 1 / 3 / -1; padding-right: 12px; font-size: 9px !important; }
    .ep-status-icon { grid-area: 1 / 1; align-self: center; width: 21px; height: 21px; }
    .pending .ep-status-icon { color: #eea100; }
    .processed .ep-status-icon { color: #00a98f; }
    .attention .ep-status-icon { color: #f4527a; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button::after {
        content: "›";
        position: absolute;
        right: 7px;
        bottom: 8px;
        color: var(--ep-muted);
        font-size: 18px;
        line-height: 1;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs button.is-active {
        border-color: var(--ep-brand) !important;
        box-shadow: inset 0 0 0 1px var(--ep-brand) !important;
    }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .pending { background: #3d3221 !important; }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .processed { background: #163e3c !important; }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-request-tabs .attention { background: #41283c !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-viewport {
        padding: 0 !important;
        border: 0;
        background: transparent;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-card {
        position: relative;
        flex-basis: 100% !important;
        padding: 14px 12px 14px 54px !important;
        border-left: 0 !important;
        border-radius: 14px !important;
        background: var(--ep-soft) !important;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-card::before {
        content: "";
        position: absolute;
        left: 14px;
        top: 50%;
        width: 27px;
        height: 27px;
        transform: translateY(-50%);
        background: #00958e;
        mask: url("../icons/sidebar/megaphone.svg") center / contain no-repeat;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-card > span {
        padding: 0 !important;
        background: transparent !important;
        color: var(--ep-brand) !important;
        font-size: 9px !important;
        letter-spacing: .06em;
    }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-card strong { font-size: 13px !important; }
    body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-announcement-card::after {
        content: "";
        position: absolute;
        left: 46px;
        top: 14px;
        bottom: 14px;
        width: 1px;
        background: var(--ep-border);
    }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card {
        background: linear-gradient(115deg, #17334b, #1a4558) !important;
        border-color: var(--ep-border) !important;
    }
    html[data-theme="dark"] body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card::before { opacity: .3; }
    body .page:has(.employee-home-redesign) .employee-mobile-tabbar { border-radius: 18px 18px 0 0; }
    body .page:has(.employee-home-redesign) .employee-mobile-tabbar .employee-mobile-tab.active {
        position: relative;
        background: transparent !important;
        color: #008a86 !important;
    }
    body .page:has(.employee-home-redesign) .employee-mobile-tabbar .employee-mobile-tab.active::after {
        content: "";
        position: absolute;
        bottom: -3px;
        left: 25%;
        width: 50%;
        height: 3px;
        border-radius: 3px;
        background: currentColor;
    }
    body .page:has(.employee-home-redesign) .employee-mobile-tabbar .is-dashboard > span { mask-image: url("../icons/sidebar/home.svg") !important; }
    html[data-theme="dark"] body .page:has(.employee-home-redesign) .employee-mobile-tabbar .employee-mobile-tab.active { color: #5fddd1 !important; }
    @media (max-width: 360px) {
        body .page:has(.employee-home-redesign) .sidebar .brand-panel .brand-name .ep-brand-subtitle { display: none !important; }
        body .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar.employee-mobile-tabbar .employee-mobile-tab strong { font-size: 9px !important; }
        .page.login-only-layout .login-shell:has([value="employee"]:checked) { padding: 20px 16px !important; }
        .login-shell:has([value="employee"]:checked) .login-form { padding: 18px 14px; }
        .login-shell:has([value="employee"]:checked) .login-brand strong { font-size: 14px !important; }
        body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-hero-card { padding: 14px !important; }
        body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-grid { gap: 2px !important; padding-inline: 3px !important; }
        body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card strong { font-size: 9px !important; }
    }
    @media (prefers-reduced-motion: reduce) {
        body .page:has(.employee-mobile-tabbar) .content.content .employee-home-redesign .employee-mobile-glance-card { transition: none !important; }
    }
}