@import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;500;600;700;800;850&display=swap");

.employee-mobile-home {
    display: none;
}

.employee-attendance-mobile {
    display: none;
}

@media (max-width: 900px) {
    .content { padding-inline: 14px; }
    .top-row { padding-inline: 14px; }
    .system-title strong { font-size: .95rem; }
    .system-title span { font-size: .72rem; }

    .table-responsive,
    .grid-scroll,
    .records-table-wrap { overscroll-behavior-inline: contain; }

    .card,
    .panel,
    .dashboard-panel,
    .content-panel,
    .form-panel,
    .report-panel,
    .table-panel { border-radius: var(--hris-radius-md); }
}

@supports not (height: 100svh) {
    @media (max-width: 760px) {
        .page:has(.employee-mobile-tabbar),
        .page:has(.employee-mobile-tabbar) main {
            height: 100dvh;
            min-height: 100dvh;
        }

        .page:has(.employee-mobile-tabbar) .content {
            height: calc(100dvh - var(--employee-mobile-header-height) - var(--employee-mobile-tabbar-space)) !important;
        }
    }
}

@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) {
        --employee-mobile-header-height: 72px;
        --employee-mobile-tabbar-height: 86px;
        --employee-mobile-tabbar-space: calc(var(--employee-mobile-tabbar-height) + env(safe-area-inset-bottom));
        --employee-mobile-font: "Nunito Sans", "Inter", "Segoe UI Variable", "Segoe UI", "Microsoft New Tai Lue", Arial, sans-serif;
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
        background: #f8fafc;
        box-shadow: none;
        font-family: var(--employee-mobile-font);
    }

    .page:has(.employee-mobile-tabbar) main {
        height: 100svh;
        min-height: 100svh;
        overflow: hidden;
        background: #f8fafc;
        box-shadow: none;
    }

    .page:has(.employee-mobile-tabbar) .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 95;
        border-bottom: 1px solid rgba(226, 232, 240, .92);
        box-shadow: 0 8px 22px rgba(15, 23, 42, .08);
    }

    .page:has(.employee-mobile-tabbar) .top-row {
        display: none;
    }

    .page:has(.employee-mobile-tabbar) .content {
        height: calc(100svh - var(--employee-mobile-header-height) - var(--employee-mobile-tabbar-space));
        min-height: 0;
        margin-top: var(--employee-mobile-header-height);
        margin-bottom: var(--employee-mobile-tabbar-space);
        padding: .75rem .9rem 1rem;
        font-family: var(--employee-mobile-font);
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-gutter: auto;
        scrollbar-width: none;
        scrollbar-color: transparent transparent;
        background: #f8fafc;
        box-shadow: none;
        -webkit-overflow-scrolling: touch;
    }

    .page:has(.employee-mobile-tabbar) .content::-webkit-scrollbar {
        width: 0;
        height: 0;
    }

    .page:has(.employee-mobile-tabbar) .content::-webkit-scrollbar-track {
        margin-block: .55rem;
        background: transparent;
    }

    .page:has(.employee-mobile-tabbar) .content::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: transparent;
    }

    .page:has(.employee-mobile-tabbar) .content::-webkit-scrollbar-thumb:hover {
        background: transparent;
    }

    .page:has(.employee-mobile-tabbar) .employee-portal {
        padding-bottom: 0 !important;
        font-family: var(--employee-mobile-font);
    }

    .page:has(.employee-mobile-tabbar) .sidebar,
    .page:has(.employee-mobile-tabbar) .brand-panel,
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar,
    .page:has(.employee-mobile-tabbar) .employee-mobile-tab,
    .page:has(.employee-mobile-tabbar) .employee-mobile-request-panel,
    .page:has(.employee-mobile-tabbar) .employee-mobile-more-panel,
    .page:has(.employee-mobile-tabbar) button,
    .page:has(.employee-mobile-tabbar) input,
    .page:has(.employee-mobile-tabbar) select,
    .page:has(.employee-mobile-tabbar) textarea {
        font-family: var(--employee-mobile-font) !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-portal > .employee-hero,
    .page:has(.employee-mobile-tabbar) .employee-portal > .employee-portal-grid {
        display: none !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-panel {
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-table-wrap {
        display: none !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card-list {
        display: grid !important;
        gap: .72rem;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card {
        gap: .48rem;
        padding: .78rem;
        border-radius: 13px;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card-head {
        gap: .62rem;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card-head strong {
        font-size: .84rem;
        font-weight: 720;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card-head small {
        padding: .2rem .42rem;
        font-size: .58rem;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card-grid {
        gap: .26rem;
    }

    .page:has(.employee-mobile-tabbar) .employee-service-record-card-grid p {
        font-size: .72rem;
    }

    .employee-mobile-home {
        display: grid;
        gap: .9rem;
    }

    .employee-mobile-hero-card {
        position: relative;
        isolation: isolate;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        min-height: 142px;
        padding: 1.08rem 5.35rem 1.05rem 1.18rem;
        overflow: hidden;
        border: 0;
        border-radius: 18px;
        color: #ffffff;
        background: #48b8ad;
        box-shadow: 0 14px 28px rgba(15, 118, 110, .14);
    }

    .employee-mobile-hero-card::before {
        content: none;
    }

    .employee-mobile-hero-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .18), transparent 28%),
            radial-gradient(circle at 18% 100%, rgba(13, 148, 136, .18), transparent 34%);
        pointer-events: none;
        z-index: 0;
    }

    .employee-mobile-hero-copy {
        position: relative;
        z-index: 2;
        min-width: 0;
        padding-left: 0;
    }

    .employee-mobile-eyebrow {
        display: block;
        margin-bottom: .38rem;
        color: rgba(255, 255, 255, .82);
        font-size: .82rem;
        font-weight: 720;
        letter-spacing: .14em;
        line-height: 1;
        text-transform: uppercase;
    }

    .employee-mobile-hero-card h1 {
        display: -webkit-box;
        max-width: min(19ch, 100%);
        min-height: 1.12em;
        margin: 0 0 .54rem;
        color: #ffffff;
        font-size: clamp(1.55rem, 8.2vw, 2.25rem);
        font-weight: 780;
        letter-spacing: 0;
        line-height: 1.02;
        overflow: hidden;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .employee-mobile-hero-role {
        display: -webkit-box;
        max-width: min(19rem, 100%);
        margin: 0 0 .54rem;
        color: #475569;
        font-size: .82rem;
        font-weight: 560;
        line-height: 1.22;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .employee-mobile-hero-line {
        display: flex;
        align-items: center;
        gap: .44rem;
        max-width: 100%;
        margin: .22rem 0 0;
        color: rgba(255, 255, 255, .88);
        font-size: clamp(.78rem, 3.2vw, .9rem);
        font-weight: 580;
        line-height: 1.25;
    }

    .employee-mobile-line-icon {
        width: 1rem;
        height: 1rem;
        flex: 0 0 1rem;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .employee-mobile-line-icon.icon-calendar {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    }

    .employee-mobile-line-icon.icon-clock {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
    }

    .employee-mobile-hero-badge {
        display: grid;
        justify-items: center;
        margin-left: .7rem;
    }

    .employee-mobile-hero-badge span {
        display: grid;
        place-items: center;
        width: clamp(54px, 15.5vw, 66px);
        height: clamp(54px, 15.5vw, 66px);
        border: 2px solid rgba(255, 255, 255, .86);
        border-radius: 50%;
        background: rgba(255, 255, 255, .08);
        color: #fff;
        font-size: 1.05rem;
        font-weight: 800;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
    }

    .employee-mobile-glance-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .48rem;
        border: 0;
    }

    .employee-mobile-glance-card {
        position: relative;
        display: grid;
        place-items: center;
        align-content: center;
        justify-items: center;
        gap: .34rem;
        aspect-ratio: 1;
        min-height: 0;
        padding: .48rem .2rem;
        overflow: hidden;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 14px;
        background: #ffffff;
        color: #0f172a;
        text-decoration: none;
        box-shadow: none;
        text-align: center;
    }

    .employee-mobile-glance-card:last-child {
        border-bottom: 1px solid rgba(203, 213, 225, .82);
    }

    .employee-mobile-glance-card::before {
        content: none;
    }

    .employee-mobile-glance-card.is-attendance {
        --glance-accent: #0d9488;
    }

    .employee-mobile-glance-card.is-leave {
        --glance-accent: #2563eb;
    }

    .employee-mobile-glance-card.is-request {
        --glance-accent: #ca8a04;
    }

    .employee-mobile-glance-card.is-profile {
        --glance-accent: #7c3aed;
    }

    .employee-mobile-glance-icon {
        width: 1.34rem;
        height: 1.34rem;
        background: var(--glance-accent, #0d9488);
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .employee-mobile-glance-icon.icon-attendance {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-icon.icon-leave {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6M9 13h6M9 17h6'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-icon.icon-request {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='8' y='2' width='8' height='4' rx='1'/%3E%3Cpath d='M9 4H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2h-3M9 13l2 2 4-4'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-icon.icon-profile {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-card strong {
        color: #334155;
        font-size: clamp(.58rem, 2.6vw, .68rem);
        font-weight: 720;
        line-height: 1.08;
        overflow-wrap: anywhere;
    }

    .employee-mobile-announcements {
        display: grid;
        gap: .64rem;
        padding: .82rem .86rem .9rem;
        border: 1px solid rgba(203, 213, 225, .86);
        border-radius: 12px;
        background: rgba(255, 255, 255, .84);
        box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
    }

    .employee-mobile-announcement-heading {
        display: flex;
        align-items: center;
        gap: .48rem;
        padding-inline: 0;
    }

    .employee-mobile-announcement-heading h2 {
        margin: 0;
        color: #1e293b;
        font-size: 1.02rem;
        font-weight: 720;
        letter-spacing: 0;
        line-height: 1.1;
        text-transform: none;
    }

    .employee-mobile-section-icon.icon-announcement {
        width: 1.55rem;
        height: 1.55rem;
        flex-basis: 1.55rem;
        border: 0;
        border-radius: 0;
        background: url("/images/megaphone.png") center / contain no-repeat;
        mask-image: none;
    }

    .employee-mobile-section-icon.icon-request {
        width: 1.55rem;
        height: 1.55rem;
        flex-basis: 1.55rem;
        border: 0;
        border-radius: 0;
        background: url("/images/clipboard.png") center / contain no-repeat;
        mask-image: none;
    }

    .employee-mobile-announcement-viewport {
        position: relative;
        min-height: 96px;
        overflow: hidden;
        border-radius: 10px;
    }

    .employee-mobile-announcement-track {
        --employee-mobile-announcement-gap: .75rem;
        display: flex;
        gap: var(--employee-mobile-announcement-gap);
        width: 100%;
        min-height: 96px;
        animation: employee-mobile-announcement-rail 17.4s infinite cubic-bezier(.42, 0, .2, 1);
        will-change: transform;
    }

    .employee-mobile-announcement-track.is-static {
        animation: none;
    }

    .employee-mobile-announcement-card {
        position: relative;
        flex: 0 0 100%;
        display: grid;
        align-content: center;
        gap: .22rem;
        padding: .72rem .78rem;
        border: 1px solid rgba(226, 232, 240, .96);
        border-radius: 10px;
        background: rgba(255, 255, 255, .76);
        box-shadow: none;
        text-align: left;
        cursor: pointer;
    }

    .employee-mobile-announcement-card.is-empty {
        cursor: default;
    }

    .employee-mobile-announcement-card span {
        width: max-content;
        max-width: 100%;
        padding: .18rem .48rem;
        border-radius: 999px;
        color: #64748b;
        background: #f1f5f9;
        font-size: .64rem;
        font-weight: 800;
        letter-spacing: .08em;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .employee-mobile-announcement-card strong {
        display: -webkit-box;
        color: #152033;
        font-size: .9rem;
        font-weight: 640;
        line-height: 1.24;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .employee-mobile-announcement-card p {
        display: -webkit-box;
        margin: 0;
        color: #64748b;
        font-size: .74rem;
        font-weight: 500;
        line-height: 1.25;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .employee-announcement-detail-modal {
        position: fixed;
        inset: 0;
        z-index: 2500;
        display: grid;
        place-items: center;
        padding: 1rem;
    }

    .employee-announcement-detail-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(15, 23, 42, .54);
        backdrop-filter: blur(8px);
    }

    .employee-announcement-detail-panel {
        position: relative;
        z-index: 1;
        width: min(100%, 340px);
        max-height: min(74vh, 560px);
        overflow: auto;
        padding: 1.15rem;
        border-radius: 20px;
        background: #fff;
        color: #0f172a;
        box-shadow: 0 28px 78px rgba(15, 23, 42, .26);
    }

    .employee-announcement-detail-close {
        position: absolute;
        top: .8rem;
        right: .8rem;
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 999px;
        background: #eef5f7;
        color: #475569;
        font-size: 1.32rem;
        line-height: 1;
    }

    .employee-announcement-detail-panel > span {
        display: inline-flex;
        max-width: calc(100% - 44px);
        margin-bottom: .6rem;
        padding: .24rem .55rem;
        border-radius: 999px;
        background: rgba(20, 184, 166, .1);
        color: #0f766e;
        font-size: .66rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .employee-announcement-detail-panel h2 {
        margin: 0 2rem .65rem 0;
        color: #187c73;
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .employee-announcement-detail-panel p {
        margin: 0;
        color: #475569;
        font-size: .9rem;
        line-height: 1.55;
        white-space: pre-wrap;
    }

    .employee-mobile-requests-card {
        display: grid;
        gap: .68rem;
        padding: .82rem .86rem .9rem;
        border: 1px solid rgba(203, 213, 225, .86);
        border-radius: 12px;
        background: rgba(255, 255, 255, .84);
        box-shadow: 0 10px 28px rgba(15, 23, 42, .045);
    }

    .employee-mobile-requests-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .75rem;
    }

    .employee-mobile-requests-title {
        min-width: 0;
        display: flex;
        align-items: center;
        gap: .48rem;
    }

    .employee-mobile-requests-heading h2 {
        margin: 0;
        color: #1e293b;
        font-size: 1.02rem;
        font-weight: 720;
        line-height: 1.1;
    }

    .employee-mobile-requests-heading span {
        display: block;
        margin-top: .16rem;
        color: #64748b;
        font-size: .7rem;
        font-weight: 520;
        line-height: 1.15;
    }

    .employee-mobile-requests-heading a {
        flex: 0 0 auto;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #0f766e;
        font-size: .78rem;
        font-weight: 760;
        line-height: 1;
        text-decoration: none;
    }

    .employee-mobile-request-tabs {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 0;
        border: 1px solid rgba(226, 232, 240, .96);
        border-radius: 12px;
        overflow: hidden;
        background: #fff;
    }

    .employee-mobile-request-tabs button {
        min-width: 0;
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
        align-items: center;
        gap: .28rem;
        min-height: 62px;
        padding: .58rem .52rem;
        border: 0;
        border-right: 1px solid rgba(226, 232, 240, .94);
        border-radius: 0;
        background: #fff;
        color: #64748b;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition: transform .16s ease, color .16s ease, background .16s ease, box-shadow .16s ease;
        box-shadow: none;
    }

    .employee-mobile-request-tabs button:last-child {
        border-right: 0;
    }

    .employee-mobile-request-tabs button:active {
        transform: scale(.97);
    }

    .employee-mobile-request-tabs button.is-active {
        color: #0f766e;
        border-color: rgba(226, 232, 240, .94);
        background: #f0fdfa;
        box-shadow: none;
    }

    .employee-mobile-request-tabs span {
        min-width: 0;
        overflow: hidden;
        color: inherit;
        font-size: .66rem;
        font-weight: 620;
        letter-spacing: 0;
        line-height: 1.08;
        text-overflow: ellipsis;
    }

    .employee-mobile-request-tabs strong {
        color: inherit;
        font-size: 1.1rem;
        font-weight: 800;
        line-height: 1;
    }

    .employee-mobile-request-tabs .pending strong {
        color: #ca8a04;
    }

    .employee-mobile-request-tabs .processed strong {
        color: #16a34a;
    }

    .employee-mobile-request-tabs .attention strong {
        color: #dc2626;
    }

    .employee-mobile-request-list {
        display: grid;
        gap: .5rem;
    }

    .employee-mobile-request-list.is-revealed,
    .employee-mobile-request-empty.is-revealed {
        animation: employee-mobile-request-slide-down .28s cubic-bezier(.2, .9, .25, 1) both;
        transform-origin: top center;
    }

    .employee-mobile-request-empty.is-collapsed-hint {
        border-style: dashed;
        background: #fbfefe;
    }

    .employee-mobile-request-item,
    .employee-mobile-request-empty {
        display: grid;
        gap: .28rem;
        padding: .66rem .7rem;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #f8fafc;
    }

    .employee-mobile-request-item {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .employee-mobile-request-item strong,
    .employee-mobile-request-empty strong {
        color: #142033;
        font-size: .78rem;
        font-weight: 650;
        line-height: 1.2;
    }

    .employee-mobile-request-item span,
    .employee-mobile-request-empty span {
        color: #64748b;
        font-size: .68rem;
        font-weight: 500;
        line-height: 1.25;
    }

    .employee-mobile-request-item small {
        padding: .18rem .42rem;
        border-radius: 999px;
        color: #0f766e;
        background: #e6f6f4;
        font-size: .62rem;
        font-weight: 650;
        white-space: nowrap;
    }

    .employee-mobile-request-item p {
        grid-column: 1 / -1;
        margin: 0;
        color: #64748b;
        font-size: .68rem;
        font-weight: 500;
        line-height: 1.25;
    }

    @keyframes employee-mobile-announcement-rail {
        0%,
        28.7% {
            transform: translateX(0);
        }

        33.3%,
        62% {
            transform: translateX(calc(-100% - var(--employee-mobile-announcement-gap)));
        }

        66.6%,
        95.3% {
            transform: translateX(calc(-200% - (var(--employee-mobile-announcement-gap) * 2)));
        }

        100% {
            transform: translateX(calc(-300% - (var(--employee-mobile-announcement-gap) * 3)));
        }
    }

    @keyframes employee-mobile-request-slide-down {
        from {
            opacity: 0;
            transform: translateY(-10px) scaleY(.92);
        }

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

    .employee-mobile-summary-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .78rem;
    }

    .employee-mobile-summary-card {
        display: grid;
        min-width: 0;
        min-height: 148px;
        padding: 1rem .92rem .86rem;
        border: 1px solid rgba(226, 232, 240, .9);
        border-radius: 16px;
        background: #fff;
        color: #0f172a;
        text-decoration: none;
        box-shadow: 0 12px 26px rgba(15, 23, 42, .055);
    }

    .employee-mobile-summary-label {
        color: #2563eb;
        font-size: .82rem;
        font-weight: 800;
        letter-spacing: .14em;
        line-height: 1.05;
        text-transform: uppercase;
    }

    .employee-mobile-summary-value {
        align-self: center;
        display: -webkit-box;
        margin: .72rem 0;
        color: #0f172a;
        font-size: clamp(1.05rem, 5vw, 1.62rem);
        font-weight: 800;
        letter-spacing: 0;
        line-height: 1.02;
        overflow: hidden;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .employee-mobile-summary-card small {
        align-self: end;
        padding-top: .65rem;
        border-top: 1px solid #eef2f7;
        color: #64748b;
        font-size: .82rem;
        font-weight: 500;
        line-height: 1.2;
    }

    .summary-status .employee-mobile-summary-label {
        color: #16a34a;
    }

    .summary-position .employee-mobile-summary-label {
        color: #ea580c;
    }

    .summary-contact .employee-mobile-summary-label {
        color: #e11d48;
    }

    .employee-mobile-quick-panel {
        display: grid;
        gap: .72rem;
        padding-top: .15rem;
    }

    .employee-mobile-section-title {
        display: flex;
        align-items: center;
        gap: .58rem;
        color: #1f2937;
        font-size: 1rem;
        font-weight: 800;
        letter-spacing: .07em;
        text-transform: uppercase;
    }

    .employee-mobile-section-icon {
        width: 1.35rem;
        height: 1.35rem;
        flex: 0 0 1.35rem;
        border: 2px solid #34a57e;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 50%, #34a57e 0 18%, transparent 19%),
            conic-gradient(from -40deg, #34a57e 0 72%, transparent 73%);
    }

    .employee-mobile-quick-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .68rem;
    }

    .employee-mobile-quick-grid a {
        display: grid;
        place-items: center;
        min-height: 52px;
        padding: .55rem .65rem;
        border: 1px solid rgba(203, 213, 225, .86);
        border-radius: 14px;
        background: #fff;
        color: #0f766e;
        font-size: .84rem;
        font-weight: 750;
        line-height: 1.12;
        text-align: center;
        text-decoration: none;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .045);
    }

    .employee-attendance-mobile {
        display: grid;
        gap: .78rem;
    }

    .employee-attendance-desktop-card,
    .employee-attendance-page > .employee-portal-heading {
        display: none !important;
    }

    .employee-attendance-loading-backdrop {
        position: fixed;
        inset: var(--employee-mobile-header-height, 72px) 0 var(--employee-mobile-tabbar-space, 86px);
        z-index: 110;
        display: grid;
        place-items: center;
        padding: 1rem;
        background: rgba(248, 250, 252, .48);
        backdrop-filter: blur(7px);
        -webkit-backdrop-filter: blur(7px);
    }

    .employee-attendance-loading {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        gap: .12rem .62rem;
        width: min(310px, calc(100vw - 2.4rem));
        padding: .88rem .92rem;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 18px;
        background: rgba(255, 255, 255, .96);
        color: #0f172a;
        box-shadow: 0 20px 52px rgba(15, 23, 42, .16);
        animation: employee-attendance-loading-pop .18s ease-out both;
    }

    .employee-attendance-loading span {
        grid-row: 1 / span 2;
        width: 1.28rem;
        height: 1.28rem;
        border: 3px solid rgba(15, 118, 110, .18);
        border-top-color: #0f766e;
        border-radius: 999px;
        animation: employee-attendance-loading-spin .72s linear infinite;
    }

    .employee-attendance-loading strong {
        color: #1e293b;
        font-size: .84rem;
        font-weight: 720;
        line-height: 1.1;
    }

    .employee-attendance-loading small {
        color: #64748b;
        font-size: .68rem;
        font-weight: 520;
        line-height: 1.16;
    }

    .employee-attendance-log-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        justify-content: center;
        gap: .38rem;
        width: 100%;
        margin-inline: auto;
    }

    .employee-attendance-log-card {
        position: relative;
        min-width: 0;
        min-height: 76px;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: .28rem;
        padding: .72rem .16rem .58rem;
        overflow: hidden;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 11px;
        background: #fff;
        text-align: center;
        box-shadow: none;
    }

    .employee-attendance-log-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 3px;
        background: #0f766e;
        opacity: .9;
    }

    .employee-attendance-log-card.is-present::before {
        background: #0f766e;
    }

    .employee-attendance-log-card.is-empty::before {
        background: #dc2626;
    }

    .employee-attendance-log-card.is-rest::before {
        background: #94a3b8;
    }

    .employee-attendance-log-card span {
        color: #64748b;
        font-size: .58rem;
        font-weight: 850;
        letter-spacing: .08em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .employee-attendance-log-card strong {
        color: #0f172a;
        font-size: clamp(.82rem, 3.6vw, .98rem);
        font-weight: 850;
        letter-spacing: 0;
        line-height: 1;
        white-space: nowrap;
    }

    .employee-attendance-log-card small {
        color: #94a3b8;
        font-size: .52rem;
        font-weight: 700;
        line-height: 1;
        white-space: nowrap;
    }

    .employee-attendance-calendar-panel {
        display: grid;
        gap: .7rem;
        padding: .74rem .7rem .78rem;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 14px;
        background: #fff;
        box-shadow: none;
    }

    .employee-attendance-calendar-heading {
        display: grid;
        gap: .5rem;
    }

    .employee-attendance-calendar-heading span {
        display: block;
        color: #64748b;
        font-size: .72rem;
        font-weight: 620;
        letter-spacing: 0;
        line-height: 1;
        text-transform: none;
    }

    .employee-attendance-calendar-heading h2 {
        margin: .14rem 0 0;
        color: #0f172a;
        font-size: 1.18rem;
        font-weight: 760;
        line-height: 1.12;
    }

    .employee-attendance-legend {
        display: flex;
        align-items: center;
        gap: .42rem;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .employee-attendance-legend::-webkit-scrollbar {
        display: none;
    }

    .employee-attendance-legend span {
        position: relative;
        width: max-content;
        min-width: max-content;
        padding: .2rem .34rem .2rem .9rem;
        border-radius: 999px;
        background: transparent;
        color: #64748b;
        font-size: .64rem;
        font-weight: 620;
        letter-spacing: 0;
        text-transform: none;
    }

    .employee-attendance-legend span::before {
        content: "";
        position: absolute;
        left: .25rem;
        top: 50%;
        width: .42rem;
        height: .42rem;
        border-radius: 50%;
        transform: translateY(-50%);
    }

    .employee-attendance-legend .complete::before {
        background: #16a34a;
    }

    .employee-attendance-legend .missing::before {
        background: #eab308;
    }

    .employee-attendance-legend .absent::before {
        background: #dc2626;
    }

    .employee-attendance-calendar-viewport {
        overflow: hidden;
        touch-action: pan-y;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .employee-attendance-calendar-viewport::-webkit-scrollbar {
        display: none;
    }

    .employee-attendance-calendar-track {
        display: flex;
        gap: .78rem;
        transition: transform .28s cubic-bezier(.2, .82, .2, 1);
        will-change: transform;
    }

    .employee-attendance-month {
        flex: 0 0 100%;
        min-width: 100%;
    }

    .employee-attendance-month-title {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: .6rem;
        margin-bottom: .68rem;
    }

    .employee-attendance-month-title strong {
        color: #123c36;
        font-size: 1.16rem;
        font-weight: 850;
        line-height: 1;
    }

    .employee-attendance-month-title span {
        color: #64748b;
        font-size: .78rem;
        font-weight: 750;
        letter-spacing: 0;
        text-transform: none;
    }

    .employee-attendance-weekdays,
    .employee-attendance-days {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: .34rem;
    }

    .employee-attendance-weekdays {
        margin-bottom: .42rem;
    }

    .employee-attendance-weekdays span {
        color: #94a3b8;
        font-size: .58rem;
        font-weight: 850;
        letter-spacing: 0;
        line-height: 1;
        text-align: center;
        text-transform: uppercase;
    }

    .employee-attendance-day {
        aspect-ratio: 1;
        display: grid;
        place-items: center;
        width: 100%;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: #f8fafc;
        color: #64748b;
        font-family: inherit;
        font-size: .74rem;
        font-weight: 800;
        line-height: 1;
        cursor: pointer;
        transition: transform .14s ease, box-shadow .14s ease;
    }

    .employee-attendance-day span {
        display: grid;
        place-items: center;
        width: 100%;
        height: 100%;
    }

    .employee-attendance-day:active {
        transform: scale(.92);
    }

    .employee-attendance-day.is-empty {
        background: transparent;
        pointer-events: none;
    }

    .employee-attendance-day.is-complete {
        color: #fff;
        background: #16a34a;
        box-shadow: none;
    }

    .employee-attendance-day.is-missing {
        color: #422006;
        background: #fde047;
        box-shadow: none;
    }

    .employee-attendance-day.is-absent {
        color: #fff;
        background: #dc2626;
        box-shadow: none;
    }

    .employee-attendance-day.is-upcoming {
        color: #cbd5e1;
        background: #f8fafc;
    }

    .employee-attendance-day.is-rest {
        color: #64748b;
        background: #e5e7eb;
        box-shadow: none;
    }

    @keyframes employee-attendance-loading-spin {
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes employee-attendance-loading-pop {
        from {
            opacity: 0;
            transform: translateY(8px) scale(.96);
        }

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

    .employee-leave-balance-group {
        display: grid !important;
        gap: .48rem;
        padding: .72rem .76rem .78rem !important;
        border: 1px solid rgba(203, 213, 225, .72) !important;
        border-radius: 18px !important;
        background:
            linear-gradient(135deg, rgba(255, 255, 255, .98), rgba(240, 253, 250, .9)),
            #fff !important;
        box-shadow: none !important;
    }

    .employee-attendance-leave-heading {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: .6rem;
        padding: 0 .1rem;
    }

    .employee-attendance-leave-heading > div {
        min-width: 0;
        display: grid;
        gap: .18rem;
    }

    .employee-attendance-leave-heading span {
        display: block;
        color: #1e293b;
        font-size: 1.14rem;
        font-weight: 720;
        letter-spacing: 0;
        line-height: 1.1;
        text-transform: none;
    }

    .employee-attendance-leave-heading h2 {
        margin: .16rem 0 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 850;
        line-height: 1.12;
    }

    .employee-attendance-leave-heading small {
        width: max-content;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #64748b;
        font-size: .62rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: left;
    }

    .employee-attendance-leave-toggle {
        position: relative;
        width: 32px;
        height: 32px;
        min-width: 32px !important;
        min-height: 32px !important;
        display: grid;
        place-items: center;
        padding: 0 !important;
        border: 1px solid rgba(13, 148, 136, .22);
        border-radius: 999px;
        background: #fff !important;
        color: #0f766e;
        box-shadow: 0 8px 18px rgba(13, 148, 136, .1);
        transition: color .16s ease, border-color .16s ease, transform .16s ease;
    }

    .employee-attendance-leave-toggle:active {
        transform: scale(.94);
    }

    .employee-attendance-leave-toggle.is-visible {
        color: #0f766e;
        border-color: rgba(15, 118, 110, .34);
    }

    .employee-attendance-leave-toggle span {
        position: relative;
        width: 18px;
        height: 18px;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
    }

    .employee-attendance-leave-toggle:not(.is-visible) span {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m3 3 18 18'/%3E%3Cpath d='M10.7 5.1A9.9 9.9 0 0 1 12 5c6.5 0 10 7 10 7a18.4 18.4 0 0 1-2.1 3.1'/%3E%3Cpath d='M6.6 6.6C3.8 8.5 2 12 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-1'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3C/svg%3E");
    }

    .employee-attendance-leave-primary,
    .employee-attendance-leave-secondary {
        display: grid;
        gap: .34rem;
    }

    .employee-attendance-leave-primary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .employee-attendance-leave-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .employee-attendance-leave-primary article,
    .employee-attendance-leave-secondary article {
        position: relative;
        min-width: 0;
        display: grid;
        align-content: center;
        gap: .1rem;
        overflow: hidden;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 9px;
        background: #fff;
        text-align: left;
        box-shadow: none;
    }

    .employee-attendance-leave-primary article::before,
    .employee-attendance-leave-secondary article::before {
        content: "";
        position: absolute;
        inset: .4rem auto .4rem .34rem;
        width: 3px;
        border-radius: 8px;
        background: #0d9488;
        opacity: .9;
    }

    .employee-attendance-leave-primary article:nth-child(2)::before {
        background: #2563eb;
    }

    .employee-attendance-leave-secondary article:nth-child(1)::before {
        background: #c026d3;
    }

    .employee-attendance-leave-secondary article:nth-child(2)::before {
        background: #ea580c;
    }

    .employee-attendance-leave-secondary article:nth-child(3)::before {
        background: #475569;
    }

    .employee-attendance-leave-primary article {
        min-height: 58px;
        padding: .5rem .46rem .46rem .9rem;
    }

    .employee-attendance-leave-secondary article {
        min-height: 54px;
        padding: .46rem .28rem .42rem .8rem;
    }

    .employee-attendance-leave-primary span,
    .employee-attendance-leave-secondary span {
        color: #64748b;
        font-size: .64rem;
        font-weight: 560;
        letter-spacing: 0;
        line-height: 1.08;
        text-transform: none;
    }

    .employee-attendance-leave-primary strong {
        color: #0f172a;
        font-size: 1.04rem;
        font-weight: 760;
        letter-spacing: 0;
        line-height: 1;
    }

    .employee-attendance-leave-secondary strong {
        color: #0f172a;
        font-size: .84rem;
        font-weight: 760;
        letter-spacing: 0;
        line-height: 1;
    }

    .employee-leave-page-shell {
        display: grid !important;
        gap: .76rem;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .employee-approved-leave-group {
        display: grid !important;
        gap: .56rem;
        padding: .72rem .76rem .82rem !important;
        border: 1px solid rgba(203, 213, 225, .72) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 14px 30px rgba(15, 23, 42, .055) !important;
    }

    .employee-approved-leave-group h2 {
        margin: .08rem .1rem 0;
        color: #1e293b;
        font-size: 1.14rem;
        font-weight: 720;
        letter-spacing: 0;
        line-height: 1.1;
        text-transform: none;
    }

    .employee-filed-leave-list {
        display: grid;
        gap: .34rem;
    }

    .employee-filed-leave-card {
        --leave-accent: #0d9488;
        --leave-soft: rgba(13, 148, 136, .1);
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: center;
        gap: .1rem;
        min-height: 58px;
        padding: .5rem .62rem .5rem .94rem;
        overflow: hidden;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 9px;
        background: #fff;
        box-shadow: none;
    }

    .employee-filed-leave-card::before {
        content: "";
        position: absolute;
        inset: .42rem auto .42rem .34rem;
        width: 3px;
        border-radius: 8px;
        background: var(--leave-accent);
    }

    .employee-filed-leave-card.is-vacation {
        --leave-accent: #0d9488;
        --leave-soft: rgba(13, 148, 136, .1);
    }

    .employee-filed-leave-card.is-sick {
        --leave-accent: #2563eb;
        --leave-soft: rgba(37, 99, 235, .1);
    }

    .employee-filed-leave-card.is-wellness {
        --leave-accent: #ea580c;
        --leave-soft: rgba(234, 88, 12, .1);
    }

    .employee-filed-leave-card.is-special {
        --leave-accent: #c026d3;
        --leave-soft: rgba(192, 38, 211, .1);
    }

    .employee-filed-leave-card > div {
        min-width: 0;
        display: grid;
        gap: .1rem;
    }

    .employee-filed-leave-card strong {
        color: #64748b;
        font-size: .64rem;
        font-weight: 560;
        line-height: 1.12;
    }

    .employee-filed-leave-card span {
        color: #334155;
        font-size: .74rem;
        font-weight: 680;
        line-height: 1.18;
    }

    .employee-filed-leave-card em {
        width: max-content;
        max-width: 100%;
        margin-top: 0;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #64748b;
        font-size: .64rem;
        font-style: normal;
        font-weight: 560;
        line-height: 1;
    }

    .employee-filed-leave-empty {
        min-height: 92px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .76);
    }

    .employee-attendance-month-dots {
        display: flex;
        justify-content: center;
        gap: .34rem;
        padding-top: .1rem;
    }

    .employee-attendance-month-dots span {
        width: .38rem;
        height: .38rem;
        border-radius: 999px;
        background: #cbd5e1;
        transition: width .18s ease, background-color .18s ease;
    }

    .employee-attendance-month-dots span.active {
        width: 1.05rem;
        background: #0f766e;
    }

    .employee-attendance-modal-backdrop {
        position: fixed;
        inset: 0;
        z-index: 190;
        display: grid;
        align-items: end;
        padding: 1rem .86rem calc(1rem + env(safe-area-inset-bottom));
        background: rgba(15, 23, 42, .42);
        backdrop-filter: blur(2px);
    }

    .employee-attendance-modal {
        display: grid;
        gap: .9rem;
        width: 100%;
        max-width: 430px;
        margin-inline: auto;
        padding: 1rem;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 -10px 34px rgba(15, 23, 42, .18);
        animation: employee-attendance-modal-in .18s ease;
    }

    .employee-attendance-modal-heading {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: .8rem;
    }

    .employee-attendance-modal-heading span {
        display: block;
        color: #0f766e;
        font-size: .64rem;
        font-weight: 850;
        letter-spacing: .12em;
        line-height: 1;
        text-transform: uppercase;
    }

    .employee-attendance-modal-heading h2 {
        margin: .28rem 0 0;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 850;
        line-height: 1.16;
    }

    .employee-attendance-modal-heading button {
        width: 36px;
        height: 36px;
        min-width: 36px !important;
        min-height: 36px !important;
        padding: 0 !important;
        border: 0;
        border-radius: 999px;
        background: #f1f5f9;
        position: relative;
    }

    .employee-attendance-modal-heading button::before,
    .employee-attendance-modal-heading button::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: #475569;
    }

    .employee-attendance-modal-heading button::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .employee-attendance-modal-heading button::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .employee-attendance-modal-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .46rem;
    }

    .employee-attendance-modal-log {
        min-height: 74px;
        display: grid;
        align-content: center;
        gap: .3rem;
        padding: .62rem .28rem;
        border-radius: 14px;
        text-align: center;
    }

    .employee-attendance-modal-log span {
        color: inherit;
        font-size: .56rem;
        font-weight: 850;
        letter-spacing: .07em;
        line-height: 1;
        text-transform: uppercase;
    }

    .employee-attendance-modal-log strong {
        color: inherit;
        font-size: .9rem;
        font-weight: 850;
        line-height: 1;
    }

    .employee-attendance-modal-log.is-present {
        color: #14532d;
        background: #dcfce7;
    }

    .employee-attendance-modal-log.is-empty {
        color: #64748b;
        background: #f1f5f9;
    }

    .employee-attendance-modal-log.is-rest {
        color: #475569;
        background: #e5e7eb;
    }

    .employee-request-page > .employee-portal-heading {
        display: none !important;
    }

    .employee-request-notice-backdrop,
    .employee-request-form-backdrop {
        position: fixed;
        inset: 0;
        z-index: 190;
        display: grid;
        place-items: center;
        padding: 1rem;
        background: rgba(15, 23, 42, .42);
        backdrop-filter: blur(2px);
    }

    .employee-request-form-backdrop {
        align-items: center;
        padding: .62rem .72rem calc(.62rem + env(safe-area-inset-bottom));
    }

    .employee-request-notice {
        width: min(100%, 360px);
        display: grid;
        gap: .7rem;
        padding: 1.05rem;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 18px 42px rgba(15, 23, 42, .18);
    }

    .employee-request-notice span,
    .employee-request-form-heading span {
        color: #0f766e;
        font-size: .56rem;
        font-weight: 850;
        letter-spacing: .14em;
        line-height: 1;
        text-transform: uppercase;
    }

    .employee-request-notice h2,
    .employee-request-form-heading h2 {
        margin: 0;
        color: #0f172a;
        font-size: .96rem;
        font-weight: 850;
        line-height: 1.14;
    }

    .employee-request-notice p {
        margin: 0;
        color: #475569;
        font-size: .86rem;
        font-weight: 500;
        line-height: 1.42;
    }

    .employee-request-form.employee-dashboard-card {
        width: min(100%, 354px);
        max-height: calc(100dvh - 1.2rem);
        display: grid;
        gap: .48rem;
        align-content: start;
        padding: .7rem;
        border-radius: 18px;
        background: #fff !important;
        overflow: hidden;
        box-shadow: 0 18px 46px rgba(15, 23, 42, .2);
        animation: employee-attendance-modal-in .18s ease;
    }

    .employee-request-form-heading {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: .7rem;
        padding-bottom: .05rem;
    }

    .employee-request-form label,
    .employee-request-receipt-field {
        display: grid;
        position: relative;
        gap: 0;
        padding-top: .42rem;
    }

    .employee-request-receipt-field {
        width: max-content;
        min-width: 74px;
        padding-inline: .4rem;
        padding-bottom: .12rem;
        border: 1px solid #C9D7E7;
        border-radius: 10px;
        background: #fff;
    }

    .employee-request-field-grid,
    .employee-request-inline-row {
        display: grid;
        gap: .42rem;
    }

    .employee-request-field-grid {
        grid-template-columns: 1fr;
    }

    .employee-request-inline-row {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
    }

    .employee-request-error {
        padding: .42rem .52rem;
        border: 1px solid rgba(220, 38, 38, .18);
        border-radius: 10px;
        background: #fef2f2;
        color: #991b1b;
        font-size: .66rem;
        font-weight: 650;
        line-height: 1.25;
    }

    .employee-request-form label > span,
    .employee-request-receipt-field > span {
        position: absolute;
        top: .1rem;
        left: .56rem;
        z-index: 2;
        padding: 0 .28rem;
        background: #fff;
        color: #475569;
        font-size: .56rem;
        font-weight: 850;
        letter-spacing: .06em;
        line-height: 1;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .employee-request-form .form-control,
    .employee-request-form textarea {
        min-height: 34px;
        padding: .42rem .55rem;
        border-radius: 10px;
        font-size: .76rem;
        line-height: 1.2;
    }

    .employee-request-form textarea {
        resize: none;
    }

    .employee-request-upload-actions {
        display: grid;
        grid-template-columns: repeat(2, 34px);
        align-items: center;
        justify-content: start;
        gap: .3rem;
    }

    .employee-request-upload-button,
    .employee-request-camera-button {
        box-sizing: border-box;
        width: 34px;
        height: 34px;
        min-width: 34px !important;
        min-height: 34px !important;
        display: inline-grid;
        place-content: center;
        align-items: center;
        justify-items: center;
        margin: 0;
        padding: 0 !important;
        border: 1px solid rgba(15, 118, 110, .28);
        border-radius: 10px;
        background: rgba(15, 118, 110, .08);
        color: #0f766e;
        line-height: 0;
        vertical-align: middle;
        appearance: none;
        -webkit-appearance: none;
    }

    .employee-request-upload-button input {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .employee-request-file-status {
        display: block;
        min-height: .86rem;
        color: #64748b;
        font-size: .58rem;
        font-weight: 600;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .employee-request-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: .45rem;
        padding-top: .04rem;
    }

    .employee-request-actions .btn {
        min-height: 36px;
        padding: .46rem .6rem;
        border-radius: 11px;
        font-size: .74rem;
        line-height: 1.1;
    }

    .employee-request-close-button {
        position: relative;
        width: 32px;
        height: 32px;
        min-width: 32px !important;
        min-height: 32px !important;
        padding: 0 !important;
        border: 0;
        border-radius: 999px;
        background: #f1f5f9;
    }

    .employee-request-close-button::before,
    .employee-request-close-button::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        width: 14px;
        height: 2px;
        border-radius: 999px;
        background: #475569;
    }

    .employee-request-close-button::before {
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .employee-request-close-button::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .employee-request-icon {
        width: 18px;
        height: 18px;
        display: block;
        flex: 0 0 auto;
        margin: auto;
        background: currentColor;
        transform: translateY(0);
    }

    .employee-request-icon.upload {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 8 5-5 5 5'/%3E%3Cpath d='M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .employee-request-icon.camera {
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2l-2.5-3Z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H5a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-2l-2.5-3Z'/%3E%3Ccircle cx='12' cy='13' r='3.2'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    @keyframes employee-attendance-modal-in {
        from {
            opacity: 0;
            transform: translateY(14px);
        }

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

@media (max-width: 760px) {
    html {
        scroll-padding-top: 132px;
    }

    body {
        background: var(--hris-page-bg);
        -webkit-tap-highlight-color: transparent;
    }

    .page:not(.login-only-layout):not(.workspace-choice-layout) {
        min-height: 100dvh;
    }

    .sidebar {
        position: sticky;
        top: 0;
        z-index: 80;
        border-right: 0;
        border-bottom: 1px solid var(--hris-border);
        box-shadow: 0 10px 28px rgba(15, 23, 42, .08);
    }

    .brand-panel {
        position: relative;
        z-index: 82;
        min-height: 72px !important;
        border-bottom: 0;
        box-shadow: 0 1px 0 rgba(226, 232, 240, .9);
    }

    .navbar-toggler {
        z-index: 84;
    }

    .nav-scrollable {
        position: fixed !important;
        top: calc(72px + .55rem);
        left: .75rem;
        right: .75rem;
        z-index: 83;
        display: block !important;
        max-height: min(72dvh, 560px);
        padding: .65rem .7rem calc(.8rem + env(safe-area-inset-bottom));
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 1px solid rgba(203, 213, 225, .96);
        border-radius: 16px;
        background: rgba(255, 255, 255, .98);
        box-shadow: 0 22px 54px rgba(15, 23, 42, .22);
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px) scale(.985);
        transform-origin: top right;
        transition: opacity .16s ease, transform .16s ease;
    }

    .navbar-toggler:checked ~ .nav-scrollable {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    .navbar-toggler:checked ~ .nav-scrollable::before {
        content: "";
        position: fixed;
        inset: 72px 0 0;
        z-index: -1;
        background: rgba(15, 23, 42, .16);
        backdrop-filter: blur(1.5px);
    }

    .page:has(.employee-mobile-tabbar) .brand-panel {
        min-height: 74px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .75rem !important;
        padding: .74rem .92rem !important;
        background: rgba(255, 255, 255, .96) !important;
    }

    .page:has(.employee-mobile-tabbar) .brand-link {
        width: auto;
        flex-direction: row;
        justify-content: flex-start;
        gap: .7rem;
        text-align: left;
    }

    .page:has(.employee-mobile-tabbar) .brand-logo {
        width: 48px !important;
        height: 48px !important;
        flex: 0 0 48px !important;
        border: 1px solid #e2e8f0;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .1) !important;
    }

    .page:has(.employee-mobile-tabbar) .brand-logo img {
        width: 42px !important;
        height: 42px !important;
    }

    .page:has(.employee-mobile-tabbar) .brand-name {
        display: block;
        color: #123c36;
        font-size: 1rem;
        font-weight: 850;
        line-height: 1;
        letter-spacing: .02em;
    }

    .employee-mobile-header-actions {
        display: none;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-header-actions {
        display: flex;
        align-items: center;
        gap: .62rem;
        margin-left: auto;
    }

    .employee-mobile-header-button {
        width: 30px;
        height: 30px;
        min-width: 30px !important;
        min-height: 30px !important;
        display: grid;
        place-items: center;
        padding: 0 !important;
        color: #64748b;
        border: 0 !important;
        border-radius: 999px;
        background: transparent !important;
        box-shadow: none !important;
    }

    .employee-mobile-header-button::before {
        content: "";
        width: 20px;
        height: 20px;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .employee-mobile-header-button.employee-mobile-message-icon::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4a3 3 0 0 0-3 3v7a3 3 0 0 0 3 3h2v3.2a.8.8 0 0 0 1.27.65L13.2 17H19a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Zm0 2h14a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-6.48L9 17.75V15H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    }

    .employee-mobile-header-button.employee-mobile-bell-icon::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22a2.7 2.7 0 0 0 2.63-2h-5.26A2.7 2.7 0 0 0 12 22Zm7-6.2c-.9-1-1.5-2.05-1.5-5.05A5.55 5.55 0 0 0 13 5.3V4a1 1 0 1 0-2 0v1.3a5.55 5.55 0 0 0-4.5 5.45c0 3-.6 4.05-1.5 5.05-.65.72-.14 1.9.84 1.9h12.32c.98 0 1.49-1.18.84-1.9ZM7.46 15.7c.65-1.18 1.04-2.7 1.04-4.95A3.5 3.5 0 1 1 15.5 10.75c0 2.25.39 3.77 1.04 4.95H7.46Z'/%3E%3C/svg%3E");
    }

    .employee-mobile-header-divider {
        width: 1px;
        height: 32px;
        background: #e5e7eb;
    }

    .employee-mobile-avatar-trigger {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        display: grid;
        place-items: center;
        margin: 0;
        color: #fff;
        border: 3px solid #fff;
        border-radius: 999px;
        background: #10b981;
        box-shadow: 0 8px 18px rgba(16, 185, 129, .22);
        font-size: .88rem;
        font-weight: 850;
        letter-spacing: .02em;
        cursor: pointer;
        user-select: none;
    }

    .page:has(.employee-mobile-tabbar) .navbar-toggler:not(:checked) {
        top: .9rem;
        right: .92rem;
        width: 44px;
        height: 44px;
        opacity: 0;
        pointer-events: none;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
    }

    .page:has(.employee-mobile-tabbar) .sidebar:has(.navbar-toggler:checked)::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 82;
        background: rgba(15, 23, 42, .52);
        backdrop-filter: blur(1.5px);
    }

    .page:has(.employee-mobile-tabbar) .nav-scrollable {
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 83;
        width: min(76vw, 330px);
        max-height: none;
        height: 100dvh;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: #fff;
        box-shadow: none;
        opacity: 1;
        pointer-events: none;
        transform: translateX(104%);
        transform-origin: center right;
        transition: transform .24s cubic-bezier(.2, .8, .2, 1), box-shadow .24s ease;
    }

    .page:has(.employee-mobile-tabbar) .navbar-toggler:checked {
        position: fixed;
        top: .96rem;
        right: .86rem;
        z-index: 86;
        opacity: 1;
        pointer-events: auto;
        border-color: transparent;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 1.55rem no-repeat rgba(15, 23, 42, .32);
        box-shadow: none;
    }

    .page:has(.employee-mobile-tabbar) .navbar-toggler:checked ~ .nav-scrollable {
        pointer-events: auto;
        transform: translateX(0);
        box-shadow: -18px 0 38px rgba(15, 23, 42, .18);
    }

    .page:has(.employee-mobile-tabbar) .navbar-toggler:checked ~ .nav-scrollable::before {
        content: none;
    }

    .page:has(.employee-mobile-tabbar) .nav-scrollable nav {
        min-height: 100%;
        display: grid;
        align-content: start;
        background: #fff;
    }

    .page:has(.employee-mobile-tabbar) .nav-scrollable nav > .nav-section-title:first-child {
        display: none;
    }

    .employee-drawer-profile {
        position: relative;
        display: grid;
        align-content: end;
        min-height: 178px;
        padding: 2.15rem 1.2rem 1.15rem;
        color: #fff;
        background:
            linear-gradient(135deg, rgba(8, 47, 43, .94), rgba(15, 118, 110, .72)),
            linear-gradient(160deg, #14332f, #1f5f58 58%, #dbeafe);
        overflow: hidden;
    }

    .employee-drawer-profile::after {
        content: "";
        position: absolute;
        inset: 0;
        background:
            linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
            linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px);
        background-size: 34px 34px;
        opacity: .35;
        pointer-events: none;
    }

    .employee-drawer-avatar {
        position: relative;
        z-index: 1;
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        margin-bottom: .85rem;
        color: #fff;
        border: 2px solid rgba(255, 255, 255, .72);
        border-radius: 999px;
        font-size: 1.08rem;
        font-weight: 800;
        letter-spacing: .03em;
        background: rgba(15, 23, 42, .18);
    }

    .employee-drawer-profile strong,
    .employee-drawer-profile small {
        position: relative;
        z-index: 1;
        display: block;
    }

    .employee-drawer-profile strong {
        font-size: 1rem;
        line-height: 1.18;
        font-weight: 800;
    }

    .employee-drawer-profile small {
        margin-top: .3rem;
        color: rgba(255, 255, 255, .76);
        font-size: .76rem;
        font-weight: 500;
    }

    .employee-drawer-section-title {
        margin: 1.1rem 1.2rem .42rem;
        color: #9ca3af;
        font-size: .7rem;
        font-weight: 850;
        letter-spacing: .16em;
        text-transform: uppercase;
    }

    .employee-drawer-item {
        margin: 0;
        padding: 0 .95rem;
    }

    .employee-drawer-item .nav-link,
    .employee-drawer-button {
        width: 100%;
        min-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        gap: .78rem !important;
        padding: .48rem .3rem !important;
        color: #1f2937 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: .86rem !important;
        font-weight: 550 !important;
        text-align: left !important;
        text-decoration: none !important;
    }

    .employee-drawer-button:disabled {
        opacity: 1;
        cursor: default;
    }

    .employee-drawer-icon {
        width: 20px;
        height: 20px;
        flex: 0 0 20px;
        color: #9ca3af;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .employee-drawer-chevron {
        margin-left: auto;
        color: #cbd5e1;
        font-size: 1.25rem;
        line-height: 1;
        font-weight: 300;
    }

    .employee-drawer-separator {
        height: 1px;
        margin: .72rem 1.2rem .36rem;
        background: #edf2f7;
    }

    .employee-drawer-logout .nav-link {
        color: #dc2626 !important;
        font-weight: 750 !important;
    }

    .employee-drawer-logout .employee-drawer-icon {
        color: #dc2626;
    }

    .employee-drawer-icon.icon-profile {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
    }

    .employee-drawer-icon.icon-settings {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M12 15.5A3.5 3.5 0 1 0 12 8a3.5 3.5 0 0 0 0 7.5Z'/%3E%3Cpath d='M19.4 15a1.8 1.8 0 0 0 .36 1.98l.06.06a2.1 2.1 0 1 1-2.97 2.97l-.06-.06a1.8 1.8 0 0 0-1.98-.36 1.8 1.8 0 0 0-1.08 1.65V21a2.1 2.1 0 0 1-4.2 0v-.09A1.8 1.8 0 0 0 8.5 19.3a1.8 1.8 0 0 0-1.98.36l-.06.06a2.1 2.1 0 1 1-2.97-2.97l.06-.06A1.8 1.8 0 0 0 3.9 14.7 1.8 1.8 0 0 0 2.25 13H2a2.1 2.1 0 0 1 0-4.2h.09A1.8 1.8 0 0 0 3.7 7.7a1.8 1.8 0 0 0-.36-1.98l-.06-.06a2.1 2.1 0 1 1 2.97-2.97l.06.06a1.8 1.8 0 0 0 1.98.36H8.5A1.8 1.8 0 0 0 9.55 1.5V1a2.1 2.1 0 0 1 4.2 0v.09a1.8 1.8 0 0 0 1.08 1.65 1.8 1.8 0 0 0 1.98-.36l.06-.06a2.1 2.1 0 1 1 2.97 2.97l-.06.06a1.8 1.8 0 0 0-.36 1.98v.21A1.8 1.8 0 0 0 21 8.6h.25a2.1 2.1 0 0 1 0 4.2h-.09A1.8 1.8 0 0 0 19.4 15Z'/%3E%3C/svg%3E");
    }

    .employee-drawer-icon.icon-help {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M9.1 9a3 3 0 1 1 5.8 1c-.5 1-1.5 1.4-2.2 2-.5.4-.7.8-.7 1.5'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
    }

    .employee-drawer-icon.icon-about {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
    }

    .employee-drawer-icon.icon-logout {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4'/%3E%3Cpath d='m16 17 5-5-5-5'/%3E%3Cpath d='M21 12H9'/%3E%3C/svg%3E");
    }

    .top-row {
        min-height: 60px;
        gap: .6rem;
        padding-block: .58rem;
        z-index: 70;
    }

    .system-title {
        min-width: 0;
    }

    .system-title strong,
    .system-title span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .top-account-bar {
        flex: 0 0 auto;
        gap: .42rem;
    }

    .notification-button,
    .account-menu summary {
        min-width: 42px;
        min-height: 42px;
    }

    .hr-tools-modal {
        padding: .75rem;
    }

    .hr-tools-dialog {
        width: calc(100vw - 1.5rem);
        max-height: calc(100svh - 1.5rem);
    }

    .hr-tools-grid {
        grid-template-columns: 1fr;
        padding: .85rem;
    }

    .hr-tool-entry-grid {
        grid-template-columns: 1fr;
    }

    .hr-tool-field-wide {
        grid-column: auto;
    }

    .account-menu summary {
        padding-inline: .18rem;
    }

    .account-identity {
        display: none;
    }

    .account-menu-panel {
        right: 0;
        width: min(220px, calc(100vw - 1.5rem));
    }

    .content {
        width: 100%;
        padding: .85rem .75rem 1.25rem;
    }

    .page:has(.employee-mobile-tabbar) .content {
        height: calc(100svh - var(--employee-mobile-header-height) - var(--employee-mobile-tabbar-space)) !important;
        margin-top: var(--employee-mobile-header-height) !important;
        margin-bottom: var(--employee-mobile-tabbar-space) !important;
        padding: .75rem .9rem 1rem !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        scrollbar-gutter: auto !important;
        scrollbar-width: none !important;
        box-shadow: none !important;
    }

    .page-heading {
        gap: .4rem;
        margin-bottom: .7rem;
    }

    .page-heading h1 {
        font-size: clamp(1.12rem, 5vw, 1.36rem) !important;
        line-height: 1.18;
    }

    .page-heading p {
        max-width: 100%;
        font-size: .8rem;
        line-height: 1.35;
    }

    .content-panel,
    .dashboard-card,
    .employee-profile-panel,
    .employee-actions-panel,
    .employee-workflow-panel,
    .users-panel,
    .system-log-card,
    .report-panel,
    .table-panel {
        border-radius: 12px !important;
        box-shadow: 0 8px 22px rgba(15, 23, 42, .055) !important;
    }

    .employee-payslip-page .page-heading {
        margin-bottom: .58rem;
    }

    .employee-payslip-latest-panel {
        padding: .74rem !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: none !important;
    }

    .employee-payslip-latest-list {
        gap: .54rem;
    }

    .employee-payslip-latest-card {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: .58rem;
        padding: .72rem .76rem;
        border-color: rgba(203, 213, 225, .82);
        border-radius: 12px;
        box-shadow: none;
    }

    .employee-payslip-latest-card span {
        font-size: .84rem;
        font-weight: 650;
    }

    .employee-payslip-latest-card strong {
        font-size: .84rem;
        line-height: 1.15;
    }

    .employee-payslip-latest-card dl {
        justify-items: end;
        gap: .08rem;
    }

    .employee-payslip-latest-card dt {
        font-size: .6rem;
    }

    .employee-payslip-latest-card dd {
        font-size: clamp(.78rem, 3.4vw, .9rem);
        font-weight: 650;
        line-height: 1.1;
    }

    .employee-employment-page {
        gap: .72rem;
        padding: 0 !important;
    }

    .employee-employment-page .page-heading {
        margin-bottom: .1rem;
    }

    .employee-employment-card {
        gap: .6rem;
        padding: .76rem !important;
        border-color: rgba(203, 213, 225, .82) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .employee-employment-card-heading span {
        font-size: .72rem;
        font-weight: 650;
        letter-spacing: .06em;
    }

    .employee-employment-card-heading small {
        font-size: .64rem;
    }

    .employee-employment-detail-grid,
    .employee-employment-money-list {
        gap: .42rem;
    }

    .employee-employment-detail-grid div,
    .employee-employment-money-list div {
        min-height: 44px;
        margin-top: .34rem;
        padding: .68rem .58rem .48rem;
        border-color: rgba(203, 213, 225, .78);
        border-radius: 11px;
        background: #ffffff;
    }

    .employee-employment-detail-grid > div:not(.employee-employment-pair) {
        min-height: 56px;
        padding-block: .78rem .54rem;
    }

    .employee-employment-detail-grid .employee-employment-pair,
    .employee-employment-money-list .employee-employment-pair {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .42rem;
        min-height: 0;
        margin-top: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
    }

    .employee-employment-detail-grid dt,
    .employee-employment-money-list dt {
        top: -.44rem;
        left: .52rem;
        max-width: calc(100% - 1.04rem);
        padding-inline: .24rem;
        background: #ffffff;
        font-size: .64rem;
        line-height: 1.15;
    }

    .employee-employment-detail-grid dd,
    .employee-employment-money-list dd {
        font-size: .78rem;
        font-weight: 600;
        line-height: 1.2;
    }

    .employee-employment-status-grid {
        gap: .42rem;
    }

    .employee-employment-status-grid div {
        min-height: 44px;
        margin-top: .34rem;
        padding: .68rem .58rem .48rem;
        border-color: rgba(203, 213, 225, .78);
        border-radius: 11px;
        background: #ffffff;
    }

    .employee-employment-status-grid span {
        top: -.44rem;
        left: .52rem;
        max-width: calc(100% - 1.04rem);
        padding-inline: .24rem;
        background: #ffffff;
        font-size: .64rem;
        line-height: 1.15;
    }

    .records-toolbar,
    .service-records-toolbar,
    .leave-ledger-toolbar,
    .cos-records-toolbar,
    .report-header,
    .users-panel-heading,
    .system-log-card-header {
        align-items: stretch !important;
        gap: .58rem !important;
    }

    .records-result-count,
    .report-header > div:first-child,
    .users-panel-heading > div,
    .system-log-card-header > div {
        min-width: 0;
    }

    .filter-actions {
        display: flex !important;
        justify-content: flex-end !important;
        gap: .45rem !important;
    }

    .icon-button,
    .filter-toggle-button,
    .search-toggle-button,
    .cos-temp-import-button,
    .btn,
    button {
        min-height: 42px;
    }

    .search-composer.animated-search.is-open,
    .report-header .search-composer.animated-search.is-open,
    .records-toolbar .search-composer.animated-search.is-open {
        width: min(100%, calc(100vw - 1.5rem)) !important;
        min-width: min(100%, calc(100vw - 1.5rem)) !important;
        max-width: min(100%, calc(100vw - 1.5rem)) !important;
    }

    .filter-slide-panel {
        grid-template-columns: 1fr !important;
        gap: .6rem !important;
        width: 100% !important;
    }

    .filter-slide-panel.is-open {
        max-height: min(68dvh, 620px) !important;
        overflow: visible !important;
    }

    .filter-slide-panel .records-filter-menu summary,
    .filter-slide-panel .smooth-select-button,
    .filter-slide-panel .form-select,
    .filter-slide-panel .form-control {
        min-height: 42px !important;
    }

    .filter-slide-panel .records-filter-menu .dashboard-filter-panel,
    .filter-slide-panel .filter-select-shell .smooth-select-menu {
        width: min(100%, calc(100vw - 2rem)) !important;
        max-height: min(52dvh, 360px) !important;
        overflow-y: auto !important;
    }

    .table-responsive,
    .grid-scroll,
    .records-table-wrap,
    .report-table-wrap,
    .employee-records-table-wrap,
    .service-records-table-wrap,
    .leave-ledger-table-wrap,
    .leave-applications-table-wrap,
    .universal-table-shell {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
    }

    .table-responsive::after,
    .report-table-wrap::after,
    .employee-records-table-wrap::after {
        content: "";
        position: sticky;
        right: 0;
        display: block;
        width: 1px;
        height: 1px;
    }

    .table.dashboard-table:not(.employee-records-table):not(.report-table),
    .system-log-table,
    .universal-table {
        min-width: 720px;
    }

    .pagination-row,
    .pagination-row-with-jump,
    .system-log-pagination,
    .system-log-pagination-actions {
        align-items: stretch !important;
        gap: .55rem !important;
    }

    .pagination-row .btn,
    .pagination-row a,
    .pagination-go-button,
    .system-log-pagination a,
    .system-log-pagination button {
        justify-content: center;
        min-height: 42px;
    }

    .pagination-jump-form {
        display: grid !important;
        grid-template-columns: 1fr auto;
        gap: .5rem !important;
        width: 100%;
    }

    .pagination-jump-form label {
        display: grid !important;
        grid-template-columns: auto minmax(0, 1fr) auto;
        gap: .4rem !important;
    }

    .pagination-page-input {
        width: 100% !important;
        min-height: 42px !important;
    }

    .employee-edit-modal {
        align-items: end;
        padding: 0;
    }

    .employee-edit-modal-panel {
        width: 100vw;
        height: min(92dvh, 880px);
        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 18px 18px 0 0;
    }

    .employee-edit-modal-header {
        padding: .78rem .9rem;
    }

    .employee-edit-modal-title {
        font-size: .95rem;
    }

    .cos-export-modal,
    .step-list-print-modal,
    .fixed-modal-backdrop {
        align-items: end !important;
        padding: 0 !important;
    }

    .cos-export-dialog,
    .step-list-print-dialog,
    .fixed-modal-dialog,
    .personnel-style-dialog {
        width: 100vw !important;
        max-width: 100vw !important;
        max-height: 90dvh !important;
        border-radius: 18px 18px 0 0 !important;
    }

    .pending-hr-confirm-dialog {
        width: min(420px, calc(100vw - 1rem));
    }

    .pending-hr-confirm-box {
        padding: 1.25rem 1rem 1.05rem;
        border-radius: 16px;
    }

    .pending-hr-confirm-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .record-action-confirmation {
        padding: .75rem;
    }

    .record-action-confirmation-panel {
        width: min(420px, calc(100vw - 1.5rem));
        padding: 1rem;
    }

    .record-action-confirmation-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .employee-mobile-tabbar {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 120 !important;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        height: var(--employee-mobile-tabbar-height);
        min-height: var(--employee-mobile-tabbar-height);
        padding: .48rem .42rem .5rem !important;
        border-width: 1px 0 0 !important;
        border-color: rgba(226, 232, 240, .85) !important;
        border-radius: 0 !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, .14) !important;
    }

    .employee-mobile-tab,
    .employee-mobile-request-menu,
    .employee-mobile-more-menu {
        min-height: 58px !important;
        color: #64748b !important;
    }

    .employee-mobile-tab,
    .employee-mobile-request-menu > summary.employee-mobile-tab,
    .employee-mobile-more-menu > summary.employee-mobile-tab {
        gap: .22rem !important;
        padding: .22rem .15rem !important;
        border-radius: 14px !important;
        background: transparent !important;
        box-shadow: none !important;
        transition:
            color .18s ease,
            background-color .18s ease,
            transform .18s ease !important;
        will-change: transform;
    }

    .employee-mobile-tab span {
        width: 1.32rem !important;
        height: 1.32rem !important;
        transition:
            opacity .18s ease,
            transform .18s ease !important;
        will-change: transform;
    }

    .employee-mobile-tab strong {
        font-size: .62rem !important;
        font-weight: 750 !important;
        line-height: 1.05 !important;
    }

    .employee-mobile-tab.active,
    .employee-mobile-tab:hover,
    .employee-mobile-tab:focus-visible,
    .employee-mobile-request-menu[open] .employee-mobile-tab,
    .employee-mobile-more-menu[open] .employee-mobile-tab {
        color: #0f766e !important;
        background: transparent !important;
    }

    .employee-mobile-tab:active,
    .employee-mobile-request-menu > summary.employee-mobile-tab:active,
    .employee-mobile-more-menu > summary.employee-mobile-tab:active {
        transform: translateY(1px) scale(.94);
    }

    .employee-mobile-tab:active span,
    .employee-mobile-request-menu > summary.employee-mobile-tab:active span,
    .employee-mobile-more-menu > summary.employee-mobile-tab:active span {
        transform: scale(.9);
    }

    .employee-mobile-tab.active span {
        animation: employee-mobile-tab-pop .28s ease;
    }

    .employee-mobile-request-menu {
        position: relative !important;
        align-self: stretch;
        display: grid !important;
        place-items: center;
        margin-top: -1.65rem !important;
        color: #0f766e !important;
    }

    .employee-mobile-request-menu > summary.employee-mobile-tab {
        min-height: 78px !important;
        align-content: start !important;
        padding-top: 0 !important;
        color: #0f766e !important;
    }

    .employee-mobile-request-menu > summary.employee-mobile-tab span {
        width: 54px !important;
        height: 54px !important;
        display: grid !important;
        place-items: center;
        border: 4px solid rgba(255, 255, 255, .96);
        border-radius: 999px;
        background: #0f9f73 !important;
        box-shadow: 0 9px 22px rgba(15, 118, 110, .28);
        mask-image: none !important;
        color: #fff;
        transition:
            background-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
        will-change: transform;
    }

    .employee-mobile-request-menu > summary.employee-mobile-tab:active span {
        box-shadow: 0 5px 14px rgba(15, 118, 110, .24);
    }

    .employee-mobile-request-menu[open] > summary.employee-mobile-tab span {
        background: #0d8f68 !important;
        animation: employee-mobile-request-pop .3s cubic-bezier(.2, 1.35, .38, 1);
    }

    .employee-mobile-request-menu.is-closing > summary.employee-mobile-tab span {
        animation: employee-mobile-request-close-pop .18s ease-in both;
    }

    .employee-mobile-request-menu > summary.employee-mobile-tab span::before,
    .employee-mobile-request-menu > summary.employee-mobile-tab span::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 3px;
        border-radius: 999px;
        background: #fff;
        transition: transform .18s ease;
    }

    .employee-mobile-request-menu > summary.employee-mobile-tab span::after {
        transform: rotate(90deg);
    }

    .employee-mobile-request-menu[open] > summary.employee-mobile-tab span::before {
        transform: rotate(45deg) scaleX(.82);
    }

    .employee-mobile-request-menu[open] > summary.employee-mobile-tab span::after {
        transform: rotate(135deg) scaleX(.82);
    }

    .employee-mobile-request-menu > summary.employee-mobile-tab strong {
        margin-top: .18rem;
        color: #0f9f73;
        font-size: .66rem !important;
        font-weight: 850 !important;
    }

    .employee-mobile-request-panel {
        bottom: calc(100% + .55rem) !important;
        width: min(246px, calc(100vw - 1.5rem)) !important;
        gap: .42rem !important;
        padding: .58rem !important;
        border-radius: 14px !important;
    }

    .employee-mobile-request-panel a {
        min-height: 34px !important;
        padding: .42rem .46rem !important;
        border-radius: 10px !important;
        color: #1f2937 !important;
        font-size: .68rem !important;
        font-weight: 650 !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
        box-shadow: none !important;
    }

    .employee-mobile-more-menu {
        position: relative !important;
        align-self: stretch;
        display: grid !important;
        place-items: center;
    }

    .employee-mobile-more-menu > summary.employee-mobile-tab {
        min-height: 58px !important;
    }

    .employee-mobile-more-menu > summary.employee-mobile-tab::-webkit-details-marker {
        display: none;
    }

    .employee-mobile-more-panel {
        left: auto !important;
        right: .18rem !important;
        bottom: calc(100% + .65rem) !important;
        width: max-content !important;
        min-width: max-content !important;
        max-width: calc(100vw - 1.5rem) !important;
        grid-template-columns: 1fr !important;
        justify-items: end !important;
        gap: .42rem !important;
        padding: 0 !important;
        border-radius: 14px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none;
        transform-origin: right bottom !important;
    }

    .employee-mobile-more-menu[open] .employee-mobile-more-panel {
        animation: employee-mobile-more-menu-grow .22s cubic-bezier(.2, .9, .28, 1.08) both !important;
    }

    .employee-mobile-request-menu.is-closing .employee-mobile-request-panel {
        display: grid !important;
        pointer-events: none !important;
        animation: employee-mobile-menu-shrink .18s ease-in both !important;
    }

    .employee-mobile-more-menu.is-closing .employee-mobile-more-panel {
        display: grid !important;
        pointer-events: none !important;
        animation: employee-mobile-more-menu-shrink .18s ease-in both !important;
    }

    .employee-mobile-more-panel a {
        min-height: 36px !important;
        justify-content: flex-end !important;
        width: 100% !important;
        padding: .48rem .62rem !important;
        border-radius: 10px !important;
        color: #1f2937 !important;
        font-size: .72rem !important;
        font-weight: 680 !important;
        line-height: 1.14 !important;
        letter-spacing: 0 !important;
        text-align: right !important;
        box-shadow: none !important;
    }

    @keyframes employee-mobile-more-menu-grow {
        from {
            opacity: 0;
            transform: translateY(12px) scaleY(.72);
        }

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

    @keyframes employee-mobile-menu-shrink {
        from {
            opacity: 1;
            transform: translateX(-50%) translateY(0) scaleY(1);
        }

        to {
            opacity: 0;
            transform: translateX(-50%) translateY(10px) scaleY(.72);
        }
    }

    @keyframes employee-mobile-more-menu-shrink {
        from {
            opacity: 1;
            transform: translateY(0) scaleY(1);
        }

        to {
            opacity: 0;
            transform: translateY(10px) scaleY(.72);
        }
    }

    @keyframes employee-mobile-tab-pop {
        0% {
            transform: scale(.88);
        }

        60% {
            transform: scale(1.12);
        }

        100% {
            transform: scale(1);
        }
    }

    @keyframes employee-mobile-request-pop {
        0% {
            transform: scale(.88) translateY(2px);
        }

        68% {
            transform: scale(1.08) translateY(-1px);
        }

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

    @keyframes employee-mobile-request-close-pop {
        from {
            transform: scale(1) translateY(0);
        }

        to {
            transform: scale(.9) translateY(2px);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-mobile-tab,
        .employee-mobile-tab span,
        .employee-mobile-request-menu > summary.employee-mobile-tab,
        .employee-mobile-request-menu > summary.employee-mobile-tab span,
        .employee-mobile-request-menu > summary.employee-mobile-tab span::before,
        .employee-mobile-request-menu > summary.employee-mobile-tab span::after,
        .employee-mobile-announcement-track,
        .employee-mobile-announcement-card {
            animation: none !important;
            transition: none !important;
        }

        .employee-mobile-announcement-track,
        .employee-mobile-announcement-card {
            transform: none !important;
        }

        .employee-mobile-announcement-card:not(:first-child) {
            display: none !important;
        }
    }
}

.login-only-layout,
.login-only-layout .login-shell,
.login-only-layout .login-panel,
.login-only-layout .login-brand,
.login-only-layout .login-title,
.login-only-layout .login-form,
.login-only-layout .login-form .form-control,
.login-only-layout button {
    font-family: "Nunito Sans", "Inter", "Microsoft New Tai Lue", "Segoe UI", Arial, sans-serif !important;
}

.login-only-layout .sidebar,
.login-only-layout .top-row,
.login-only-layout .employee-mobile-tabbar,
.page:has(.login-shell) .sidebar,
.page:has(.login-shell) .top-row,
.page:has(.login-shell) .employee-mobile-tabbar,
html.has-login-shell .sidebar,
html.has-login-shell .top-row,
html.has-login-shell .employee-mobile-tabbar {
    display: none !important;
}

.login-only-layout main,
.login-only-layout .content,
.page:has(.login-shell) main,
.page:has(.login-shell) .content,
html.has-login-shell main,
html.has-login-shell .content {
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
}

.login-only-layout .remember-me-option,
.login-only-layout .login-inline-link-disabled,
.login-only-layout .login-account-link-disabled {
    font-size: .82rem !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    text-decoration: none !important;
    opacity: .9 !important;
}

.login-only-layout .remember-me-option,
.login-only-layout .login-account-link-disabled {
    color: #111827 !important;
}

.login-only-layout .login-inline-link-disabled,
.login-only-layout .login-account-link-disabled strong {
    color: #0f766e !important;
    font-weight: 700 !important;
}

.login-only-layout .login-account-link-disabled strong {
    font-weight: 700 !important;
}

.login-only-layout .login-mode-toggle,
.login-mode-toggle {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .3rem !important;
    padding: .28rem !important;
    border: 1px solid #dbe5ef !important;
    border-radius: 13px !important;
    background: #f8fafc !important;
    overflow: hidden !important;
}

.login-only-layout .login-mode-toggle label,
.login-mode-toggle label {
    position: relative !important;
    display: block !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.login-only-layout .login-mode-toggle input[type="radio"],
.login-mode-toggle input[type="radio"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    pointer-events: auto !important;
    cursor: pointer !important;
}

.login-only-layout .login-mode-toggle span,
.login-mode-toggle span {
    min-height: 36px !important;
    display: grid !important;
    place-items: center !important;
    padding: .35rem .55rem !important;
    color: #64748b !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: .78rem !important;
    font-weight: 650 !important;
    line-height: 1.1 !important;
    text-align: center !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

.login-only-layout .login-mode-toggle input[type="radio"]:checked + span,
.login-mode-toggle input[type="radio"]:checked + span {
    color: #fff !important;
    background: #0f766e !important;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .08), 0 2px 6px rgba(15, 118, 110, .12) !important;
}

.login-only-layout .login-mode-toggle input[type="radio"]:focus-visible + span,
.login-mode-toggle input[type="radio"]:focus-visible + span {
    outline: 2px solid rgba(15, 118, 110, .34) !important;
    outline-offset: 2px !important;
}

.login-form {
    transition: gap .22s ease;
}

.login-floating-field {
    transform-origin: top center;
    transition:
        max-height .24s ease,
        opacity .2s ease,
        transform .24s ease,
        margin .24s ease,
        padding .24s ease;
}

.login-password-field {
    max-height: 58px;
    opacity: 1;
    transform: translateY(0) scale(1);
}

.login-password-field[data-login-hidden="true"] {
    max-height: 0;
    margin-block: -.28rem !important;
    padding-block: 0 !important;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-7px) scale(.985);
    overflow: hidden;
}

.login-form:has(.login-password-field[data-login-hidden="true"]) {
    gap: .7rem;
}

.login-only-layout .login-floating-field > span {
    background: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
}

.login-only-layout .login-floating-field:focus-within > span,
.login-only-layout .login-floating-field:has(.form-control:not(:placeholder-shown)) > span,
.login-only-layout .login-floating-field .form-control:-webkit-autofill + span {
    background: #fff !important;
    box-shadow: 0 0 0 2px #fff !important;
    text-shadow: none !important;
}

.login-only-layout .login-floating-field[hidden] {
    display: none !important;
}

@media (max-width: 760px) {

    .login-only-layout .login-shell,
    .page:has(.login-shell) .login-shell,
    html.has-login-shell .login-shell {
        width: 100% !important;
        min-height: 100dvh !important;
        display: grid !important;
        place-items: center !important;
        padding: 1rem 1.25rem !important;
        overflow-y: auto;
    }

    .login-only-layout .login-panel,
    .page:has(.login-shell) .login-panel,
    html.has-login-shell .login-panel {
        width: min(360px, calc(100vw - 2.5rem)) !important;
        max-width: 360px !important;
        margin-inline: auto !important;
        padding: 1.9rem 1.45rem 1.35rem !important;
        border-radius: 24px !important;
    }

    .login-brand img.login-logo-enhanced {
        width: clamp(92px, 26vw, 116px);
        height: clamp(92px, 26vw, 116px);
        margin-bottom: .9rem;
        margin-inline: auto;
    }

    .login-brand {
        width: 100%;
        justify-items: center !important;
        text-align: center !important;
    }

    .login-brand p {
        max-width: 100%;
        justify-self: center;
        font-size: clamp(.64rem, 2.55vw, .76rem);
        letter-spacing: .025em;
        text-align: center;
        white-space: nowrap;
    }

    .login-brand strong {
        max-width: 100%;
        justify-self: center;
        margin-top: .28rem;
        font-size: clamp(.92rem, 4.1vw, 1.06rem) !important;
        line-height: 1.08;
        letter-spacing: 0;
        text-align: center;
        white-space: nowrap;
    }

    .login-title {
        margin: .95rem 0 1.05rem;
        padding-top: .95rem;
    }

    .login-title p {
        font-size: clamp(.96rem, 4.2vw, 1.08rem) !important;
        font-weight: 450 !important;
    }

    .login-only-layout .login-form {
        gap: .86rem;
    }

    .login-only-layout .login-mode-toggle span {
        min-height: 34px;
        font-size: .74rem;
    }

    .login-floating-field {
        padding-top: 0 !important;
    }

    .login-floating-field .form-control,
    .login-only-layout .login-floating-field .form-control {
        min-height: 44px !important;
        padding: .92rem .9rem .42rem !important;
        border-radius: 11px !important;
        background: #fff !important;
    }

    .login-password-field .form-control {
        padding-right: 3.05rem !important;
    }

    .login-floating-field > span,
    .login-floating-field:focus-within > span,
    .login-floating-field:has(.form-control:not(:placeholder-shown)) > span,
    .login-floating-field .form-control:-webkit-autofill + span {
        box-shadow: none !important;
    }

    .login-floating-field > span {
        left: .82rem !important;
        top: 50% !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: #64748b;
        font-size: .84rem !important;
        font-weight: 500 !important;
        transform: translateY(-50%) !important;
    }

    .login-floating-field:focus-within > span,
    .login-floating-field:has(.form-control:not(:placeholder-shown)) > span,
    .login-floating-field .form-control:-webkit-autofill + span {
        top: -.28rem !important;
        padding: 0 .24rem !important;
        background: #fff !important;
        box-shadow: 0 0 0 2px #fff !important;
        color: #0f766e !important;
        font-size: .66rem !important;
        font-weight: 500 !important;
        transform: none !important;
        text-shadow: none !important;
    }

    .password-toggle-button {
        top: 50% !important;
        right: .42rem !important;
        width: 38px !important;
        height: 38px !important;
        color: #0f766e !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(-50%) !important;
    }

    .password-toggle-button:hover,
    .password-toggle-button:focus-visible,
    .password-toggle-button:active {
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        transform: translateY(-50%) scale(.96) !important;
    }

    .password-toggle-svg {
        width: 20px !important;
        height: 20px !important;
    }

    .login-options-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center !important;
        gap: .75rem !important;
        margin-top: -.12rem !important;
    }

    .remember-me-option {
        min-width: 0;
        gap: .48rem !important;
        color: #111827 !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
        line-height: 1.1 !important;
        white-space: nowrap;
    }

    .remember-me-option input {
        width: 20px !important;
        height: 20px !important;
        min-width: 20px !important;
        min-height: 20px !important;
        flex: 0 0 20px;
        border-radius: 3px !important;
    }

    .login-inline-link-disabled {
        min-height: 32px !important;
        color: #0f766e !important;
        font-size: .78rem !important;
        font-weight: 700 !important;
        white-space: nowrap;
    }

    .login-account-link-disabled {
        color: #111827 !important;
        font-size: .78rem !important;
        font-weight: 500 !important;
        text-align: center !important;
    }

    .login-account-link-disabled strong {
        color: #0f766e !important;
    }

    .login-actions.login-actions-single {
        margin-top: .75rem !important;
    }
}

@media (max-width: 640px) {
    .content { padding-inline: 10px; }
    .top-row { padding-inline: 10px; }
    .account-identity small { display: none; }
    .account-avatar {
        width: 50px;
        height: 50px;
        flex: 0 0 50px;
    }

    .btn,
    button,
    input,
    select,
    textarea { min-height: 42px; }

    .modal-content { border-radius: var(--hris-radius-lg) var(--hris-radius-lg) 0 0; }
}

@media (max-width: 420px) {
    .content {
        padding-inline: .58rem;
    }

    .brand-panel {
        padding-inline: .72rem;
    }

    .navbar-toggler {
        right: .72rem;
    }

    .employee-records-table tbody tr,
    .report-table tbody tr {
        grid-template-columns: 1fr !important;
    }

    .employee-records-table td[data-label="ID No."],
    .report-table td[data-label="ID No."] {
        position: static !important;
        justify-self: start;
        max-width: 100% !important;
        margin-bottom: .15rem;
    }

    .employee-records-table td[data-label="Employee Name"],
    .report-table td[data-label="Employee Name"] {
        padding-right: 0 !important;
    }

    .employee-records-table td[data-label="SG-SI"],
    .employee-records-table td[data-label="Basic Salary"],
    .employee-records-table td[data-label="Status"],
    .report-table td[data-label="Hired Date / Years"],
    .report-table td[data-label="Birthdate"],
    .report-table td[data-label="Age"],
    .report-table td[data-label="Appointment Date"],
    .report-table td[data-label="SG-SI"] {
        grid-column: 1 / -1 !important;
    }

    .row-actions {
        grid-template-columns: 1fr !important;
    }

    .employee-mobile-tab strong {
        font-size: .58rem !important;
    }

    .login-only-layout .login-panel,
    .page:has(.login-shell) .login-panel,
    html.has-login-shell .login-panel {
        width: min(350px, calc(100vw - 2rem)) !important;
        max-width: 350px !important;
        padding-inline: 1.25rem !important;
    }

    .login-brand p {
        font-size: clamp(.62rem, 2.65vw, .72rem);
    }

    .login-brand strong {
        font-size: clamp(.84rem, 4vw, .98rem) !important;
    }

    .login-options-row {
        grid-template-columns: minmax(0, 1fr) auto !important;
        gap: .45rem !important;
    }

    .login-only-layout .login-mode-toggle span {
        padding-inline: .35rem;
        font-size: .68rem;
    }

    .remember-me-option {
        font-size: .76rem !important;
    }

    .login-inline-link-disabled,
    .login-account-link-disabled {
        font-size: .72rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ==========================================================
   Employee mobile photo placement fix
   Patch marker: employee-photo-corner-not-greeting-center
   ========================================================== */

@media (max-width: 768px) {
    .employee-mobile-hero-card {
        position: relative !important;
        grid-template-columns: minmax(0, 1fr) !important;
        align-items: start !important;
        min-height: 142px !important;
        padding: 1.08rem 5.35rem 1.05rem 1.18rem !important;
        overflow: hidden !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-copy {
        position: relative !important;
        z-index: 2 !important;
        min-width: 0 !important;
        padding-right: 0 !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-badge {
        position: absolute !important;
        top: 14px !important;
        right: 14px !important;
        left: auto !important;
        bottom: auto !important;
        width: 66px !important;
        height: 66px !important;
        min-width: 66px !important;
        min-height: 66px !important;
        max-width: 66px !important;
        max-height: 66px !important;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        border: 4px solid rgba(255, 255, 255, .96) !important;
        background: rgba(255, 255, 255, .96) !important;
        box-shadow: 0 12px 24px rgba(15, 23, 42, .18) !important;
        overflow: hidden !important;
        transform: none !important;
        z-index: 4 !important;
        text-decoration: none !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-badge.has-photo img,
    .employee-mobile-hero-card .employee-mobile-hero-badge img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .employee-mobile-hero-card .employee-mobile-hero-badge span {
        width: 100% !important;
        height: 100% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #0f766e !important;
        color: #ffffff !important;
        font-size: 1.05rem !important;
        font-weight: 850 !important;
        letter-spacing: .02em !important;
    }

    .employee-mobile-avatar-trigger.has-photo,
    .employee-drawer-avatar.has-photo {
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        color: transparent !important;
    }

    .employee-mobile-avatar-trigger.has-photo img,
    .employee-drawer-avatar.has-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: inherit !important;
        object-fit: cover !important;
    }

    .employee-drawer-profile .employee-drawer-avatar.has-photo {
        position: absolute !important;
        top: 1.05rem !important;
        right: 1.05rem !important;
        margin: 0 !important;
        z-index: 2 !important;
        border: 3px solid rgba(255, 255, 255, .9) !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .2) !important;
    }

    .employee-drawer-profile {
        padding-top: 4.75rem !important;
    }
}

/* ==========================================================
   Keep employee drawer photo in original profile location
   Patch marker: keep-drawer-photo-original-location
   ========================================================== */

@media (max-width: 768px) {
    .employee-drawer-profile {
        position: relative !important;
        display: grid !important;
        align-content: end !important;
        min-height: 178px !important;
        padding: 2.15rem 1.2rem 1.15rem !important;
        overflow: hidden !important;
    }

    .employee-drawer-profile .employee-drawer-avatar,
    .employee-drawer-profile .employee-drawer-avatar.has-photo {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        z-index: 1 !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        max-width: 58px !important;
        max-height: 58px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 0 .85rem 0 !important;
        padding: 0 !important;
        border-radius: 999px !important;
        border: 2px solid rgba(255, 255, 255, .72) !important;
        background: rgba(15, 23, 42, .18) !important;
        box-shadow: none !important;
        overflow: hidden !important;
        transform: none !important;
        color: #ffffff !important;
    }

    .employee-drawer-profile .employee-drawer-avatar.has-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 999px !important;
        object-fit: cover !important;
    }

    .employee-mobile-avatar-trigger.has-photo {
        padding: 0 !important;
        overflow: hidden !important;
        background: #ffffff !important;
        color: transparent !important;
    }

    .employee-mobile-avatar-trigger.has-photo img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        min-width: 100% !important;
        min-height: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: inherit !important;
        object-fit: cover !important;
    }
}

/* ==========================================================
   Remove attendance schedule/accepted helper labels from day popup
   Patch marker: remove-attendance-schedule-accepted-labels
   ========================================================== */

/* Hide the shift summary line under the selected date. */
.employee-attendance-modal .attendance-shift-summary,
.employee-attendance-modal .attendance-shift-line,
.employee-attendance-modal .attendance-day-shift,
.employee-attendance-modal .attendance-selected-shift,
.employee-attendance-modal .employee-attendance-shift,
.attendance-detail-modal .attendance-shift-summary,
.attendance-detail-modal .attendance-shift-line,
.attendance-detail-modal .attendance-day-shift,
.attendance-day-popup .attendance-shift-summary,
.attendance-day-popup .attendance-shift-line,
.attendance-day-popup .attendance-day-shift {
    display: none !important;
}

/* Hide the Schedule:/Accepted: lines inside IN AM / OUT AM / IN PM / OUT PM cards. */
.employee-attendance-modal .attendance-slot-schedule,
.employee-attendance-modal .attendance-slot-accepted,
.employee-attendance-modal .attendance-slot-window,
.employee-attendance-modal .attendance-slot-range,
.employee-attendance-modal .attendance-slot-meta,
.employee-attendance-modal .attendance-log-slot-schedule,
.employee-attendance-modal .attendance-log-slot-accepted,
.employee-attendance-modal .attendance-log-slot-window,
.employee-attendance-modal .attendance-log-slot-range,
.employee-attendance-modal .attendance-log-slot-meta,
.employee-attendance-modal .employee-attendance-slot-schedule,
.employee-attendance-modal .employee-attendance-slot-accepted,
.employee-attendance-modal .employee-attendance-slot-window,
.employee-attendance-modal .employee-attendance-slot-range,
.employee-attendance-modal .employee-attendance-slot-meta,
.attendance-detail-modal .attendance-slot-schedule,
.attendance-detail-modal .attendance-slot-accepted,
.attendance-detail-modal .attendance-slot-window,
.attendance-detail-modal .attendance-slot-range,
.attendance-detail-modal .attendance-slot-meta,
.attendance-day-popup .attendance-slot-schedule,
.attendance-day-popup .attendance-slot-accepted,
.attendance-day-popup .attendance-slot-window,
.attendance-day-popup .attendance-slot-range,
.attendance-day-popup .attendance-slot-meta {
    display: none !important;
}

/* Keep the four time cards compact after removing the helper labels. */
.employee-attendance-modal .attendance-log-slot,
.employee-attendance-modal .attendance-slot-card,
.employee-attendance-modal .employee-attendance-slot-card,
.attendance-detail-modal .attendance-log-slot,
.attendance-detail-modal .attendance-slot-card,
.attendance-day-popup .attendance-log-slot,
.attendance-day-popup .attendance-slot-card {
    min-height: 84px !important;
    align-content: center !important;
}

/* Make the time value remain visually centered. */
.employee-attendance-modal .attendance-slot-time,
.employee-attendance-modal .attendance-log-slot-time,
.employee-attendance-modal .employee-attendance-slot-time,
.attendance-detail-modal .attendance-slot-time,
.attendance-detail-modal .attendance-log-slot-time,
.attendance-day-popup .attendance-slot-time,
.attendance-day-popup .attendance-log-slot-time {
    margin-bottom: 0 !important;
}

/* Center the authentication panel in the full desktop browser viewport. */
@media (min-width: 761px) {
    .page.login-only-layout,
    html.has-login-shell .page {
        width: 100% !important;
        min-height: 100dvh !important;
        height: 100dvh !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        place-items: center !important;
        overflow-y: auto !important;
    }

    .page.login-only-layout main,
    html.has-login-shell main {
        width: 100% !important;
        min-height: 100dvh !important;
        display: grid !important;
        place-items: center !important;
    }

    .page.login-only-layout .content,
    html.has-login-shell .content {
        width: 100% !important;
        min-height: 100dvh !important;
        display: grid !important;
        place-items: center !important;
        padding: 2rem !important;
    }

    .page.login-only-layout .login-shell,
    html.has-login-shell .login-shell {
        width: 100% !important;
        min-height: 0 !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .page.login-only-layout .login-panel,
    html.has-login-shell .login-panel {
        margin: auto !important;
    }
}



/* Employee Attendance: new time-log notification and recent log highlight. */
@media (max-width: 760px) {
    .employee-attendance-new-log-toast {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: .68rem;
        padding: .78rem .82rem;
        border: 1px solid rgba(20, 184, 166, .34);
        border-left: 4px solid #0f766e;
        border-radius: 16px;
        background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 100%);
        color: #0f172a;
        box-shadow: 0 14px 30px rgba(15, 118, 110, .11);
        animation: employee-attendance-new-log-in .28s ease-out both;
    }

    .employee-attendance-new-log-toast > span {
        width: 2.15rem;
        height: 2.15rem;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #ccfbf1;
        color: #0f766e;
    }

    .employee-attendance-new-log-toast > span::before {
        content: "";
        width: 1.05rem;
        height: 1.05rem;
        display: block;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m17 7-5-5-5 5'/%3E%3Cpath d='M19 12v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2v20'/%3E%3Cpath d='m17 7-5-5-5 5'/%3E%3Cpath d='M19 12v7a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1v-7'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    .employee-attendance-new-log-toast strong {
        display: block;
        color: #0f766e;
        font-size: .82rem;
        font-weight: 850;
        line-height: 1.15;
    }

    .employee-attendance-new-log-toast small {
        display: block;
        margin-top: .14rem;
        color: #475569;
        font-size: .68rem;
        font-weight: 650;
        line-height: 1.2;
    }

    .employee-attendance-new-log-toast button {
        position: relative;
        width: 1.9rem;
        height: 1.9rem;
        border: 0;
        border-radius: 999px;
        background: rgba(15, 118, 110, .09);
        color: #0f766e;
    }

    .employee-attendance-new-log-toast button::before,
    .employee-attendance-new-log-toast button::after {
        content: "";
        position: absolute;
        width: .78rem;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
        transform: translate(-50%, -50%) rotate(45deg);
    }

    .employee-attendance-new-log-toast button::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

    .employee-attendance-refresh-status {
        justify-self: center;
        width: fit-content;
        max-width: 100%;
        padding: .38rem .66rem;
        border: 1px solid rgba(15, 118, 110, .18);
        border-radius: 999px;
        background: rgba(236, 253, 245, .94);
        color: #0f766e;
        font-size: .66rem;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .employee-attendance-log-card.is-new-log,
    .employee-attendance-modal-log.is-new-log {
        border-color: rgba(15, 118, 110, .58) !important;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, .10), 0 10px 24px rgba(15, 118, 110, .10) !important;
        animation: employee-attendance-new-log-pulse 1.18s ease-out both;
    }

    .employee-attendance-day {
        position: relative;
    }

    .employee-attendance-day.has-new-log {
        box-shadow: 0 0 0 3px rgba(20, 184, 166, .20), 0 9px 18px rgba(15, 118, 110, .14);
        animation: employee-attendance-new-log-pulse 1.18s ease-out both;
    }

    .employee-attendance-day.has-new-log::after {
        content: "";
        position: absolute;
        top: .24rem;
        right: .24rem;
        width: .42rem;
        height: .42rem;
        border: 2px solid #fff;
        border-radius: 999px;
        background: #0f766e;
        box-shadow: 0 0 0 3px rgba(15, 118, 110, .16);
    }

    @keyframes employee-attendance-new-log-in {
        0% {
            opacity: 0;
            transform: translateY(-8px) scale(.98);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    @keyframes employee-attendance-new-log-pulse {
        0% {
            transform: scale(.98);
        }
        45% {
            transform: scale(1.025);
        }
        100% {
            transform: scale(1);
        }
    }
}



/* Employee Attendance: new time logs now go to the Notification Bell. */
@media (max-width: 760px) {
    .employee-attendance-day.has-new-log {
        box-shadow: 0 0 0 3px rgba(20, 184, 166, .20), 0 9px 18px rgba(15, 118, 110, .14);
        animation: employee-attendance-new-log-pulse 1.18s ease-out both;
    }
}


/* Employee Attendance: keep background time-log checking silent. */
.employee-attendance-refresh-status {
    display: none !important;
}



/* Employee Attendance: today log cards show the date and use red top bars when required logs are missing. */
@media (max-width: 760px) {
    .employee-attendance-log-card.is-empty strong {
        color: #991b1b;
    }

    .employee-attendance-log-card.is-empty small {
        color: #64748b;
    }
}



/* Employee Request note dialog: shorter note labels and compact OK button. */
@media (max-width: 760px) {
    .employee-request-notice {
        gap: .76rem;
    }

    .employee-request-notice h2 {
        font-size: 1rem;
    }

    .employee-request-notice .btn {
        justify-self: center;
        width: auto !important;
        min-width: 132px;
        max-width: 180px;
        padding-inline: 1.25rem;
    }
}



/* Employee Request upload/camera controls: force button and icon center alignment. */
@media (max-width: 760px) {
    .employee-request-upload-actions {
        align-items: center !important;
    }

    .employee-request-upload-button,
    .employee-request-camera-button {
        display: inline-grid !important;
        place-content: center !important;
        align-items: center !important;
        justify-items: center !important;
        line-height: 0 !important;
        text-align: center !important;
    }

    .employee-request-upload-button .employee-request-icon,
    .employee-request-camera-button .employee-request-icon {
        display: block !important;
        margin: auto !important;
    }
}



/* Employee mobile navigation fix: keep the bottom menu clickable on the payslip list. */
@media (max-width: 760px) {
    .employee-mobile-tabbar {
        z-index: 2200 !important;
        pointer-events: auto !important;
    }

    .employee-mobile-tabbar a,
    .employee-mobile-tabbar summary,
    .employee-mobile-tabbar details {
        pointer-events: auto !important;
    }

    .employee-mobile-tab.active,
    .employee-mobile-more-menu > summary.employee-mobile-tab.active,
    .employee-mobile-request-menu > summary.employee-mobile-tab.active {
        color: #0f766e !important;
    }

    .employee-payslip-page,
    .employee-payslip-latest-panel,
    .employee-payslip-latest-list {
        position: relative;
        z-index: 1;
    }
}



/* Payslip return navigation fix: keep employee bottom navigation visible and clickable after opening a payslip preview. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 2400 !important;
        pointer-events: auto !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar a,
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar summary,
    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar details {
        pointer-events: auto !important;
    }

    .employee-payslip-latest-card {
        touch-action: manipulation;
    }
}



/* Final payslip mobile stuck fix: mobile tabbar uses plain hard-navigation anchors and stays above payslip preview. */
@media (max-width: 760px) {
    .employee-mobile-tabbar {
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        isolation: isolate;
    }

    .employee-mobile-tabbar a,
    .employee-mobile-tabbar summary,
    .employee-mobile-tabbar details {
        pointer-events: auto !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent;
    }

    .payslip-preview-page {
        position: relative;
        z-index: 1;
        padding-bottom: calc(var(--employee-mobile-tabbar-space, 86px) + 1rem) !important;
    }

    .payslip-preview-toolbar,
    .payslip-document {
        position: relative;
        z-index: 2;
    }

    .employee-payslip-page,
    .employee-payslip-latest-panel,
    .employee-payslip-latest-list,
    .employee-payslip-latest-card {
        position: relative;
        z-index: 1;
    }
}



/* Employee Payslip: open payslip preview inline so returning to the list cannot trap mobile navigation. */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open {
        padding: 0 !important;
    }

    .employee-payslip-inline-preview {
        min-height: 100%;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: .6rem;
        margin: -.75rem -.9rem -1rem;
        padding: .95rem .72rem calc(var(--employee-mobile-tabbar-space, 86px) + 1rem) !important;
        background: #e5e7eb;
        overflow-x: auto;
    }

    .employee-payslip-inline-preview .payslip-preview-toolbar {
        width: min(420px, 100%);
        margin: 0 auto .2rem;
        padding-inline: 0;
        justify-content: flex-start;
    }

    .employee-payslip-inline-preview .payslip-preview-toolbar .btn {
        width: auto !important;
        min-height: 32px;
    }

    button.employee-payslip-latest-card {
        width: 100%;
        border: 1px solid rgba(203, 213, 225, .82);
        font-family: inherit;
        text-align: left;
        cursor: pointer;
    }

    button.employee-payslip-latest-card:focus-visible {
        outline: 3px solid rgba(15, 118, 110, .18);
        outline-offset: 2px;
    }

    .employee-mobile-tabbar {
        z-index: 99999 !important;
        pointer-events: auto !important;
    }
}



/* =========================================================
   Employee Mobile Unified UI
   Applies one visual language to Dashboard, Attendance,
   Request, Leave, Payslip, Employment, Service Record, and More.
   ========================================================= */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) {
        --employee-mobile-font: "Nunito Sans", "Inter", "Segoe UI", "Microsoft New Tai Lue", Arial, sans-serif;
        --employee-mobile-bg: #f7fafc;
        --employee-mobile-surface: #ffffff;
        --employee-mobile-border: rgba(203, 213, 225, .82);
        --employee-mobile-border-soft: rgba(226, 232, 240, .92);
        --employee-mobile-text: #0f172a;
        --employee-mobile-muted: #64748b;
        --employee-mobile-muted-2: #94a3b8;
        --employee-mobile-primary: #0f766e;
        --employee-mobile-primary-strong: #0b6b64;
        --employee-mobile-primary-soft: #ccfbf1;
        --employee-mobile-danger: #dc2626;
        --employee-mobile-warning: #eab308;
        --employee-mobile-radius: 18px;
        --employee-mobile-radius-sm: 12px;
        --employee-mobile-shadow: 0 10px 26px rgba(15, 23, 42, .055);
        background: var(--employee-mobile-bg) !important;
        color: var(--employee-mobile-text);
        font-family: var(--employee-mobile-font) !important;
    }

    .page:has(.employee-mobile-tabbar) main,
    .page:has(.employee-mobile-tabbar) .content {
        background:
            radial-gradient(circle at 92% 0%, rgba(15, 118, 110, .055), transparent 32%),
            var(--employee-mobile-bg) !important;
        font-family: var(--employee-mobile-font) !important;
    }

    .page:has(.employee-mobile-tabbar) .content {
        padding: .82rem .9rem 1rem !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-page-shell,
        .employee-portal,
        .employee-leave-page-shell,
        .employee-attendance-mobile,
        .employee-mobile-home
    ) {
        display: grid;
        gap: .82rem;
        color: var(--employee-mobile-text);
        font-family: var(--employee-mobile-font) !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .page-heading,
        .employee-portal-heading,
        .employee-mobile-section-heading
    ) {
        margin: 0 0 .22rem !important;
        padding: 0 !important;
        color: var(--employee-mobile-text);
    }

    .page:has(.employee-mobile-tabbar) :where(
        .page-heading h1,
        .employee-portal-heading h1,
        .employee-attendance-mobile h1
    ) {
        margin: 0 !important;
        color: var(--employee-mobile-text) !important;
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .page-heading p,
        .employee-portal-heading p,
        .employee-attendance-mobile .employee-attendance-subtitle
    ) {
        max-width: 100%;
        margin: .24rem 0 0 !important;
        color: var(--employee-mobile-muted) !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .page-heading span,
        .employee-portal-heading span,
        .employee-employment-card-heading span,
        .employee-attendance-leave-heading span,
        .panel-heading h2
    ) {
        color: var(--employee-mobile-primary) !important;
        font-size: .68rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-dashboard-card,
        .employee-workflow-panel,
        .employee-actions-panel,
        .employee-payslip-latest-panel,
        .employee-employment-card,
        .employee-leave-balance-group,
        .employee-approved-leave-group,
        .employee-request-form,
        .employee-request-notice,
        .employee-service-record-panel
    ) {
        border: 1px solid var(--employee-mobile-border) !important;
        border-radius: var(--employee-mobile-radius) !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow: var(--employee-mobile-shadow) !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-workflow-panel,
        .employee-actions-panel,
        .employee-payslip-latest-panel,
        .employee-employment-card,
        .employee-leave-balance-group,
        .employee-approved-leave-group,
        .employee-service-record-panel
    ) {
        padding: .84rem !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card,
        .employee-action-card,
        .employee-filed-leave-card,
        .employee-service-record-card,
        .employee-employment-detail-grid div,
        .employee-employment-money-list div,
        .employee-employment-status-grid div
    ) {
        border: 1px solid var(--employee-mobile-border) !important;
        border-radius: var(--employee-mobile-radius-sm) !important;
        background: var(--employee-mobile-surface) !important;
        box-shadow: none !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card,
        .employee-action-card,
        .employee-service-record-card
    ) {
        transition:
            transform .16s ease,
            border-color .16s ease,
            box-shadow .16s ease,
            background-color .16s ease;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card,
        .employee-action-card,
        .employee-service-record-card
    ):active {
        transform: scale(.985);
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card span,
        .employee-action-card span,
        .employee-service-record-card-head small
    ) {
        color: var(--employee-mobile-primary) !important;
        font-size: .72rem !important;
        font-weight: 800 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card strong,
        .employee-action-card strong,
        .employee-filed-leave-card strong,
        .employee-service-record-card-head strong
    ) {
        color: var(--employee-mobile-text) !important;
        font-size: .86rem !important;
        font-weight: 820 !important;
        line-height: 1.18 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card dt,
        .employee-employment-detail-grid dt,
        .employee-employment-money-list dt,
        .employee-employment-status-grid span,
        .employee-service-record-card-grid span
    ) {
        color: var(--employee-mobile-muted) !important;
        font-size: .62rem !important;
        font-weight: 780 !important;
        letter-spacing: .04em !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .employee-payslip-latest-card dd,
        .employee-employment-detail-grid dd,
        .employee-employment-money-list dd,
        .employee-service-record-card-grid strong
    ) {
        color: var(--employee-mobile-text) !important;
        font-size: .82rem !important;
        font-weight: 700 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(
        .btn,
        button.btn,
        .employee-request-actions .btn,
        .payslip-preview-toolbar .btn
    ) {
        min-height: 38px !important;
        border-radius: 12px !important;
        padding: .52rem .82rem !important;
        font-size: .78rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(.btn-primary, .employee-request-actions .btn-primary) {
        border-color: var(--employee-mobile-primary) !important;
        background: var(--employee-mobile-primary) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 18px rgba(15, 118, 110, .14) !important;
    }

    .page:has(.employee-mobile-tabbar) :where(.btn-outline-secondary) {
        border-color: var(--employee-mobile-border-soft) !important;
        background: #f8fafc !important;
        color: var(--employee-mobile-text) !important;
    }

    .page:has(.employee-mobile-tabbar) :where(input.form-control, textarea.form-control, select.form-select) {
        min-height: 38px !important;
        border-color: var(--employee-mobile-border) !important;
        border-radius: 12px !important;
        background: #ffffff !important;
        color: var(--employee-mobile-text) !important;
        font-size: .78rem !important;
        font-weight: 650 !important;
    }

    .page:has(.employee-mobile-tabbar) :where(.empty-workflow-state, .empty-state) {
        min-height: 150px;
        border: 1px dashed var(--employee-mobile-border);
        border-radius: var(--employee-mobile-radius);
        background: rgba(248, 250, 252, .86);
        color: var(--employee-mobile-muted);
        text-align: center;
    }

    .page:has(.employee-mobile-tabbar) :where(.empty-workflow-state strong, .empty-state strong) {
        color: var(--employee-mobile-text);
        font-size: .88rem;
        font-weight: 850;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-tabbar {
        border-color: rgba(226, 232, 240, .92) !important;
        background: rgba(255, 255, 255, .98) !important;
        box-shadow: 0 -12px 32px rgba(15, 23, 42, .12) !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-tab strong {
        font-size: .61rem !important;
        font-weight: 820 !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-tab.active,
    .page:has(.employee-mobile-tabbar) .employee-mobile-tab:hover,
    .page:has(.employee-mobile-tabbar) .employee-mobile-more-menu[open] .employee-mobile-tab,
    .page:has(.employee-mobile-tabbar) .employee-mobile-request-menu[open] .employee-mobile-tab {
        color: var(--employee-mobile-primary) !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-request-menu > summary.employee-mobile-tab span {
        background: var(--employee-mobile-primary) !important;
        box-shadow: 0 10px 24px rgba(15, 118, 110, .22) !important;
    }

    .page:has(.employee-mobile-tabbar) .payslip-document {
        font-family: "Microsoft New Tai Lue", Arial, sans-serif !important;
    }
}



/* Employee Employment: Appointment Date and Years in Government Service must use full-width rows. */
@media (max-width: 760px) {
    .employee-employment-detail-grid > div:not(.employee-employment-pair) {
        width: 100% !important;
        grid-column: 1 / -1 !important;
    }

    .employee-employment-detail-grid > div:not(.employee-employment-pair) dt {
        max-width: calc(100% - 1.04rem) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }
}



/* Employee Employment: remove the outer shared panel around paired cards. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-employment-detail-grid > .employee-employment-pair,
    .page:has(.employee-mobile-tabbar) .employee-employment-money-list > .employee-employment-pair {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .42rem !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        outline: 0 !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-employment-detail-grid > .employee-employment-pair > div,
    .page:has(.employee-mobile-tabbar) .employee-employment-money-list > .employee-employment-pair > div {
        margin-top: .34rem !important;
        border: 1px solid var(--employee-mobile-border, rgba(203, 213, 225, .82)) !important;
        border-radius: var(--employee-mobile-radius-sm, 12px) !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }
}



/* Employee Leave: match Approved Leave heading style with Leave Balance and add FY label. */
@media (max-width: 760px) {
    .employee-approved-leave-heading {
        min-width: 0;
        display: grid;
        gap: .18rem;
        margin: .08rem .1rem 0;
    }

    .employee-approved-leave-heading span {
        display: block;
        color: #1e293b;
        font-size: 1.14rem;
        font-weight: 720;
        letter-spacing: 0;
        line-height: 1.1;
        text-transform: none;
    }

    .employee-approved-leave-heading small {
        width: max-content;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
        color: #64748b;
        font-size: .62rem;
        font-weight: 650;
        line-height: 1.15;
        text-align: left;
    }

    .employee-approved-leave-group h2 {
        display: none !important;
    }
}



/* Employee Request menu: center Request button now opens a full panel with two cards per row. */
@media (max-width: 760px) {
    .employee-mobile-tabbar > a.employee-mobile-tab.is-request {
        position: relative !important;
        align-self: stretch;
        display: grid !important;
        place-items: center;
        min-height: 78px !important;
        margin-top: -1.65rem !important;
        align-content: start !important;
        padding-top: 0 !important;
        color: #0f766e !important;
        text-decoration: none !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .employee-mobile-tabbar > a.employee-mobile-tab.is-request > span {
        width: 54px !important;
        height: 54px !important;
        display: grid !important;
        place-items: center;
        border: 4px solid rgba(255, 255, 255, .96);
        border-radius: 999px;
        background: #0f9f73 !important;
        box-shadow: 0 9px 22px rgba(15, 118, 110, .28);
        mask-image: none !important;
        color: #fff;
        transition:
            background-color .18s ease,
            box-shadow .18s ease,
            transform .18s ease !important;
    }

    .employee-mobile-tabbar > a.employee-mobile-tab.is-request:active > span {
        transform: scale(.92);
        box-shadow: 0 5px 14px rgba(15, 118, 110, .24);
    }

    .employee-mobile-tabbar > a.employee-mobile-tab.is-request.active > span {
        background: #0d8f68 !important;
        animation: employee-mobile-request-pop .3s cubic-bezier(.2, 1.35, .38, 1);
    }

    .employee-mobile-tabbar > a.employee-mobile-tab.is-request > span::before,
    .employee-mobile-tabbar > a.employee-mobile-tab.is-request > span::after {
        content: "";
        position: absolute;
        width: 22px;
        height: 3px;
        border-radius: 999px;
        background: #fff;
    }

    .employee-mobile-tabbar > a.employee-mobile-tab.is-request > span::after {
        transform: rotate(90deg);
    }

    .employee-mobile-tabbar > a.employee-mobile-tab.is-request > strong {
        margin-top: .18rem;
        color: #0f9f73;
        font-size: .66rem !important;
        font-weight: 850 !important;
    }

    .employee-request-menu-page {
        gap: .78rem;
    }

    .employee-request-menu-panel {
        display: grid;
        gap: .78rem;
        padding: .86rem !important;
    }

    .employee-request-menu-heading {
        display: grid;
        gap: .18rem;
        margin: 0 .08rem;
    }

    .employee-request-menu-heading h2 {
        margin: 0 !important;
        color: #1e293b !important;
        font-size: 1.14rem !important;
        font-weight: 720 !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
        text-transform: none !important;
    }

    .employee-request-menu-heading span {
        display: block;
        color: #64748b !important;
        font-size: .62rem !important;
        font-weight: 650 !important;
        line-height: 1.15 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .employee-request-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .56rem;
    }

    .employee-request-menu-card {
        --request-card-accent: #0f766e;
        position: relative;
        min-height: 116px;
        display: grid;
        align-content: start;
        gap: .34rem;
        padding: .78rem .68rem .72rem;
        overflow: hidden;
        border: 1px solid rgba(203, 213, 225, .82);
        border-radius: 14px;
        background: #ffffff;
        color: #0f172a;
        text-decoration: none;
        box-shadow: none;
        transition:
            transform .16s ease,
            border-color .16s ease,
            box-shadow .16s ease;
    }

    .employee-request-menu-card::before {
        content: "";
        position: absolute;
        inset: 0 0 auto;
        height: 4px;
        background: var(--request-card-accent);
    }

    .employee-request-menu-card:active {
        transform: scale(.985);
    }

    .employee-request-menu-card > span {
        width: 2.2rem;
        height: 2.2rem;
        display: grid;
        place-items: center;
        border-radius: 12px;
        background: color-mix(in srgb, var(--request-card-accent) 12%, white);
        color: var(--request-card-accent);
    }

    .employee-request-menu-card > span::before {
        content: "";
        width: 1.08rem;
        height: 1.08rem;
        display: block;
        background: currentColor;
        mask-repeat: no-repeat;
        mask-position: center;
        mask-size: contain;
    }

    .employee-request-menu-card strong {
        color: #0f172a;
        font-size: .82rem;
        font-weight: 850;
        line-height: 1.12;
    }

    .employee-request-menu-card small {
        color: #64748b;
        font-size: .64rem;
        font-weight: 650;
        line-height: 1.18;
    }

    .employee-request-menu-card.is-service-record {
        --request-card-accent: #0f766e;
    }

    .employee-request-menu-card.is-coe {
        --request-card-accent: #2563eb;
    }

    .employee-request-menu-card.is-leave {
        --request-card-accent: #7c3aed;
    }

    .employee-request-menu-card.is-clearance {
        --request-card-accent: #ea580c;
    }

    .employee-request-menu-card.is-service-record > span::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h9l5 5v15H6z'/%3E%3Cpath d='M14 2v6h6'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h6'/%3E%3C/svg%3E");
    }

    .employee-request-menu-card.is-coe > span::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 15 8.5 18l1-4.5L6 10.5l4.7-.4L12 6l1.3 4.1 4.7.4-3.5 3 1 4.5z'/%3E%3Cpath d='M5 3h14v18H5z'/%3E%3C/svg%3E");
    }

    .employee-request-menu-card.is-leave > span::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3Cpath d='M3 10h18'/%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M8 15h.01'/%3E%3Cpath d='M12 15h.01'/%3E%3Cpath d='M16 15h.01'/%3E%3C/svg%3E");
    }

    .employee-request-menu-card.is-clearance > span::before {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
    }
}






/* Employee Attendance final fix: only Daily Time Record uses the Leave Balance label style. */
@media (max-width: 760px) {
    .employee-attendance-calendar-heading > .employee-attendance-calendar-title > span,
    .page:has(.employee-mobile-tabbar) .employee-attendance-calendar-heading > .employee-attendance-calendar-title > span {
        display: block !important;
        color: #0f766e !important;
        font-size: .68rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-attendance-calendar-heading > .employee-attendance-calendar-title > h2,
    .page:has(.employee-mobile-tabbar) .employee-attendance-calendar-heading > .employee-attendance-calendar-title > h2 {
        margin: .14rem 0 0 !important;
        color: #0f172a !important;
        font-size: 1.18rem !important;
        font-weight: 760 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-transform: none !important;
    }

    .employee-attendance-calendar-heading > .employee-attendance-legend > span,
    .page:has(.employee-mobile-tabbar) .employee-attendance-calendar-heading > .employee-attendance-legend > span,
    .employee-attendance-calendar-heading > .employee-attendance-legend > span.complete,
    .employee-attendance-calendar-heading > .employee-attendance-legend > span.missing,
    .employee-attendance-calendar-heading > .employee-attendance-legend > span.absent {
        position: relative !important;
        width: max-content !important;
        min-width: max-content !important;
        padding: .2rem .34rem .2rem .9rem !important;
        border-radius: 999px !important;
        background: transparent !important;
        color: #64748b !important;
        font-size: .64rem !important;
        font-weight: 620 !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
        text-transform: none !important;
    }
}



/* Employee Request menu: remove section labels and outer panel around request cards. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-request-menu-panel {
        display: grid !important;
        gap: .56rem !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-request-menu-heading {
        display: none !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-request-card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .56rem !important;
        width: 100% !important;
    }
}



/* Employee Request note fix: OK works with JS fallback and bottom navigation remains clickable while note is open. */
@media (max-width: 760px) {
    .employee-request-notice-backdrop {
        bottom: var(--employee-mobile-tabbar-space, 86px) !important;
        z-index: 1800 !important;
        pointer-events: none !important;
    }

    .employee-request-notice {
        pointer-events: auto !important;
    }

    .employee-request-form-backdrop.is-hidden {
        display: none !important;
    }

    .employee-mobile-tabbar {
        z-index: 99999 !important;
        pointer-events: auto !important;
    }
}



/* Employee Request note build fix: JS fallback uses data attribute instead of duplicate onclick, and bottom nav remains above note. */
@media (max-width: 760px) {
    .employee-request-notice-backdrop {
        bottom: var(--employee-mobile-tabbar-space, 86px) !important;
        z-index: 1800 !important;
        pointer-events: none !important;
    }

    .employee-request-notice,
    .employee-request-notice [data-employee-request-notice-ok] {
        pointer-events: auto !important;
    }

    .employee-mobile-tabbar {
        z-index: 99999 !important;
        pointer-events: auto !important;
    }
}



/* Employee Request form fix: close/cancel fallback and centered upload/camera icons. */
@media (max-width: 760px) {
    .employee-request-upload-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 36px) !important;
        align-items: center !important;
        justify-items: center !important;
        justify-content: start !important;
        gap: .3rem !important;
    }

    .employee-request-upload-button,
    .employee-request-camera-button {
        position: relative !important;
        box-sizing: border-box !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    .employee-request-upload-button .employee-request-icon,
    .employee-request-camera-button .employee-request-icon {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }

    .employee-request-upload-button input {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }

    .employee-request-camera-button {
        cursor: pointer !important;
    }

    .employee-request-close-button,
    .employee-request-actions [data-employee-request-cancel] {
        pointer-events: auto !important;
        cursor: pointer !important;
    }
}



/* Employee Request inline panel: submit/cancel/close only close the panel, no page refresh. */
@media (max-width: 760px) {
    .employee-request-inline-success {
        display: block;
        margin: 0;
        padding: .68rem .78rem;
        border: 1px solid rgba(15, 118, 110, .22);
        border-radius: 14px;
        background: #ecfeff;
        color: #0f766e;
        font-size: .76rem;
        font-weight: 780;
        line-height: 1.25;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .035);
    }

    button.employee-request-menu-card {
        width: 100%;
        font-family: inherit;
        text-align: left;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    button.employee-request-menu-card:focus-visible {
        outline: 3px solid rgba(15, 118, 110, .18);
        outline-offset: 2px;
    }

    .employee-request-form-backdrop,
    .employee-request-notice-backdrop {
        z-index: 1800 !important;
    }

    .employee-request-upload-actions {
        display: grid !important;
        grid-template-columns: repeat(2, 36px) !important;
        align-items: center !important;
        justify-items: center !important;
        justify-content: start !important;
        gap: .3rem !important;
    }

    .employee-request-upload-button,
    .employee-request-camera-button {
        position: relative !important;
        box-sizing: border-box !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        line-height: 1 !important;
        vertical-align: middle !important;
    }

    .employee-request-upload-button .employee-request-icon,
    .employee-request-camera-button .employee-request-icon {
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        width: 18px !important;
        height: 18px !important;
        display: block !important;
        margin: 0 !important;
        transform: translate(-50%, -50%) !important;
        transform-origin: center center !important;
        pointer-events: none !important;
    }

    .employee-request-upload-button input {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        opacity: 0 !important;
        cursor: pointer !important;
        pointer-events: auto !important;
    }
}



/* Employee Leave final fix: Approved Leave heading must match Leave Balance heading exactly. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-approved-leave-group > .employee-approved-leave-heading > span {
        display: block !important;
        color: var(--employee-mobile-primary, #0f766e) !important;
        font-size: .68rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-approved-leave-group > .employee-approved-leave-heading > small {
        display: block !important;
        width: max-content !important;
        max-width: 100% !important;
        margin: .16rem 0 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: #64748b !important;
        font-size: .62rem !important;
        font-weight: 650 !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
        text-align: left !important;
        text-transform: none !important;
    }
}



/* Employee Request cards: updated labels and improved document icons. */
@media (max-width: 760px) {
    .employee-request-menu-card {
        min-height: 132px !important;
        gap: .42rem !important;
        padding: .82rem .68rem .76rem !important;
    }

    .employee-request-menu-card > span {
        width: 2.45rem !important;
        height: 2.45rem !important;
        border-radius: 14px !important;
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--request-card-accent) 18%, transparent);
    }

    .employee-request-menu-card > span::before {
        width: 1.34rem !important;
        height: 1.34rem !important;
        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-position: center !important;
        mask-position: center !important;
        -webkit-mask-size: contain !important;
        mask-size: contain !important;
    }

    .employee-request-menu-card strong {
        font-size: .84rem !important;
        line-height: 1.12 !important;
    }

    .employee-request-menu-card small {
        font-size: .63rem !important;
        line-height: 1.16 !important;
    }

    .employee-request-menu-card.is-service-record > span::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h8l4%204v14H7z%27/%3E%3Cpath%20d%3D%27M15%203v5h4%27/%3E%3Cpath%20d%3D%27M10%2012h6%27/%3E%3Cpath%20d%3D%27M10%2016h5%27/%3E%3Cpath%20d%3D%27M4%207v13%27/%3E%3C/g%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.15%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M7%203h8l4%204v14H7z%27/%3E%3Cpath%20d%3D%27M15%203v5h4%27/%3E%3Cpath%20d%3D%27M10%2012h6%27/%3E%3Cpath%20d%3D%27M10%2016h5%27/%3E%3Cpath%20d%3D%27M4%207v13%27/%3E%3C/g%3E%3C/svg%3E") !important;
    }

    .employee-request-menu-card.is-coe > span::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2715%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%205V3h6v2%27/%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2711%27%20r%3D%272%27/%3E%3Cpath%20d%3D%27M7.5%2016c.7-1.6%204.3-1.6%205%200%27/%3E%3Cpath%20d%3D%27M15%2010h2%27/%3E%3Cpath%20d%3D%27M15%2014h2%27/%3E%3C/g%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2715%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M9%205V3h6v2%27/%3E%3Ccircle%20cx%3D%2710%27%20cy%3D%2711%27%20r%3D%272%27/%3E%3Cpath%20d%3D%27M7.5%2016c.7-1.6%204.3-1.6%205%200%27/%3E%3Cpath%20d%3D%27M15%2010h2%27/%3E%3Cpath%20d%3D%27M15%2014h2%27/%3E%3C/g%3E%3C/svg%3E") !important;
    }

    .employee-request-menu-card.is-leave > span::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203v3%27/%3E%3Cpath%20d%3D%27M16%203v3%27/%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M4%2010h16%27/%3E%3Cpath%20d%3D%27M8%2015h3%27/%3E%3Cpath%20d%3D%27M8%2018h7%27/%3E%3Cpath%20d%3D%27m15%2015%201.2%201.2L19%2013.5%27/%3E%3C/g%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M8%203v3%27/%3E%3Cpath%20d%3D%27M16%203v3%27/%3E%3Crect%20x%3D%274%27%20y%3D%275%27%20width%3D%2716%27%20height%3D%2716%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M4%2010h16%27/%3E%3Cpath%20d%3D%27M8%2015h3%27/%3E%3Cpath%20d%3D%27M8%2018h7%27/%3E%3Cpath%20d%3D%27m15%2015%201.2%201.2L19%2013.5%27/%3E%3C/g%3E%3C/svg%3E") !important;
    }

    .employee-request-menu-card.is-clearance > span::before {
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s7-3.5%207-9V6l-7-3-7%203v7c0%205.5%207%209%207%209Z%27/%3E%3Cpath%20d%3D%27m9%2012.5%202%202%204-4%27/%3E%3Cpath%20d%3D%27M8%207.5h8%27/%3E%3C/g%3E%3C/svg%3E") !important;
        mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.1%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M12%2022s7-3.5%207-9V6l-7-3-7%203v7c0%205.5%207%209%207%209Z%27/%3E%3Cpath%20d%3D%27m9%2012.5%202%202%204-4%27/%3E%3Cpath%20d%3D%27M8%207.5h8%27/%3E%3C/g%3E%3C/svg%3E") !important;
    }
}



/* Employee Employment: vertically center data inside detail and compensation boxes. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-employment-detail-grid > div:not(.employee-employment-pair),
    .page:has(.employee-mobile-tabbar) .employee-employment-money-list > div:not(.employee-employment-pair),
    .page:has(.employee-mobile-tabbar) .employee-employment-status-grid > div {
        min-height: 54px !important;
        display: grid !important;
        align-content: center !important;
        justify-content: stretch !important;
        gap: .16rem !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-employment-detail-grid > .employee-employment-pair > div,
    .page:has(.employee-mobile-tabbar) .employee-employment-money-list > .employee-employment-pair > div {
        min-height: 54px !important;
        display: grid !important;
        align-content: center !important;
        justify-content: stretch !important;
        gap: .16rem !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-employment-detail-grid dt,
    .page:has(.employee-mobile-tabbar) .employee-employment-money-list dt,
    .page:has(.employee-mobile-tabbar) .employee-employment-status-grid span {
        margin: 0 !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-employment-detail-grid dd,
    .page:has(.employee-mobile-tabbar) .employee-employment-money-list dd,
    .page:has(.employee-mobile-tabbar) .employee-employment-status-grid strong {
        margin: 0 !important;
    }
}

/* Employee Payroll label update. */
@media (max-width: 760px) {
    .employee-payslip-heading h1::after {
        content: "";
    }
}



/* Employee Payroll mobile list: Twib-inspired blue header and large payroll cards. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) {
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px));
        display: block !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        overflow: hidden;
        background: #ffffff !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        position: relative;
        min-height: 220px;
        display: grid;
        align-content: end;
        margin: 0 !important;
        padding: 2.1rem 1.3rem 3.4rem !important;
        overflow: hidden;
        border-radius: 0 !important;
        background:
            radial-gradient(circle at 86% 20%, rgba(255,255,255,.18), transparent 0 9%, transparent 10%),
            linear-gradient(135deg, #3f83df 0%, #3679d5 100%) !important;
        color: #ffffff !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading::before {
        content: "";
        position: absolute;
        left: 1.35rem;
        top: 2.2rem;
        width: 2.95rem;
        height: 1.6rem;
        opacity: .94;
        background:
            linear-gradient(#fff, #fff) 0 .08rem / 2.7rem .22rem no-repeat,
            linear-gradient(#fff, #fff) 0 .68rem / 1.8rem .22rem no-repeat,
            linear-gradient(#fff, #fff) 0 1.28rem / 1.25rem .22rem no-repeat;
        border-radius: 999px;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading::after {
        content: "";
        position: absolute;
        right: 1.35rem;
        top: 1.62rem;
        width: 3.65rem;
        height: 3.65rem;
        border-radius: 50%;
        background:
            radial-gradient(circle at 50% 38%, #3f83df 0 .52rem, transparent .54rem),
            radial-gradient(ellipse at 50% 74%, #3f83df 0 1.05rem, transparent 1.08rem),
            rgba(255,255,255,.84);
        box-shadow: 0 12px 28px rgba(15, 23, 42, .12);
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        position: relative;
        z-index: 1;
        margin: 0 !important;
        color: #ffffff !important;
        font-size: 1.56rem !important;
        font-weight: 650 !important;
        letter-spacing: -.025em !important;
        line-height: 1.1 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p {
        display: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        position: relative;
        z-index: 2;
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px) - 150px);
        display: block !important;
        margin: -2.35rem 0 0 !important;
        padding: 2.05rem 1rem 1.2rem !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list {
        display: grid !important;
        gap: 1.05rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card {
        position: relative;
        width: 100%;
        min-height: 128px;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: .9rem !important;
        padding: 1.35rem 1.12rem 1.18rem !important;
        border: 0 !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 14px 32px rgba(30, 64, 175, .075) !important;
        text-align: left !important;
        font-family: var(--employee-mobile-font, "Nunito Sans", "Segoe UI", Arial, sans-serif) !important;
        appearance: none;
        -webkit-appearance: none;
        cursor: pointer;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card:active {
        transform: scale(.985);
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main {
        min-width: 0;
        display: grid;
        gap: .24rem;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main strong {
        color: #111827 !important;
        font-size: 1.34rem !important;
        font-weight: 650 !important;
        letter-spacing: -.018em !important;
        line-height: 1.1 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main span {
        color: #8b8f98 !important;
        font-size: .9rem !important;
        font-weight: 600 !important;
        letter-spacing: .005em !important;
        line-height: 1.1 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main em {
        margin-top: .26rem;
        color: #7fb36d !important;
        font-size: clamp(1.72rem, 8vw, 2.05rem) !important;
        font-style: normal !important;
        font-weight: 850 !important;
        letter-spacing: -.035em !important;
        line-height: 1 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-arrow {
        width: 4.05rem;
        height: 4.05rem;
        display: grid;
        place-items: center;
        border-radius: 999px;
        background: #d9ecff;
        color: #2f77cf;
        font-size: 2.35rem;
        font-weight: 340;
        line-height: 1;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card:nth-child(even) .employee-payroll-card-arrow {
        background: #f8dce8;
        color: #d34d7d;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card:nth-child(3n) .employee-payroll-card-arrow {
        background: #e0f4e2;
        color: #65a75b;
    }

    .employee-payslip-page:not(.is-preview-open) .empty-workflow-state {
        min-height: 180px;
        border: 0 !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 14px 32px rgba(30, 64, 175, .075) !important;
    }
}



/* Employee Payroll mobile list: keep Twib-style layout but use the general employee mobile typography scale. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card {
        min-height: 108px !important;
        padding: 1rem .95rem .95rem !important;
        border-radius: 16px !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main {
        gap: .18rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main strong {
        color: #0f172a !important;
        font-size: .96rem !important;
        font-weight: 820 !important;
        letter-spacing: -.01em !important;
        line-height: 1.15 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main span {
        color: #64748b !important;
        font-size: .72rem !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        line-height: 1.15 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main em {
        margin-top: .28rem !important;
        color: #0f766e !important;
        font-size: clamp(1.18rem, 5.8vw, 1.45rem) !important;
        font-style: normal !important;
        font-weight: 850 !important;
        letter-spacing: -.018em !important;
        line-height: 1.05 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-arrow {
        width: 3rem !important;
        height: 3rem !important;
        min-width: 3rem !important;
        font-size: 1.65rem !important;
        font-weight: 450 !important;
    }
}



/* Employee Payroll mobile list: remove reference hamburger/avatar, trim header, and use HRIS theme color. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        min-height: 128px !important;
        padding: 1.1rem 1.05rem 2.05rem !important;
        background:
            linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
        color: #ffffff !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading::before,
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading::after {
        content: none !important;
        display: none !important;
        background: none !important;
        box-shadow: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        align-self: end !important;
        color: #ffffff !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin: -1.25rem 0 0 !important;
        padding: 1.35rem 1rem 1.2rem !important;
        border-radius: 24px 24px 0 0 !important;
    }
}



/* Employee Payroll mobile list final trim: smaller typography and shorter theme header. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        min-height: 86px !important;
        padding: .72rem 1rem 1.1rem !important;
        background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        font-size: 1.12rem !important;
        font-weight: 850 !important;
        letter-spacing: -.01em !important;
        line-height: 1.1 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px) - 64px) !important;
        margin: -.72rem 0 0 !important;
        padding: 1rem .9rem 1.1rem !important;
        border-radius: 20px 20px 0 0 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list {
        gap: .7rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card {
        min-height: 86px !important;
        padding: .82rem .82rem .78rem !important;
        border-radius: 14px !important;
        gap: .65rem !important;
        box-shadow: 0 10px 22px rgba(15, 23, 42, .055) !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main {
        gap: .12rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main strong {
        font-size: .86rem !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main span {
        color: #64748b !important;
        font-size: .62rem !important;
        font-weight: 780 !important;
        letter-spacing: .035em !important;
        line-height: 1.12 !important;
        text-transform: uppercase !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main em {
        margin-top: .2rem !important;
        color: #0f766e !important;
        font-size: 1.05rem !important;
        font-weight: 850 !important;
        letter-spacing: -.01em !important;
        line-height: 1.05 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-arrow {
        width: 2.35rem !important;
        height: 2.35rem !important;
        min-width: 2.35rem !important;
        font-size: 1.28rem !important;
        font-weight: 600 !important;
    }
}



/* Employee Payroll mobile list: match header background with Employment menu background. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        min-height: 68px !important;
        padding: .45rem .95rem .55rem !important;
        background: #f7fafc !important;
        color: #0f172a !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        color: #0f172a !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin: 0 !important;
        padding: .65rem .9rem 1.1rem !important;
        border-radius: 0 !important;
        background: #f7fafc !important;
    }
}



/* Employee Payroll mobile list: restore the outer panel that contains the payroll cards. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        background: #f7fafc !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        display: block !important;
        margin: .15rem .9rem 0 !important;
        padding: .9rem !important;
        border: 1px solid rgba(203, 213, 225, .82) !important;
        border-radius: 18px !important;
        background: rgba(255, 255, 255, .97) !important;
        box-shadow: 0 10px 26px rgba(15, 23, 42, .055) !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list {
        gap: .7rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card {
        box-shadow: none !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
    }
}



/* Employee Payroll mobile list: make the outer payroll panel stretch edge-to-edge like the reference. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        width: 100% !important;
        max-width: none !important;
        margin: .05rem 0 0 !important;
        padding: 1.05rem 1rem 1.2rem !important;
        border: 0 !important;
        border-radius: 28px 28px 0 0 !important;
        background: #f2f6fb !important;
        box-shadow: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list {
        width: 100% !important;
        gap: .82rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card {
        width: 100% !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .045) !important;
    }
}



/* Employee Payroll mobile list: white edge-to-edge outer panel with visible curved top corners. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        width: 100% !important;
        max-width: none !important;
        margin: .05rem 0 0 !important;
        padding: 1.05rem 1rem 1.2rem !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: none !important;
        overflow: hidden !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list {
        width: 100% !important;
        gap: .82rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card {
        width: 100% !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }
}



/* Employee Payroll mobile heading: align title/helper with Employment menu. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        min-height: auto !important;
        display: block !important;
        align-content: initial !important;
        margin: 0 !important;
        padding: .06rem .95rem .62rem !important;
        overflow: visible !important;
        border-radius: 0 !important;
        background: #f7fafc !important;
        color: #0f172a !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p {
        display: block !important;
        max-width: 100% !important;
        margin: .24rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin: .18rem 0 0 !important;
    }
}



/* Employee Payroll mobile heading: lower the Payroll title/helper spacing. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding: .72rem .95rem .72rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin: .32rem 0 0 !important;
    }
}


/* Employee Payroll mobile card label spacing fix: use title case and tighten amount spacing. */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main {
        gap: 0 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main strong {
        margin: 0 0 .26rem 0 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main span {
        margin: 0 !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
        font-size: .66rem !important;
        line-height: 1.05 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-main em {
        margin-top: 0 !important;
        line-height: 1 !important;
    }
}


/* Payroll page white panel color unification */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open),
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        background: #ffffff !important;
    }
}


/* Payroll page final separation + stronger payroll arrow icon */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) {
        background: #f3f5f7 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        background: #f3f5f7 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .75) !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card-arrow,
    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card:nth-child(even) .employee-payroll-card-arrow,
    .employee-payslip-page:not(.is-preview-open) .employee-payroll-card:nth-child(3n) .employee-payroll-card-arrow {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, #159a8b 0%, #0f766e 100%) !important;
        border: 1px solid rgba(15, 118, 110, .24) !important;
        box-shadow: 0 6px 14px rgba(15, 118, 110, .18) !important;
        color: #ffffff !important;
        font-size: 1.28rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .12) !important;
        padding-left: 1px !important;
        transform: none !important;
    }
}


/* Employee Payroll preview outer panel: Twib-inspired shell only */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open {
        display: block !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        background: linear-gradient(180deg, #eaf0f5 0%, #eaf0f5 100%) !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open .employee-payslip-inline-preview {
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px));
        margin: 0 !important;
        padding: 1rem .82rem calc(var(--employee-mobile-tabbar-space, 86px) + 1rem) !important;
        background: #f8fafc !important;
        border-radius: 30px 30px 0 0 !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78) !important;
        gap: .78rem !important;
        justify-items: center !important;
        align-content: start !important;
        overflow-x: auto !important;
    }

    .employee-payslip-page.is-preview-open .payslip-preview-toolbar,
    .employee-payslip-page.is-preview-open .payslip-document {
        position: relative;
        z-index: 2;
    }

    .employee-payslip-page.is-preview-open .payslip-preview-toolbar {
        width: min(420px, 100%) !important;
        margin: 0 auto .25rem !important;
        padding: 0 .1rem !important;
    }
}


/* Employee payroll preview summary flow responsive */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payslip-inline-preview {
        justify-items: stretch !important;
    }

    .employee-payroll-preview-shell {
        width: 100%;
        max-width: 100%;
    }

    .employee-payroll-detail-heading {
        padding: 0 .12rem;
    }

    .employee-payroll-preview-panel {
        padding: 1rem .95rem 1.1rem;
        border-radius: 1.75rem;
        gap: .95rem;
    }

    .employee-payroll-stat-row span,
    .employee-payroll-stat-row strong {
        font-size: .94rem;
    }

    .employee-payroll-breakdown summary {
        padding: 1rem 1.05rem;
        font-size: .98rem;
    }

    .employee-payroll-breakdown-body {
        padding: .85rem 1.05rem 1rem;
    }

    .employee-payroll-breakdown-row span,
    .employee-payroll-breakdown-row strong {
        font-size: .92rem;
    }

    .employee-payroll-preview-footer {
        grid-template-columns: 1fr;
        gap: .65rem;
    }

    .employee-payroll-download-button {
        width: min(280px, 100%);
    }
}

/* Payroll summary preview final polish: aligned header, edge-to-edge panel, uniform typography. */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open {
        display: block !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        background: #f3f5f7 !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open .employee-payslip-inline-preview {
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        margin: 0 !important;
        padding: 0 0 calc(var(--employee-mobile-tabbar-space, 86px) + 1rem) !important;
        background: #f3f5f7 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        gap: 0 !important;
        justify-items: stretch !important;
        align-content: start !important;
        overflow-x: hidden !important;
    }

    .employee-payroll-preview-shell {
        width: 100% !important;
        max-width: none !important;
        display: grid !important;
        gap: 0 !important;
    }

    .employee-payroll-detail-heading {
        margin: 0 !important;
        padding: .72rem .95rem .72rem !important;
        border-radius: 0 !important;
        background: #f3f5f7 !important;
        box-shadow: none !important;
    }

    .employee-payroll-detail-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .8rem !important;
        width: 100% !important;
    }

    .employee-payroll-detail-title-row h1 {
        min-width: 0 !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-size: 1.12rem !important;
        font-weight: 850 !important;
        letter-spacing: -.01em !important;
        line-height: 1.15 !important;
    }

    .employee-payroll-back-button {
        flex: 0 0 auto !important;
        min-height: 32px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: .42rem .82rem !important;
        border: 1px solid rgba(203, 213, 225, .95) !important;
        border-radius: 999px !important;
        background: #ffffff !important;
        color: #334155 !important;
        box-shadow: 0 6px 14px rgba(15, 23, 42, .06) !important;
        font-size: .74rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
        text-decoration: none !important;
    }

    .employee-payroll-back-button:hover,
    .employee-payroll-back-button:focus-visible {
        color: #0f766e !important;
        border-color: rgba(15, 118, 110, .25) !important;
        outline: none !important;
        text-decoration: none !important;
    }

    .employee-payroll-preview-panel {
        width: 100% !important;
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px) - 150px) !important;
        margin: 0 !important;
        padding: 1rem 1rem 1.05rem !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .72) !important;
        gap: .72rem !important;
    }

    .employee-payroll-stat-list {
        display: grid !important;
        gap: .38rem !important;
        width: min(100%, 86%) !important;
        margin-left: auto !important;
        padding: .02rem 0 .56rem !important;
        border-bottom: 1px solid rgba(226, 232, 240, .95) !important;
    }

    .employee-payroll-stat-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .56rem !important;
        width: 100% !important;
    }

    .employee-payroll-stat-row span {
        color: #475569 !important;
        font-size: .8rem !important;
        font-weight: 720 !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        text-align: left !important;
    }

    .employee-payroll-stat-row strong {
        color: #0f172a !important;
        font-size: .84rem !important;
        font-weight: 850 !important;
        line-height: 1.2 !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-payroll-breakdown {
        border: 1px solid rgba(226, 232, 240, .42) !important;
        border-radius: 18px !important;
        box-shadow: none !important;
    }

    .employee-payroll-breakdown:not([open]) {
        border-radius: 16px !important;
    }

    .employee-payroll-breakdown summary {
        padding: .34rem .82rem !important;
        font-size: .8rem !important;
        font-weight: 820 !important;
        letter-spacing: -.005em !important;
        line-height: 1 !important;
        min-height: 0 !important;
    }

    .employee-payroll-breakdown:not([open]) summary {
        padding-top: .34rem !important;
        padding-bottom: .34rem !important;
        min-height: 0 !important;
    }
    .employee-payroll-breakdown-arrow {
        font-size: 1.08rem !important;
        font-weight: 850 !important;
    }

    .employee-payroll-breakdown-income {
        background: #e8f3db !important;
        color: #47742c !important;
    }

    .employee-payroll-breakdown-deduction {
        background: #f8dce8 !important;
        color: #c63870 !important;
    }

    .employee-payroll-breakdown-body {
        padding: .66rem .95rem .8rem !important;
        background: rgba(255, 255, 255, .36) !important;
        border-top: 1px solid rgba(15, 23, 42, .055) !important;
    }

    .employee-payroll-breakdown h4 {
        margin: .06rem 0 .4rem !important;
        color: #64748b !important;
        font-size: .64rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-payroll-breakdown-row {
        gap: .7rem !important;
        padding: .32rem 0 !important;
        color: #0f172a !important;
    }

    .employee-payroll-breakdown-row span {
        font-size: .78rem !important;
        font-weight: 700 !important;
        line-height: 1.18 !important;
    }

    .employee-payroll-breakdown-row strong {
        font-size: .8rem !important;
        font-weight: 850 !important;
        line-height: 1.18 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .employee-payroll-breakdown-empty {
        color: #64748b !important;
        font-size: .76rem !important;
        font-weight: 650 !important;
        line-height: 1.3 !important;
    }

    .employee-payroll-preview-footer {
        display: none !important;
    }

    .employee-payroll-preview-actions {
        justify-content: center !important;
        padding-top: .12rem !important;
    }

    .employee-payroll-download-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: min(170px, 100%) !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: 34px !important;
        border-radius: 12px !important;
        padding: 0 .85rem !important;
        font-size: .76rem !important;
        font-weight: 800 !important;
        line-height: 1 !important;
        box-shadow: 0 8px 16px rgba(15, 118, 110, .12) !important;
    }
}


/* Payroll summary forced compact collapsed cards and aligned amounts */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        gap: .58rem !important;
        padding-top: .92rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-list {
        width: min(100%, 82%) !important;
        margin-left: auto !important;
        margin-right: .78rem !important;
        gap: .34rem !important;
        padding-bottom: .52rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .5rem !important;
        width: 100% !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row span {
        text-align: left !important;
        white-space: nowrap !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong {
        text-align: right !important;
        white-space: nowrap !important;
        min-width: 4.8rem !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) summary {
        height: 46px !important;
        min-height: 46px !important;
        max-height: 46px !important;
        padding: 0 .86rem !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) .employee-payroll-breakdown-body {
        display: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-actions {
        padding-top: .04rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-download-button {
        width: 166px !important;
        height: 34px !important;
        min-height: 34px !important;
        border-radius: 12px !important;
        padding: 0 .82rem !important;
    }
}


/* Payroll summary compact stats + tighter collapsed cards final override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-stat-list {
        width: min(100%, 89%) !important;
        margin-left: auto !important;
        margin-right: .96rem !important;
        gap: 0 !important;
        padding-top: 0 !important;
        padding-bottom: .1rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row {
        gap: .2rem !important;
        min-height: .98rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row span {
        font-size: .79rem !important;
        line-height: .95 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong {
        min-width: 4.45rem !important;
        font-size: .83rem !important;
        line-height: .95 !important;
        padding-right: .72rem !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) {
        display: block !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) > summary {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin: 0 !important;
        padding: 0 .82rem !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) > summary span:first-child {
        font-size: .79rem !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) > summary .employee-payroll-breakdown-arrow {
        font-size: .98rem !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) .employee-payroll-breakdown-body {
        display: none !important;
    }
}


/* Payroll summary stats balanced vertical spacing final override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-stat-list {
        gap: .22rem !important;
        row-gap: .22rem !important;
        padding-top: 0 !important;
        padding-bottom: .22rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row {
        min-height: 1.08rem !important;
        height: auto !important;
        line-height: 1.05 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row span,
    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong {
        line-height: 1.05 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong {
        padding-right: .9rem !important;
    }
}


/* Payroll breakdown panels double height final override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        transform-origin: top center !important;
        transition: height .18s ease, max-height .18s ease, border-radius .18s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) > summary {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        margin: 0 !important;
        padding: 0 .9rem !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] {
        height: auto !important;
        min-height: 68px !important;
        max-height: none !important;
        overflow: hidden !important;
        border-radius: 16px !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary {
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        margin: 0 !important;
        padding: 0 .9rem !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body {
        display: block !important;
        animation: payrollBreakdownExpandDown .16s ease-out;
    }

    @keyframes payrollBreakdownExpandDown {
        from { opacity: 0; transform: translateY(-3px); }
        to { opacity: 1; transform: translateY(0); }
    }
}


/* Payroll breakdown fixed top downward expansion override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open,
    .employee-payslip-page.is-preview-open .employee-payslip-inline-preview,
    .employee-payslip-page.is-preview-open .employee-payroll-preview-shell,
    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        overflow-anchor: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        display: grid !important;
        align-content: start !important;
        justify-content: stretch !important;
        grid-auto-rows: max-content !important;
        grid-template-rows: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        align-self: start !important;
        transform-origin: top center !important;
        will-change: height, max-height !important;
        overflow-anchor: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown > summary {
        position: relative !important;
        top: 0 !important;
        z-index: 1 !important;
        overflow-anchor: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] {
        align-self: start !important;
        height: auto !important;
        min-height: 68px !important;
        max-height: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body {
        display: block !important;
        transform-origin: top center !important;
    }
}


/* Payroll summary stats spacing + slightly shorter collapsed breakdown panels */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-stat-list {
        gap: .24rem !important;
        row-gap: .24rem !important;
        padding-bottom: .42rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row {
        min-height: 1.5rem !important;
        height: auto !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        margin: 0 !important;
        line-height: 1.12 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row span,
    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong {
        line-height: 1.12 !important;
        margin: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) > summary {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary {
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
    }
}


/* Payroll deductions detail content: include Premiums and Loans sections from payslip */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-breakdown h4 {
        margin: .22rem 0 .35rem !important;
        color: #475569 !important;
        font-size: .68rem !important;
        font-weight: 850 !important;
        letter-spacing: .035em !important;
        line-height: 1.1 !important;
        text-transform: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown h5 {
        margin: .16rem 0 .22rem .72rem !important;
        color: #0f172a !important;
        font-size: .72rem !important;
        font-weight: 850 !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown h4 + .employee-payroll-breakdown-row,
    .employee-payslip-page.is-preview-open .employee-payroll-breakdown h5 + .employee-payroll-breakdown-row {
        padding-top: .18rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown h5 ~ .employee-payroll-breakdown-row span {
        padding-left: .72rem !important;
    }
}


/* Payroll detail outer panel vertical match with Payroll menu */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding-bottom: .72rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .32rem !important;
    }
}


/* Payroll detail header refinement: lower month/year title, remove Payroll prefix, and use a cleaner flat back button */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding: 1.02rem .95rem .78rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row {
        align-items: center !important;
        min-height: 2.2rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row h1 {
        font-size: 1.08rem !important;
        line-height: 1.15 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-back-button {
        min-height: 30px !important;
        padding: .38rem .78rem !important;
        border: 1px solid #cbd5e1 !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        color: #334155 !important;
        box-shadow: none !important;
        font-size: .72rem !important;
        font-weight: 780 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-back-button:hover,
    .employee-payslip-page.is-preview-open .employee-payroll-back-button:focus-visible {
        background: #eef2f7 !important;
        color: #0f766e !important;
        border-color: #cbd5e1 !important;
        box-shadow: none !important;
    }
}


/* Payroll menu panel vertical match with preferred payroll detail panel position */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: 1.02rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .32rem !important;
    }
}



/* Payroll menu panel final vertical alignment with inside payroll panel */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: 2.35rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .64rem !important;
    }
}



/* Payroll menu panel final level correction: lower menu panel to match inside payroll panel */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: 3.10rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .82rem !important;
    }
}


/* Payroll menu panel measured alignment with detail panel */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: 1.50rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .48rem !important;
    }
}


/* Payroll menu panel comparison micro-lower: align with inside payroll detail panel */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: 1.88rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .54rem !important;
    }
}


/* Payroll deduction details: payslip-style indentation and semi-bold hierarchy */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body {
        padding: .56rem .9rem .84rem !important;
        background: rgba(255, 255, 255, .42) !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-section {
        margin: .08rem 0 .12rem !important;
        color: #0f172a !important;
        font-size: .73rem !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-transform: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-loans-title {
        margin-top: .34rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-group {
        margin: .16rem 0 .06rem .58rem !important;
        color: #0f172a !important;
        font-size: .71rem !important;
        font-weight: 600 !important;
        letter-spacing: 0 !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: baseline !important;
        gap: .62rem !important;
        min-height: 1.02rem !important;
        padding: .06rem 0 !important;
        margin: 0 !important;
        color: #0f172a !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-row span {
        color: #0f172a !important;
        font-size: .72rem !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-transform: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-row strong {
        color: #0f172a !important;
        font-size: .72rem !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-premium-row span {
        padding-left: .58rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-deduction-detail-body .employee-payroll-deduction-loan-row span {
        padding-left: 1.18rem !important;
    }
}


/* Payroll income details: match payslip-style item formatting */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-income-detail-body {
        padding: .56rem .9rem .84rem !important;
        background: rgba(255, 255, 255, .42) !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-income-detail-body .employee-payroll-income-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: baseline !important;
        gap: .62rem !important;
        min-height: 1.02rem !important;
        padding: .06rem 0 !important;
        margin: 0 !important;
        color: #0f172a !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-income-detail-body .employee-payroll-income-row span {
        padding-left: .58rem !important;
        color: #0f172a !important;
        font-size: .72rem !important;
        font-weight: 400 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-transform: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-income-detail-body .employee-payroll-income-row strong {
        color: #0f172a !important;
        font-size: .72rem !important;
        font-weight: 500 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
    }
}


/* Payroll menu helper below title */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p {
        display: block !important;
        max-width: 21rem !important;
        margin: .28rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.34 !important;
    }
}


/* Payroll helper visibility fix: force helper below Payroll label */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        position: relative !important;
        overflow: visible !important;
        padding-top: .76rem !important;
        padding-bottom: 1.35rem !important;
        z-index: 2 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading > div {
        display: block !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        display: block !important;
        margin: 0 !important;
        line-height: 1.12 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading .employee-payslip-helper,
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 3 !important;
        max-width: 22rem !important;
        margin: .34rem 0 0 !important;
        color: #64748b !important;
        font-size: .76rem !important;
        font-weight: 520 !important;
        line-height: 1.28 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .38rem !important;
    }
}


/* Payroll helper final visible pseudo-label override */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        overflow: visible !important;
        padding-bottom: 1.92rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading > div {
        display: block !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        display: block !important;
        margin: 0 !important;
        overflow: visible !important;
        line-height: 1.12 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1::after {
        content: "Income, deductions, and compensation summary" !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: min(21.8rem, calc(100vw - 2rem)) !important;
        margin-top: .32rem !important;
        color: #64748b !important;
        font-size: .76rem !important;
        font-weight: 520 !important;
        line-height: 1.28 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: normal !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading .employee-payslip-helper {
        display: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .54rem !important;
    }
}



/* Payroll helper visible but keep menu outer panel higher */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: .95rem !important;
        margin-bottom: 0 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1::after {
        margin-top: .26rem !important;
        margin-bottom: 0 !important;
        line-height: 1.25 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .12rem !important;
    }
}


/* Payroll helper/menu panel up + payroll detail panel slightly down final override */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-bottom: .42rem !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1::after {
        margin-top: .18rem !important;
        margin-bottom: 0 !important;
        font-size: .68rem !important;
        font-weight: 500 !important;
        line-height: 1.12 !important;
        white-space: nowrap !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: 0 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding-bottom: 1.02rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .46rem !important;
    }
}


/* Payroll manual final tuning: keep helper readable and panel at balanced position */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-top: .76rem !important;
        padding-bottom: .82rem !important;
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1 {
        margin: 0 !important;
        line-height: 1.12 !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1::after {
        content: none !important;
        display: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading .employee-payslip-helper,
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p.employee-payslip-helper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        max-width: 22rem !important;
        margin: .30rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 520 !important;
        line-height: 1.32 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: normal !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .14rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding-bottom: 1.02rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .46rem !important;
    }
}


/* Payroll manual position correction: slight menu panel upward only */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading {
        padding-top: .76rem !important;
        padding-bottom: .62rem !important; /* decrease = menu outer panel moves UP */
        margin-bottom: 0 !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel {
        margin-top: .08rem !important; /* decrease = menu outer panel moves UP */
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1::after {
        content: none !important;
        display: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading .employee-payslip-helper,
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p.employee-payslip-helper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: .30rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 520 !important;
        line-height: 1.32 !important;
        white-space: normal !important;
    }
}

/* Payroll detail panel position: match current Payroll menu outer panel height */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding-bottom: .62rem !important;
        margin-bottom: 0 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .08rem !important;
    }
}


/* Payroll detail panel micro lower adjustment */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding-bottom: .68rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .18rem !important;
    }
}

/* Payroll detail panel tiny lower adjustment */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        padding-bottom: .74rem !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .24rem !important;
    }
}


/* Payroll panel exact level lock: same header height before both outer panels */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading,
    .employee-payslip-page.is-preview-open .employee-payroll-detail-heading {
        box-sizing: border-box !important;
        height: 4.55rem !important;
        min-height: 4.55rem !important;
        max-height: 4.55rem !important;
        margin: 0 !important;
        padding: .76rem .95rem 0 !important;
        overflow: visible !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading > div,
    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 2rem !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1,
    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row h1 {
        margin: 0 !important;
        line-height: 1.12 !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading h1::after {
        content: none !important;
        display: none !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading .employee-payslip-helper,
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-heading p.employee-payslip-helper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        max-width: 22rem !important;
        margin: .30rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 520 !important;
        line-height: 1.32 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
        white-space: normal !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-panel,
    .employee-payslip-page.is-preview-open .employee-payroll-preview-panel {
        margin-top: .10rem !important;
    }
}


/* Payroll detail title/back lower while keeping panel level locked */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row {
        transform: translateY(.34rem) !important;
        will-change: transform !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row h1,
    .employee-payslip-page.is-preview-open .employee-payroll-back-button {
        transform: none !important;
    }
}


/* Payroll income/deduction expand-down animation final */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown > summary {
        cursor: pointer !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        transform-origin: center center !important;
        transition: transform .22s ease, opacity .18s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
        transform-origin: top center !important;
        animation: payrollBreakdownSlideDown .26s cubic-bezier(.2, .75, .2, 1) both !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] {
        animation: payrollBreakdownPanelSettle .22s ease-out both !important;
    }

    @keyframes payrollBreakdownSlideDown {
        0% {
            opacity: 0;
            transform: translateY(-8px) scaleY(.94);
            clip-path: inset(0 0 100% 0 round 0 0 12px 12px);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scaleY(1);
            clip-path: inset(0 0 0 0 round 0 0 12px 12px);
        }
    }

    @keyframes payrollBreakdownPanelSettle {
        0% {
            box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
        }
        100% {
            box-shadow: 0 10px 24px rgba(15, 23, 42, .07);
        }
    }
}



/* Payroll expand animation slower timing override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        transition: border-color .32s ease, background-color .32s ease, box-shadow .32s ease !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .36s ease, opacity .30s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body {
        animation-duration: .46s !important;
        animation-timing-function: cubic-bezier(.2, .72, .2, 1) !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] {
        animation-duration: .38s !important;
        animation-timing-function: ease-out !important;
    }
}

/* Payroll true dropdown animation: JS controls panel height so the expansion is visible and slower */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        transition: background-color .30s ease, border-color .30s ease, box-shadow .30s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown > summary {
        cursor: pointer !important;
        user-select: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body {
        animation: none !important;
        display: block !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .52s cubic-bezier(.20, .82, .20, 1), opacity .35s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }
}

/* Payroll dropdown panel animation final fix: animate the actual panel height, not only the text */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] {
        overflow: hidden !important;
        will-change: height !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .62s cubic-bezier(.18, .84, .22, 1), opacity .35s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }
}

/* Payroll dropdown polished animation: responsive panel movement without laggy text-only reveal */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown > summary {
        cursor: pointer !important;
        user-select: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open],
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] {
        animation: none !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] .employee-payroll-breakdown-body {
        display: block !important;
        animation: none !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .28s cubic-bezier(.22, .80, .24, 1), opacity .18s ease !important;
        will-change: transform !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }
}


/* Payroll dropdown no-stutter animation override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        animation: none !important;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open],
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] {
        animation: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        clip-path: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) .employee-payroll-breakdown-body {
        display: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown > summary {
        cursor: pointer !important;
        user-select: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .28s cubic-bezier(.22, .86, .24, 1), opacity .18s ease !important;
        transform-origin: center center !important;
        will-change: transform !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="true"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }
}

/* Payroll dropdown smooth body-reveal animation: avoids panel height lock stutter */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        animation: none !important;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
        will-change: auto !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open],
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] {
        height: auto !important;
        max-height: none !important;
        animation: none !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] .employee-payroll-breakdown-body {
        display: block !important;
        animation: none !important;
        overflow: hidden !important;
        clip-path: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] .employee-payroll-breakdown-body {
        pointer-events: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .30s cubic-bezier(.20, .78, .20, 1), opacity .18s ease !important;
        transform-origin: center center !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="opening"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="closing"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(0deg) !important;
    }
}

/* Payroll dropdown final smooth-end animation override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        animation: none !important;
        transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
        will-change: auto !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open],
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] {
        height: auto !important;
        max-height: none !important;
        animation: none !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] .employee-payroll-breakdown-body {
        display: block !important;
        animation: none !important;
        clip-path: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .28s cubic-bezier(.22, .78, .25, 1), opacity .16s ease !important;
        transform-origin: center center !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="opening"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="closing"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(0deg) !important;
    }
}

/* Payroll dropdown contraction smooth-end fix: animate padding with max-height */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown {
        overflow: hidden !important;
        animation: none !important;
        transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        pointer-events: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="closing"] .employee-payroll-breakdown-body {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .28s cubic-bezier(.22, .74, .22, 1), opacity .16s ease !important;
        transform-origin: center center !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] > summary .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="opening"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="closing"] > summary .employee-payroll-breakdown-arrow {
        transform: rotate(0deg) !important;
    }
}

/* Payroll dropdown final smooth height animation: remove end lag/snap */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open],
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) {
        transition: border-radius .18s ease, box-shadow .18s ease !important;
        will-change: auto !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown .employee-payroll-breakdown-body {
        box-sizing: border-box !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-body {
        animation: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .22s cubic-bezier(.2, 0, .1, 1) !important;
        transform-origin: center !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open] .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }
}


/* Payroll dropdown close no-snap final override */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open],
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown:not([open]) {
        overflow: hidden !important;
        animation: none !important;
        transition: border-radius .16s ease, box-shadow .16s ease !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown .employee-payroll-breakdown-body {
        box-sizing: border-box !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating] .employee-payroll-breakdown-body {
        display: block !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-collapsed="true"] .employee-payroll-breakdown-body {
        display: none !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        transition: transform .22s cubic-bezier(.22, .72, .18, 1) !important;
        transform-origin: center !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[open]:not([data-payroll-collapsed="true"]) .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="opening"] .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }

    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-collapsed="true"] .employee-payroll-breakdown-arrow,
    .employee-payslip-page.is-preview-open details.employee-payroll-breakdown[data-payroll-animating="closing"] .employee-payroll-breakdown-arrow {
        transform: rotate(0deg) !important;
    }
}



/* Payroll dropdown final: Blazor class-based grid animation, no native details lag */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: hidden !important;
        border: 1px solid rgba(226, 232, 240, .42) !important;
        border-radius: 16px !important;
        box-shadow: none !important;
        animation: none !important;
        transition: border-radius .18s ease, box-shadow .18s ease !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown-income {
        background: #e8f3db !important;
        color: #47742c !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown-deduction {
        background: #f8dce8 !important;
        color: #c63870 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-summary {
        width: 100% !important;
        height: 60px !important;
        min-height: 60px !important;
        max-height: 60px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 .9rem !important;
        border: 0 !important;
        background: transparent !important;
        color: inherit !important;
        cursor: pointer !important;
        font: inherit !important;
        text-align: left !important;
        line-height: 1 !important;
        user-select: none !important;
        appearance: none !important;
        -webkit-appearance: none !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-summary span:first-child {
        font-size: .79rem !important;
        font-weight: 820 !important;
        line-height: 1 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-breakdown-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: .98rem !important;
        font-weight: 850 !important;
        line-height: 1 !important;
        transform-origin: center !important;
        transition: transform .24s cubic-bezier(.22, .72, .18, 1) !important;
        will-change: transform !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown.is-open .employee-payroll-breakdown-arrow {
        transform: rotate(180deg) !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown .employee-payroll-breakdown-content {
        display: grid !important;
        grid-template-rows: 0fr !important;
        overflow: hidden !important;
        opacity: .98 !important;
        transition: grid-template-rows .34s cubic-bezier(.22, .72, .18, 1), opacity .18s ease !important;
        will-change: grid-template-rows !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown.is-open .employee-payroll-breakdown-content {
        grid-template-rows: 1fr !important;
        opacity: 1 !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown .employee-payroll-breakdown-body {
        min-height: 0 !important;
        overflow: hidden !important;
        display: block !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        padding: 0 .95rem !important;
        background: rgba(255, 255, 255, .36) !important;
        border-top: 0 solid rgba(15, 23, 42, .055) !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        transition: padding .34s cubic-bezier(.22, .72, .18, 1), border-top-width .18s ease !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown.is-open .employee-payroll-breakdown-body {
        padding: .66rem .95rem .8rem !important;
        border-top-width: 1px !important;
    }

    .employee-payslip-page.is-preview-open section.employee-payroll-breakdown .employee-payroll-breakdown-row {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        gap: .7rem !important;
        padding: .32rem 0 !important;
        color: #0f172a !important;
    }
}


/* Payroll summary amount font weights: only Net Pay bold */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-stat-row .employee-payroll-stat-amount,
    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong.employee-payroll-stat-amount {
        font-weight: 400 !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-stat-row .employee-payroll-stat-amount-net,
    .employee-payslip-page.is-preview-open .employee-payroll-stat-row strong.employee-payroll-stat-amount-net {
        font-weight: 850 !important;
    }
}

/* Payroll mobile list: show latest six months with safe in-panel scrolling */
@media (max-width: 760px) {
    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list {
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px) - 8.6rem) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        padding-bottom: 4.6rem !important;
        overscroll-behavior: contain !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .employee-payslip-page:not(.is-preview-open) .employee-payslip-latest-list::-webkit-scrollbar {
        display: none !important;
    }
}

/* Payroll mobile menu/detail transition animations */
@media (max-width: 760px) {
    .employee-payslip-page.is-list-open .employee-payslip-heading {
        animation: payrollMenuHeadingIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-list-open .employee-payslip-latest-panel {
        animation: payrollMenuPanelIn .34s cubic-bezier(.20, .82, .20, 1) .04s both !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-list-open .employee-payroll-card {
        animation: payrollMenuCardIn .30s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-list-open .employee-payroll-card:nth-child(1) { animation-delay: .08s !important; }
    .employee-payslip-page.is-list-open .employee-payroll-card:nth-child(2) { animation-delay: .12s !important; }
    .employee-payslip-page.is-list-open .employee-payroll-card:nth-child(3) { animation-delay: .16s !important; }
    .employee-payslip-page.is-list-open .employee-payroll-card:nth-child(4) { animation-delay: .20s !important; }
    .employee-payslip-page.is-list-open .employee-payroll-card:nth-child(5) { animation-delay: .24s !important; }
    .employee-payslip-page.is-list-open .employee-payroll-card:nth-child(6) { animation-delay: .28s !important; }

    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-detail-heading {
        animation: payrollDetailHeaderIn .26s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-preview-panel {
        animation: payrollDetailPanelIn .34s cubic-bezier(.20, .82, .20, 1) .03s both !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-stat-row,
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) section.employee-payroll-breakdown,
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-preview-actions {
        animation: payrollDetailContentIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-stat-row:nth-child(1) { animation-delay: .10s !important; }
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-stat-row:nth-child(2) { animation-delay: .13s !important; }
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-stat-row:nth-child(3) { animation-delay: .16s !important; }
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-stat-row:nth-child(4) { animation-delay: .19s !important; }
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) section.employee-payroll-breakdown:nth-of-type(1) { animation-delay: .22s !important; }
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) section.employee-payroll-breakdown:nth-of-type(2) { animation-delay: .25s !important; }
    .employee-payslip-page.is-preview-open:not(.is-returning-to-list) .employee-payroll-preview-actions { animation-delay: .28s !important; }

    .employee-payslip-page.is-returning-to-list .employee-payroll-detail-heading {
        animation: payrollDetailHeaderOut .18s cubic-bezier(.42, 0, .58, 1) both !important;
        pointer-events: none !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-returning-to-list .employee-payroll-preview-panel {
        animation: payrollDetailPanelOut .19s cubic-bezier(.42, 0, .58, 1) both !important;
        pointer-events: none !important;
        will-change: opacity, transform !important;
    }

    .employee-payslip-page.is-returning-to-list .employee-payroll-back-button,
    .employee-payslip-page.is-returning-to-list .employee-payroll-breakdown-summary,
    .employee-payslip-page.is-returning-to-list .employee-payroll-download-button {
        pointer-events: none !important;
    }

    @keyframes payrollMenuHeadingIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes payrollMenuPanelIn {
        from { opacity: 0; transform: translateY(14px) scale(.992); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes payrollMenuCardIn {
        from { opacity: 0; transform: translateY(10px) scale(.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes payrollDetailHeaderIn {
        from { opacity: 0; transform: translateX(14px); }
        to { opacity: 1; transform: translateX(0); }
    }

    @keyframes payrollDetailPanelIn {
        from { opacity: 0; transform: translateX(22px) scale(.992); }
        to { opacity: 1; transform: translateX(0) scale(1); }
    }

    @keyframes payrollDetailContentIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes payrollDetailHeaderOut {
        from { opacity: 1; transform: translateX(0); }
        to { opacity: 0; transform: translateX(12px); }
    }

    @keyframes payrollDetailPanelOut {
        from { opacity: 1; transform: translateX(0) scale(1); }
        to { opacity: 0; transform: translateX(22px) scale(.992); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-payslip-page.is-list-open .employee-payslip-heading,
        .employee-payslip-page.is-list-open .employee-payslip-latest-panel,
        .employee-payslip-page.is-list-open .employee-payroll-card,
        .employee-payslip-page.is-preview-open .employee-payroll-detail-heading,
        .employee-payslip-page.is-preview-open .employee-payroll-preview-panel,
        .employee-payslip-page.is-preview-open .employee-payroll-stat-row,
        .employee-payslip-page.is-preview-open section.employee-payroll-breakdown,
        .employee-payslip-page.is-preview-open .employee-payroll-preview-actions {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}


/* Payroll detail header and download PDF icon final tuning */
@media (max-width: 760px) {
    .employee-payslip-page.is-preview-open .employee-payroll-detail-title-row {
        transform: translateY(.66rem) !important;
        will-change: transform !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-download-button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: .38rem !important;
        width: 176px !important;
        padding-left: .72rem !important;
        padding-right: .78rem !important;
        white-space: nowrap !important;
    }

    .employee-payslip-page.is-preview-open .employee-payroll-download-icon {
        width: .95rem !important;
        height: .95rem !important;
        flex: 0 0 .95rem !important;
        display: block !important;
    }
}


/* Employee Employment mobile redesign: use Payroll outer panel shell and simplified current-data cards. */
@media (max-width: 760px) {
    .employee-employment-redesign-page,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page {
        display: grid !important;
        gap: 0 !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        background: #f3f5f7 !important;
        overflow: hidden !important;
    }

    .employee-employment-redesign-page .employee-employment-heading,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-heading {
        min-height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: .72rem .95rem .72rem !important;
        border-radius: 0 !important;
        background: #f3f5f7 !important;
        box-shadow: none !important;
        color: #0f172a !important;
    }

    .employee-employment-redesign-page .employee-employment-heading h1,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-heading h1 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .employee-employment-redesign-page .employee-employment-heading p,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-heading p {
        display: block !important;
        max-width: 100% !important;
        margin: .24rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    .employee-employment-redesign-page .employee-employment-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-panel {
        width: 100% !important;
        max-width: none !important;
        min-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px) - 4.6rem) !important;
        display: grid !important;
        align-content: start !important;
        gap: .82rem !important;
        margin: .32rem 0 0 !important;
        padding: 1.05rem 1rem calc(var(--employee-mobile-tabbar-space, 86px) + 1rem) !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .75) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .employee-employment-redesign-page .employee-employment-panel::-webkit-scrollbar {
        display: none !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-card,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-hero-card {
        display: flex !important;
        align-items: center !important;
        gap: .78rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: .88rem .9rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-icon,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-hero-icon {
        width: 2.5rem !important;
        height: 2.5rem !important;
        flex-basis: 2.5rem !important;
        min-width: 2.5rem !important;
        background: linear-gradient(180deg, #159a8b 0%, #0f766e 100%) !important;
        box-shadow: 0 6px 14px rgba(15, 118, 110, .18) !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-icon::before {
        width: 1.22rem !important;
        height: 1.22rem !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-text {
        min-width: 0 !important;
        gap: .14rem !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-text span,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-hero-text span {
        color: #64748b !important;
        font-size: .62rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-text strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-hero-text strong {
        color: #0f172a !important;
        font-size: .94rem !important;
        font-weight: 850 !important;
        letter-spacing: -.01em !important;
        line-height: 1.16 !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-text small,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-hero-text small {
        color: #64748b !important;
        font-size: .72rem !important;
        font-weight: 650 !important;
        line-height: 1.16 !important;
    }

    .employee-employment-redesign-page .employee-employment-info-group,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-info-group {
        display: grid !important;
        gap: .54rem !important;
    }

    .employee-employment-redesign-page .employee-employment-info-heading h2,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-info-heading h2 {
        margin: 0 .1rem !important;
        color: #0f766e !important;
        font-size: .68rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-employment-redesign-page .employee-employment-data-list,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-data-list {
        display: grid !important;
        gap: .56rem !important;
    }

    .employee-employment-redesign-page .employee-employment-data-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-data-row {
        min-height: 52px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .76rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: .72rem .82rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .employee-employment-redesign-page .employee-employment-data-row span,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-data-row span {
        color: #64748b !important;
        font-size: .75rem !important;
        font-weight: 720 !important;
        line-height: 1.18 !important;
        text-align: left !important;
    }

    .employee-employment-redesign-page .employee-employment-data-row strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-data-row strong {
        max-width: 52% !important;
        color: #0f172a !important;
        font-size: .8rem !important;
        font-weight: 800 !important;
        line-height: 1.18 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-redesign-page .employee-employment-money-row strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-money-row strong {
        color: #0f766e !important;
        font-weight: 850 !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-employment-redesign-page .employee-employment-benefit-list,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-benefit-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .56rem !important;
    }

    .employee-employment-redesign-page .employee-employment-benefit-pill,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-benefit-pill {
        min-height: 48px !important;
        display: grid !important;
        place-items: center !important;
        margin: 0 !important;
        padding: .62rem .5rem !important;
        border: 1px solid rgba(15, 118, 110, .14) !important;
        border-radius: 16px !important;
        background: #ecfdf5 !important;
        box-shadow: none !important;
        color: #0f766e !important;
    }

    .employee-employment-redesign-page .employee-employment-benefit-pill span,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page .employee-employment-benefit-pill span {
        position: static !important;
        max-width: none !important;
        padding: 0 !important;
        background: transparent !important;
        color: #0f766e !important;
        font-size: .76rem !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-align: center !important;
        text-transform: none !important;
        overflow: visible !important;
        white-space: normal !important;
    }

    .employee-employment-redesign-page .employee-employment-heading {
        animation: employmentMenuHeadingIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-employment-redesign-page .employee-employment-panel {
        animation: employmentMenuPanelIn .34s cubic-bezier(.20, .82, .20, 1) .04s both !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-card,
    .employee-employment-redesign-page .employee-employment-info-group {
        animation: employmentMenuCardIn .30s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-employment-redesign-page .employee-employment-hero-card { animation-delay: .08s !important; }
    .employee-employment-redesign-page .employee-employment-info-group:nth-of-type(2) { animation-delay: .13s !important; }
    .employee-employment-redesign-page .employee-employment-info-group:nth-of-type(3) { animation-delay: .18s !important; }
    .employee-employment-redesign-page .employee-employment-info-group:nth-of-type(4) { animation-delay: .23s !important; }

    @keyframes employmentMenuHeadingIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @keyframes employmentMenuPanelIn {
        from { opacity: 0; transform: translateY(14px) scale(.992); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes employmentMenuCardIn {
        from { opacity: 0; transform: translateY(10px) scale(.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-employment-redesign-page .employee-employment-heading,
        .employee-employment-redesign-page .employee-employment-panel,
        .employee-employment-redesign-page .employee-employment-hero-card,
        .employee-employment-redesign-page .employee-employment-info-group {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Employee Employment Design 2: compact appointment overview, service timeline, and compensation snapshot. */
@media (max-width: 760px) {
    .employee-employment-design2-page .employee-employment-heading,
    .page:has(.employee-mobile-tabbar) .employee-employment-design2-page .employee-employment-heading {
        padding-bottom: .7rem !important;
    }

    .employee-employment-design2-page .employee-employment-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-design2-page .employee-employment-panel {
        gap: .86rem !important;
        padding-top: 1.02rem !important;
    }

    .employee-employment-d2-hero-card,
    .page:has(.employee-mobile-tabbar) .employee-employment-d2-hero-card {
        position: relative !important;
        display: grid !important;
        gap: .78rem !important;
        width: 100% !important;
        margin: 0 !important;
        padding: .92rem .92rem .86rem !important;
        border: 1px solid rgba(209, 226, 223, .98) !important;
        border-radius: 22px !important;
        background:
            radial-gradient(circle at 94% 0%, rgba(20, 184, 166, .18) 0, rgba(20, 184, 166, 0) 34%),
            linear-gradient(180deg, #ffffff 0%, #f8fffd 100%) !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .07) !important;
        overflow: hidden !important;
    }

    .employee-employment-d2-hero-card::after {
        content: "" !important;
        position: absolute !important;
        right: -1.45rem !important;
        bottom: -1.45rem !important;
        width: 5.6rem !important;
        height: 5.6rem !important;
        border-radius: 999px !important;
        background: rgba(15, 118, 110, .06) !important;
        pointer-events: none !important;
    }

    .employee-employment-d2-hero-top {
        position: relative !important;
        z-index: 1 !important;
        display: flex !important;
        align-items: center !important;
        gap: .78rem !important;
        min-width: 0 !important;
    }

    .employee-employment-d2-hero-icon {
        flex: 0 0 2.58rem !important;
        width: 2.58rem !important;
        height: 2.58rem !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 18px !important;
        background: linear-gradient(180deg, #14b8a6 0%, #0f766e 100%) !important;
        box-shadow: 0 10px 18px rgba(15, 118, 110, .22) !important;
    }

    .employee-employment-d2-hero-icon::before {
        content: "" !important;
        width: 1.28rem !important;
        height: 1.28rem !important;
        display: block !important;
        background: #ffffff !important;
        -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%206V5a2%202%200%200%201%202-2h0a2%202%200%200%201%202%202v1%27/%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M3%2012h18%27/%3E%3Cpath%20d%3D%27M9%2012v2%27/%3E%3Cpath%20d%3D%27M15%2012v2%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
        mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cg%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M10%206V5a2%202%200%200%201%202-2h0a2%202%200%200%201%202%202v1%27/%3E%3Crect%20x%3D%273%27%20y%3D%276%27%20width%3D%2718%27%20height%3D%2714%27%20rx%3D%272%27/%3E%3Cpath%20d%3D%27M3%2012h18%27/%3E%3Cpath%20d%3D%27M9%2012v2%27/%3E%3Cpath%20d%3D%27M15%2012v2%27/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
    }

    .employee-employment-d2-hero-text {
        display: grid !important;
        gap: .15rem !important;
        min-width: 0 !important;
    }

    .employee-employment-d2-kicker {
        color: #0f766e !important;
        font-size: .63rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.08 !important;
        text-transform: uppercase !important;
    }

    .employee-employment-d2-hero-text strong {
        color: #0f172a !important;
        font-size: .96rem !important;
        font-weight: 870 !important;
        letter-spacing: -.012em !important;
        line-height: 1.16 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-d2-hero-text small {
        color: #64748b !important;
        font-size: .73rem !important;
        font-weight: 650 !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-d2-chip-row {
        position: relative !important;
        z-index: 1 !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .55rem !important;
    }

    .employee-employment-d2-chip {
        min-height: 48px !important;
        display: grid !important;
        align-content: center !important;
        gap: .13rem !important;
        padding: .55rem .62rem !important;
        border: 1px solid rgba(15, 118, 110, .12) !important;
        border-radius: 16px !important;
        background: rgba(255, 255, 255, .82) !important;
    }

    .employee-employment-d2-chip span,
    .employee-employment-d2-timeline-item span,
    .employee-employment-d2-salary-card span,
    .employee-employment-d2-compensation-row span {
        color: #64748b !important;
        font-size: .68rem !important;
        font-weight: 720 !important;
        line-height: 1.1 !important;
    }

    .employee-employment-d2-chip strong {
        color: #0f766e !important;
        font-size: .82rem !important;
        font-weight: 850 !important;
        line-height: 1.1 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-d2-section,
    .page:has(.employee-mobile-tabbar) .employee-employment-d2-section {
        display: grid !important;
        gap: .54rem !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .employee-employment-d2-section-heading h2,
    .page:has(.employee-mobile-tabbar) .employee-employment-d2-section-heading h2 {
        margin: 0 .12rem !important;
        color: #0f766e !important;
        font-size: .68rem !important;
        font-weight: 870 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-employment-d2-timeline,
    .page:has(.employee-mobile-tabbar) .employee-employment-d2-timeline {
        position: relative !important;
        display: grid !important;
        gap: .5rem !important;
        padding: .72rem .78rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 20px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .employee-employment-d2-timeline::before {
        content: "" !important;
        position: absolute !important;
        left: 1.34rem !important;
        top: 1.42rem !important;
        bottom: 1.42rem !important;
        width: 2px !important;
        border-radius: 999px !important;
        background: #d7ebe8 !important;
    }

    .employee-employment-d2-timeline-item {
        position: relative !important;
        display: grid !important;
        grid-template-columns: 1.15rem minmax(0, 1fr) !important;
        align-items: center !important;
        gap: .56rem !important;
        min-height: 44px !important;
    }

    .employee-employment-d2-timeline-dot {
        position: relative !important;
        z-index: 1 !important;
        width: .72rem !important;
        height: .72rem !important;
        display: block !important;
        justify-self: center !important;
        border: 3px solid #ffffff !important;
        border-radius: 999px !important;
        background: #14b8a6 !important;
        box-shadow: 0 0 0 2px rgba(20, 184, 166, .22) !important;
    }

    .employee-employment-d2-timeline-item div {
        min-width: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .7rem !important;
        padding: .46rem .56rem !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
    }

    .employee-employment-d2-timeline-item strong {
        max-width: 58% !important;
        color: #0f172a !important;
        font-size: .78rem !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-d2-compensation-card,
    .page:has(.employee-mobile-tabbar) .employee-employment-d2-compensation-card {
        display: grid !important;
        gap: .58rem !important;
        padding: .72rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 22px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .employee-employment-d2-salary-card {
        display: grid !important;
        gap: .2rem !important;
        padding: .82rem .86rem !important;
        border-radius: 18px !important;
        background: linear-gradient(135deg, #0f766e 0%, #0d9488 100%) !important;
        box-shadow: 0 10px 20px rgba(15, 118, 110, .18) !important;
    }

    .employee-employment-d2-salary-card span {
        color: rgba(255, 255, 255, .76) !important;
        font-weight: 750 !important;
    }

    .employee-employment-d2-salary-card strong {
        color: #ffffff !important;
        font-size: 1.34rem !important;
        font-weight: 880 !important;
        letter-spacing: -.02em !important;
        line-height: 1.05 !important;
        font-variant-numeric: tabular-nums !important;
    }

    .employee-employment-d2-compensation-list {
        display: grid !important;
        gap: .42rem !important;
    }

    .employee-employment-d2-compensation-row {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .74rem !important;
        min-height: 40px !important;
        padding: .52rem .62rem !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
    }

    .employee-employment-d2-compensation-row strong {
        color: #0f172a !important;
        font-size: .78rem !important;
        font-weight: 820 !important;
        line-height: 1.1 !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-employment-d2-benefit-list,
    .page:has(.employee-mobile-tabbar) .employee-employment-d2-benefit-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .52rem !important;
    }

    .employee-employment-d2-benefit-pill {
        min-height: 46px !important;
        display: grid !important;
        place-items: center !important;
        padding: .56rem .46rem !important;
        border: 1px solid rgba(20, 184, 166, .14) !important;
        border-radius: 16px !important;
        background: #ecfdf5 !important;
        color: #0f766e !important;
    }

    .employee-employment-d2-benefit-pill span {
        color: #0f766e !important;
        font-size: .74rem !important;
        font-weight: 810 !important;
        line-height: 1.12 !important;
        text-align: center !important;
    }

    .employee-employment-design2-page .employee-employment-d2-hero-card,
    .employee-employment-design2-page .employee-employment-d2-section {
        animation: employmentDesign2CardIn .32s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-employment-design2-page .employee-employment-d2-hero-card { animation-delay: .07s !important; }
    .employee-employment-design2-page .employee-employment-d2-section:nth-of-type(2) { animation-delay: .12s !important; }
    .employee-employment-design2-page .employee-employment-d2-section:nth-of-type(3) { animation-delay: .17s !important; }
    .employee-employment-design2-page .employee-employment-d2-section:nth-of-type(4) { animation-delay: .22s !important; }

    @keyframes employmentDesign2CardIn {
        from { opacity: 0; transform: translateY(10px) scale(.986); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-employment-design2-page .employee-employment-d2-hero-card,
        .employee-employment-design2-page .employee-employment-d2-section {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Employee Employment Design 2 scroll fix: keep the Payroll-style outer shell locked while the white panel scrolls. */
@media (max-width: 760px) {
    .employee-employment-redesign-page.employee-employment-design2-page,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page.employee-employment-design2-page {
        height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        overflow: hidden !important;
    }

    .employee-employment-redesign-page.employee-employment-design2-page .employee-employment-heading,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page.employee-employment-design2-page .employee-employment-heading {
        grid-row: 1 !important;
        flex: 0 0 auto !important;
    }

    .employee-employment-redesign-page.employee-employment-design2-page .employee-employment-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-redesign-page.employee-employment-design2-page .employee-employment-panel {
        grid-row: 2 !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .employee-employment-redesign-page.employee-employment-design2-page .employee-employment-panel::-webkit-scrollbar {
        display: none !important;
    }
}

/* Employee Employment simple modern redesign: clean list-first layout using Payroll-style outer panel. */
@media (max-width: 760px) {
    .employee-employment-simple-page,
    .page:has(.employee-mobile-tabbar) .employee-employment-simple-page {
        height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 0 !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        background: #f3f5f7 !important;
        overflow: hidden !important;
    }

    .employee-employment-simple-page .employee-employment-heading,
    .page:has(.employee-mobile-tabbar) .employee-employment-simple-page .employee-employment-heading {
        grid-row: 1 !important;
        min-height: auto !important;
        display: block !important;
        margin: 0 !important;
        padding: .72rem .95rem .72rem !important;
        border-radius: 0 !important;
        background: #f3f5f7 !important;
        box-shadow: none !important;
    }

    .employee-employment-simple-page .employee-employment-heading h1,
    .page:has(.employee-mobile-tabbar) .employee-employment-simple-page .employee-employment-heading h1 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .employee-employment-simple-page .employee-employment-heading p,
    .page:has(.employee-mobile-tabbar) .employee-employment-simple-page .employee-employment-heading p {
        display: block !important;
        max-width: 100% !important;
        margin: .24rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
    }

    .employee-employment-simple-page .employee-employment-simple-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-simple-page .employee-employment-simple-panel {
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: grid !important;
        align-content: start !important;
        gap: .8rem !important;
        margin: .32rem 0 0 !important;
        padding: 1rem 1rem calc(var(--employee-mobile-tabbar-space, 86px) + 1rem) !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .75) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .employee-employment-simple-page .employee-employment-simple-panel::-webkit-scrollbar {
        display: none !important;
    }

    .employee-employment-simple-card,
    .employee-employment-simple-section {
        width: 100% !important;
        margin: 0 !important;
    }

    .employee-employment-current-card {
        display: grid !important;
        gap: .48rem !important;
        padding: .92rem .94rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 19px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .employee-employment-current-topline {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .7rem !important;
    }

    .employee-employment-current-topline > span {
        color: #64748b !important;
        font-size: .66rem !important;
        font-weight: 800 !important;
        letter-spacing: .08em !important;
        line-height: 1.1 !important;
        text-transform: uppercase !important;
    }

    .employee-employment-status-pill {
        max-width: 48% !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 1.55rem !important;
        padding: .22rem .58rem !important;
        border-radius: 999px !important;
        background: #f1f5f9 !important;
        color: #475569 !important;
        font-size: .68rem !important;
        font-weight: 780 !important;
        line-height: 1.05 !important;
        text-align: center !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .employee-employment-status-pill.is-active {
        background: #ecfdf5 !important;
        color: #0f766e !important;
    }

    .employee-employment-current-card h2 {
        margin: 0 !important;
        color: #0f172a !important;
        font-size: clamp(1rem, 4.6vw, 1.14rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.02em !important;
        line-height: 1.18 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-current-card p {
        margin: -.18rem 0 .1rem !important;
        color: #64748b !important;
        font-size: .76rem !important;
        font-weight: 650 !important;
        line-height: 1.24 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-mini-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .5rem !important;
    }

    .employee-employment-mini-stat {
        display: grid !important;
        gap: .1rem !important;
        padding: .56rem .62rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
    }

    .employee-employment-mini-stat span,
    .employee-employment-simple-row span,
    .employee-employment-salary-strip span {
        color: #64748b !important;
        font-size: .68rem !important;
        font-weight: 700 !important;
        line-height: 1.12 !important;
    }

    .employee-employment-mini-stat strong {
        color: #0f766e !important;
        font-size: .84rem !important;
        font-weight: 850 !important;
        line-height: 1.08 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-simple-section {
        display: grid !important;
        gap: .5rem !important;
    }

    .employee-employment-simple-section h3 {
        margin: 0 .1rem !important;
        color: #0f766e !important;
        font-size: .68rem !important;
        font-weight: 850 !important;
        letter-spacing: .08em !important;
        line-height: 1.12 !important;
        text-transform: uppercase !important;
    }

    .employee-employment-simple-list {
        display: grid !important;
        gap: .46rem !important;
    }

    .employee-employment-simple-row {
        min-width: 0 !important;
        min-height: 42px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .82rem !important;
        padding: .58rem .7rem !important;
        border: 1px solid rgba(226, 232, 240, .9) !important;
        border-radius: 14px !important;
        background: #ffffff !important;
    }

    .employee-employment-simple-row strong {
        max-width: 58% !important;
        color: #0f172a !important;
        font-size: .77rem !important;
        font-weight: 750 !important;
        line-height: 1.15 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-simple-pair {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .46rem !important;
    }

    .employee-employment-simple-pair .employee-employment-simple-row {
        min-height: 48px !important;
        display: grid !important;
        align-content: center !important;
        gap: .12rem !important;
    }

    .employee-employment-simple-pair .employee-employment-simple-row strong {
        max-width: 100% !important;
        text-align: left !important;
    }

    .employee-employment-salary-strip {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .8rem !important;
        padding: .78rem .82rem !important;
        border: 1px solid rgba(20, 184, 166, .18) !important;
        border-radius: 16px !important;
        background: #ecfdf5 !important;
    }

    .employee-employment-salary-strip strong {
        color: #0f766e !important;
        font-size: 1.08rem !important;
        font-weight: 880 !important;
        letter-spacing: -.02em !important;
        line-height: 1.05 !important;
        text-align: right !important;
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-employment-money-row strong {
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-employment-simple-chip-list {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .5rem !important;
    }

    .employee-employment-simple-chip {
        min-height: 42px !important;
        display: grid !important;
        place-items: center !important;
        padding: .5rem .52rem !important;
        border: 1px solid rgba(226, 232, 240, .9) !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        color: #0f172a !important;
        font-size: .74rem !important;
        font-weight: 760 !important;
        line-height: 1.12 !important;
        text-align: center !important;
    }

    .employee-employment-simple-page .employee-employment-current-card,
    .employee-employment-simple-page .employee-employment-simple-section {
        animation: employmentSimpleCardIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-employment-simple-page .employee-employment-current-card { animation-delay: .05s !important; }
    .employee-employment-simple-page .employee-employment-simple-section:nth-of-type(2) { animation-delay: .09s !important; }
    .employee-employment-simple-page .employee-employment-simple-section:nth-of-type(3) { animation-delay: .13s !important; }
    .employee-employment-simple-page .employee-employment-simple-section:nth-of-type(4) { animation-delay: .17s !important; }
    .employee-employment-simple-page .employee-employment-simple-section:nth-of-type(5) { animation-delay: .21s !important; }

    @keyframes employmentSimpleCardIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-employment-simple-page .employee-employment-current-card,
        .employee-employment-simple-page .employee-employment-simple-section {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Employee Employment simple modern refresh: simplified card layout with non-repetitive rows. */
@media (max-width: 760px) {
    .employee-employment-clean-page .employee-employment-clean-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-clean-panel {
        gap: .9rem !important;
        padding-top: 1.02rem !important;
    }

    .employee-employment-clean-page .employee-employment-card-section,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-section {
        display: grid !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: .28rem 0 0 !important;
        border: 1px solid rgba(226, 232, 240, .96) !important;
        border-radius: 18px !important;
        background: #ffffff !important;
        box-shadow: 0 6px 18px rgba(15, 23, 42, .04) !important;
        overflow: hidden !important;
    }

    .employee-employment-clean-page .employee-employment-card-section h3,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-section h3 {
        margin: 0 !important;
        padding: .95rem .98rem .72rem !important;
        color: #0f172a !important;
        font-size: 1rem !important;
        font-weight: 830 !important;
        letter-spacing: -.015em !important;
        line-height: 1.18 !important;
        text-transform: none !important;
    }

    .employee-employment-clean-page .employee-employment-card-list,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-list {
        display: block !important;
        margin: 0 !important;
        padding: 0 .98rem .38rem !important;
    }

    .employee-employment-clean-page .employee-employment-card-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row {
        min-width: 0 !important;
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .95rem !important;
        margin: 0 !important;
        padding: .82rem 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .employee-employment-clean-page .employee-employment-card-row:first-child,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row:first-child {
        border-top: 0 !important;
    }

    .employee-employment-clean-page .employee-employment-card-row span,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row span {
        flex: 0 0 42% !important;
        color: #64748b !important;
        font-size: .79rem !important;
        font-weight: 650 !important;
        line-height: 1.28 !important;
    }

    .employee-employment-clean-page .employee-employment-card-row > strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row > strong {
        flex: 1 1 auto !important;
        max-width: 58% !important;
        color: #0f172a !important;
        font-size: .82rem !important;
        font-weight: 760 !important;
        line-height: 1.28 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
        margin: 0 !important;
    }

    .employee-employment-clean-page .employee-employment-card-row-status > strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row-status > strong {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }

    .employee-employment-clean-page .employee-employment-value-pill,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-value-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 1.75rem !important;
        padding: .18rem .68rem !important;
        border-radius: 999px !important;
        background: #ecfdf5 !important;
        color: #0f766e !important;
        font-size: .8rem !important;
        font-weight: 780 !important;
        line-height: 1.1 !important;
        white-space: nowrap !important;
    }

    .employee-employment-clean-page .employee-employment-money-row > strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-money-row > strong {
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-employment-clean-page .employee-employment-benefit-row > strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-benefit-row > strong {
        color: #0f172a !important;
        font-weight: 720 !important;
    }

    .employee-employment-clean-page .employee-employment-card-section {
        animation: employmentCleanCardIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-employment-clean-page .employee-employment-card-section:nth-of-type(1) { animation-delay: .05s !important; }
    .employee-employment-clean-page .employee-employment-card-section:nth-of-type(2) { animation-delay: .1s !important; }
    .employee-employment-clean-page .employee-employment-card-section:nth-of-type(3) { animation-delay: .15s !important; }

    @keyframes employmentCleanCardIn {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-employment-clean-page .employee-employment-card-section {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}


/* Employee Employment parenthetical none tweak: keep Payroll-style outer panel, use compact menu-sized text. */
@media (max-width: 760px) {
    .employee-employment-clean-page .employee-employment-clean-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-clean-panel {
        gap: .74rem !important;
        padding-top: .92rem !important;
    }

    .employee-employment-clean-page .employee-employment-card-section h3,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-section h3 {
        padding: .82rem .92rem .58rem !important;
        font-size: .9rem !important;
        font-weight: 820 !important;
        letter-spacing: -.01em !important;
    }

    .employee-employment-clean-page .employee-employment-card-list,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-list {
        padding: 0 .92rem .3rem !important;
    }

    .employee-employment-clean-page .employee-employment-card-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row {
        gap: .78rem !important;
        padding: .68rem 0 !important;
    }

    .employee-employment-clean-page .employee-employment-card-row span,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row span {
        flex-basis: 43% !important;
        font-size: .72rem !important;
        font-weight: 640 !important;
        line-height: 1.25 !important;
    }

    .employee-employment-clean-page .employee-employment-card-row > strong,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-card-row > strong {
        max-width: 57% !important;
        font-size: .74rem !important;
        font-weight: 720 !important;
        line-height: 1.25 !important;
    }

    .employee-employment-clean-page .employee-employment-value-pill,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-value-pill {
        min-height: 1.45rem !important;
        padding: .14rem .56rem !important;
        font-size: .72rem !important;
        font-weight: 760 !important;
    }

    .employee-employment-clean-page .employee-employment-none-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-none-value {
        color: #94a3b8 !important;
        font-weight: 620 !important;
    }

    .employee-employment-clean-page .employee-employment-none-value em,
    .page:has(.employee-mobile-tabbar) .employee-employment-clean-page .employee-employment-none-value em {
        font-style: italic !important;
    }
}

/* Employee Employment flatten categories into the Payroll-style outer panel; remove inner panels and reduce bold styling. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-panel {
        gap: 0 !important;
        padding-top: .88rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-section,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-section {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: visible !important;
    }

    .employee-employment-flat-page .employee-employment-flat-section + .employee-employment-flat-section,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-section + .employee-employment-flat-section {
        margin-top: 1.1rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-section h3,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-section h3 {
        margin: 0 0 .38rem !important;
        padding: 0 !important;
        color: #0f172a !important;
        font-size: .96rem !important;
        font-weight: 680 !important;
        letter-spacing: -.01em !important;
        line-height: 1.2 !important;
        text-transform: none !important;
    }

    .employee-employment-flat-page .employee-employment-flat-list,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-list {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row {
        display: grid !important;
        grid-template-columns: minmax(0, 41%) minmax(0, 59%) !important;
        align-items: start !important;
        gap: .85rem !important;
        margin: 0 !important;
        padding: .72rem 0 !important;
        border: 0 !important;
        border-top: 1px solid rgba(226, 232, 240, .95) !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row:first-child,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row:first-child {
        border-top: 0 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-label {
        min-width: 0 !important;
        color: #64748b !important;
        font-size: .74rem !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-value {
        min-width: 0 !important;
        color: #0f172a !important;
        font-size: .75rem !important;
        font-weight: 650 !important;
        line-height: 1.32 !important;
        text-align: right !important;
        overflow-wrap: anywhere !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value {
        display: flex !important;
        justify-content: flex-end !important;
    }

    .employee-employment-flat-page .employee-employment-value-pill,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-value-pill {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 1.5rem !important;
        padding: .12rem .56rem !important;
        border-radius: 999px !important;
        background: #ecfdf5 !important;
        color: #0f766e !important;
        font-size: .72rem !important;
        font-weight: 650 !important;
        line-height: 1.08 !important;
        white-space: nowrap !important;
    }

    .employee-employment-flat-page .employee-employment-none-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-none-value {
        color: #94a3b8 !important;
        font-weight: 560 !important;
    }

    .employee-employment-flat-page .employee-employment-none-value em,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-none-value em {
        font-style: italic !important;
    }

    .employee-employment-flat-page .employee-employment-money-row .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-money-row .employee-employment-flat-value {
        font-variant-numeric: tabular-nums !important;
        white-space: nowrap !important;
    }

    .employee-employment-flat-page .employee-employment-flat-section {
        animation: employmentFlatSectionIn .24s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-employment-flat-page .employee-employment-flat-section:nth-of-type(1) { animation-delay: .04s !important; }
    .employee-employment-flat-page .employee-employment-flat-section:nth-of-type(2) { animation-delay: .08s !important; }
    .employee-employment-flat-page .employee-employment-flat-section:nth-of-type(3) { animation-delay: .12s !important; }

    @keyframes employmentFlatSectionIn {
        from { opacity: 0; transform: translateY(6px); }
        to { opacity: 1; transform: translateY(0); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-employment-flat-page .employee-employment-flat-section {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Employee Employment single-line enforcement for long values and labels requested by user. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: minmax(0, 36%) minmax(0, 64%) !important;
        gap: .7rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        font-size: .69rem !important;
        line-height: 1.18 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single {
        grid-template-columns: minmax(0, 47%) minmax(0, 53%) !important;
        gap: .7rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label {
        white-space: nowrap !important;
        font-size: .69rem !important;
        line-height: 1.2 !important;
    }
}


/* Employee Employment alignment cleanup: center row content inside the outer panel and make status text plain. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-panel {
        padding-left: 1.24rem !important;
        padding-right: 1.24rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row {
        gap: .7rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: minmax(0, 38%) minmax(0, 62%) !important;
        gap: .62rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single {
        grid-template-columns: minmax(0, 48%) minmax(0, 52%) !important;
        gap: .62rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value {
        display: block !important;
        color: #0f172a !important;
        font-size: .75rem !important;
        font-weight: 650 !important;
        line-height: 1.32 !important;
        text-align: right !important;
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
    }

    .employee-employment-flat-page .employee-employment-value-pill,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-value-pill {
        min-height: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
}

/* Employee Employment full long-text rows: keep requested fields on one full line without ellipsis. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-panel {
        padding-left: 1.34rem !important;
        padding-right: 1.34rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row {
        gap: .64rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: minmax(0, 34%) minmax(0, 66%) !important;
        gap: .54rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label {
        white-space: nowrap !important;
        font-size: .62rem !important;
        line-height: 1.18 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value {
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        font-size: .55rem !important;
        font-weight: 600 !important;
        letter-spacing: -.015em !important;
        line-height: 1.18 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single {
        grid-template-columns: minmax(0, 52%) minmax(0, 48%) !important;
        gap: .54rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label {
        white-space: nowrap !important;
        font-size: .62rem !important;
        line-height: 1.18 !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value {
        color: #0f172a !important;
        background: transparent !important;
        font-weight: 600 !important;
    }
}

/* Employee Employment standard font pass: keep all rows readable with one consistent mobile font size and no ellipsis. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-panel,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-panel {
        padding-left: 1.28rem !important;
        padding-right: 1.28rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row,
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single {
        grid-template-columns: minmax(0, 43%) minmax(0, 57%) !important;
        gap: .72rem !important;
    }

    .employee-employment-flat-page .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-label,
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label {
        color: #64748b !important;
        font-size: .74rem !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .employee-employment-flat-page .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-value,
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-value,
    .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row-status .employee-employment-flat-value {
        color: #0f172a !important;
        font-size: .75rem !important;
        font-weight: 650 !important;
        letter-spacing: 0 !important;
        line-height: 1.32 !important;
        text-align: right !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        background: transparent !important;
    }

    .employee-employment-flat-page .employee-employment-value-pill,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-value-pill {
        background: transparent !important;
        padding: 0 !important;
        border-radius: 0 !important;
        color: inherit !important;
        font-size: inherit !important;
        font-weight: inherit !important;
        line-height: inherit !important;
    }
}

/* Employee Employment: keep the two long date/service labels readable at the standard size. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single {
        grid-template-columns: minmax(0, 53%) minmax(0, 47%) !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-label-single .employee-employment-flat-label {
        font-size: .74rem !important;
        white-space: nowrap !important;
    }
}

/* Employee Employment: long text values use one standard-size full line inside the outer panel. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: .22rem !important;
        align-items: start !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label {
        width: 100% !important;
        min-width: 0 !important;
        font-size: .74rem !important;
        font-weight: 600 !important;
        line-height: 1.28 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        font-size: .75rem !important;
        font-weight: 650 !important;
        letter-spacing: 0 !important;
        line-height: 1.28 !important;
        text-align: right !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

/* Employee Employment: keep long text rows on one horizontal line without ellipsis or custom font shrinking. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: minmax(0, 34%) minmax(0, 66%) !important;
        align-items: center !important;
        gap: .72rem !important;
        min-height: 2.75rem !important;
        overflow: visible !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label {
        width: auto !important;
        font-size: .74rem !important;
        font-weight: 600 !important;
        line-height: 1.28 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value {
        width: auto !important;
        max-width: none !important;
        font-size: .75rem !important;
        font-weight: 650 !important;
        line-height: 1.28 !important;
        text-align: left !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
    }
}

/* Employee Employment: use available row width for long text fields without overflowing the panel. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: center !important;
        gap: .48rem !important;
        min-height: 2.45rem !important;
        overflow: hidden !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label {
        width: auto !important;
        max-width: none !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        text-align: left !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

/* Employee Employment: restore proper right alignment for long values while keeping them inside the row. */
@media (max-width: 760px) {
    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        align-items: start !important;
        gap: .55rem !important;
        min-height: 2.45rem !important;
        overflow: visible !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-label {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: left !important;
    }

    .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value,
    .page:has(.employee-mobile-tabbar) .employee-employment-flat-page .employee-employment-flat-row.row-force-value-single .employee-employment-flat-value {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        justify-self: stretch !important;
        text-align: right !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        overflow-wrap: anywhere !important;
        word-break: normal !important;
    }
}

/* Employee Service Record mobile list: copy Payroll list outer-panel and card design. */
@media (max-width: 760px) {
    .employee-service-record-list-page,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page {
        height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 0 !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        background: #f3f5f7 !important;
        overflow: hidden !important;
    }

    .employee-service-record-list-page .employee-service-record-heading,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-heading {
        grid-row: 1 !important;
        min-height: auto !important;
        display: block !important;
        align-content: initial !important;
        margin: 0 !important;
        padding: .72rem .95rem .72rem !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f3f5f7 !important;
        box-shadow: none !important;
        color: #0f172a !important;
    }

    .employee-service-record-list-page .employee-service-record-heading h1,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-heading h1 {
        display: block !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .employee-service-record-list-page .employee-service-record-heading .employee-service-record-helper,
    .employee-service-record-list-page .employee-service-record-heading p,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-heading .employee-service-record-helper,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-heading p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        max-width: 100% !important;
        margin: .24rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .employee-service-record-list-page .employee-service-record-latest-panel,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-latest-panel {
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: block !important;
        margin: .32rem 0 0 !important;
        padding: 1.05rem 1rem calc(var(--employee-mobile-tabbar-space, 86px) + 1.1rem) !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .75) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .employee-service-record-list-page .employee-service-record-latest-panel::-webkit-scrollbar,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-latest-panel::-webkit-scrollbar {
        display: none !important;
    }

    .employee-service-record-list-page .employee-service-record-table-wrap,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-table-wrap {
        display: none !important;
    }

    .employee-service-record-list-page .employee-service-record-latest-list,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-latest-list {
        width: 100% !important;
        display: grid !important;
        gap: .82rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .employee-service-record-list-page .employee-service-record-list-card,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-list-card {
        position: relative !important;
        width: 100% !important;
        min-height: 86px !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: .65rem !important;
        padding: .82rem .82rem .78rem !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
        text-align: left !important;
        font-family: var(--employee-mobile-font, "Nunito Sans", "Segoe UI", Arial, sans-serif) !important;
        appearance: none !important;
        -webkit-appearance: none !important;
        cursor: pointer !important;
        transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease !important;
    }

    .employee-service-record-list-page .employee-service-record-list-card:active,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-list-card:active {
        transform: scale(.985) !important;
    }

    .employee-service-record-list-page .employee-service-record-card-main,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-card-main {
        min-width: 0 !important;
        display: grid !important;
        gap: 0 !important;
    }

    .employee-service-record-list-page .employee-service-record-card-main strong,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-card-main strong {
        margin: 0 0 .24rem 0 !important;
        color: #0f172a !important;
        font-size: .86rem !important;
        font-weight: 820 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .employee-service-record-list-page .employee-service-record-card-main span,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-card-main span {
        margin: 0 !important;
        color: #64748b !important;
        font-size: .66rem !important;
        font-weight: 700 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .employee-service-record-list-page .employee-service-record-card-main em,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-card-main em {
        margin-top: .2rem !important;
        color: #0f766e !important;
        font-size: .92rem !important;
        font-style: normal !important;
        font-weight: 780 !important;
        line-height: 1.08 !important;
        letter-spacing: -.005em !important;
        overflow-wrap: anywhere !important;
    }

    .employee-service-record-list-page .employee-service-record-card-arrow,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .employee-service-record-card-arrow {
        width: 2.5rem !important;
        height: 2.5rem !important;
        min-width: 2.5rem !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(15, 118, 110, .24) !important;
        border-radius: 999px !important;
        background: linear-gradient(180deg, #159a8b 0%, #0f766e 100%) !important;
        box-shadow: 0 6px 14px rgba(15, 118, 110, .18) !important;
        color: #ffffff !important;
        font-size: 1.28rem !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
        text-shadow: 0 1px 1px rgba(0, 0, 0, .12) !important;
        padding-left: 1px !important;
        transform: none !important;
    }

    .employee-service-record-list-page .empty-workflow-state,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page .empty-workflow-state {
        min-height: 180px !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-service-record-list-page .employee-service-record-list-card {
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Employee Service Record: copy Payroll outer panel behavior and opening animations. */
@media (max-width: 760px) {
    .employee-service-record-list-page.is-list-open,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page.is-list-open {
        height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        background: #f3f5f7 !important;
        overflow: hidden !important;
    }

    .employee-service-record-list-page.is-list-open .employee-service-record-heading,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page.is-list-open .employee-service-record-heading {
        grid-row: 1 !important;
        margin: 0 !important;
        padding: .72rem .95rem .72rem !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f3f5f7 !important;
        box-shadow: none !important;
        animation: payrollMenuHeadingIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-service-record-list-page.is-list-open .employee-service-record-latest-panel,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page.is-list-open .employee-service-record-latest-panel {
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        margin: .32rem 0 0 !important;
        padding: 1.05rem 1rem calc(var(--employee-mobile-tabbar-space, 86px) + 1.1rem) !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .75) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        animation: payrollMenuPanelIn .34s cubic-bezier(.20, .82, .20, 1) .04s both !important;
        will-change: opacity, transform !important;
    }

    .employee-service-record-list-page.is-list-open .employee-service-record-latest-panel::-webkit-scrollbar,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page.is-list-open .employee-service-record-latest-panel::-webkit-scrollbar {
        display: none !important;
    }

    .employee-service-record-list-page.is-list-open .employee-service-record-list-card,
    .page:has(.employee-mobile-tabbar) .employee-service-record-list-page.is-list-open .employee-service-record-list-card {
        animation: payrollMenuCardIn .30s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(1) { animation-delay: .08s !important; }
    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(2) { animation-delay: .12s !important; }
    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(3) { animation-delay: .16s !important; }
    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(4) { animation-delay: .20s !important; }
    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(5) { animation-delay: .24s !important; }
    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(6) { animation-delay: .28s !important; }
    .employee-service-record-list-page.is-list-open .employee-service-record-list-card:nth-child(n+7) { animation-delay: .30s !important; }

    @media (prefers-reduced-motion: reduce) {
        .employee-service-record-list-page.is-list-open .employee-service-record-heading,
        .employee-service-record-list-page.is-list-open .employee-service-record-latest-panel,
        .employee-service-record-list-page.is-list-open .employee-service-record-list-card {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Employee Leave menu: Payroll-style outer panel, uniform formatting, and opening animations. */
@media (max-width: 760px) {
    .employee-leave-ledger-page,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page {
        height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        min-height: 0 !important;
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px)) !important;
        display: grid !important;
        grid-template-rows: auto minmax(0, 1fr) !important;
        gap: 0 !important;
        margin: -.82rem -.9rem -1rem !important;
        padding: 0 !important;
        background: #f3f5f7 !important;
        overflow: hidden !important;
    }

    .employee-leave-ledger-page .employee-leave-heading,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-heading {
        grid-row: 1 !important;
        min-height: auto !important;
        display: block !important;
        align-content: initial !important;
        margin: 0 !important;
        padding: .72rem .95rem .72rem !important;
        overflow: visible !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: #f3f5f7 !important;
        box-shadow: none !important;
        color: #0f172a !important;
        animation: payrollMenuHeadingIn .28s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-leave-ledger-page .employee-leave-heading h1,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-heading h1 {
        display: block !important;
        margin: 0 !important;
        color: #0f172a !important;
        font-size: clamp(1.22rem, 5.4vw, 1.45rem) !important;
        font-weight: 850 !important;
        letter-spacing: -.015em !important;
        line-height: 1.12 !important;
    }

    .employee-leave-ledger-page .employee-leave-heading .employee-leave-helper,
    .employee-leave-ledger-page .employee-leave-heading p,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-heading .employee-leave-helper,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-heading p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        max-width: 100% !important;
        margin: .24rem 0 0 !important;
        color: #64748b !important;
        font-size: .78rem !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .employee-leave-ledger-page .employee-leave-latest-panel,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-latest-panel {
        grid-row: 2 !important;
        width: 100% !important;
        max-width: none !important;
        height: 100% !important;
        min-height: 0 !important;
        max-height: 100% !important;
        display: grid !important;
        align-content: start !important;
        gap: .95rem !important;
        margin: .32rem 0 0 !important;
        padding: 1.05rem 1rem calc(var(--employee-mobile-tabbar-space, 86px) + 1.1rem) !important;
        border: 0 !important;
        border-radius: 30px 30px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -1px 0 rgba(226, 232, 240, .75) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior-y: contain !important;
        touch-action: pan-y !important;
        scrollbar-width: none !important;
        -webkit-overflow-scrolling: touch !important;
        animation: payrollMenuPanelIn .34s cubic-bezier(.20, .82, .20, 1) .04s both !important;
        will-change: opacity, transform !important;
    }

    .employee-leave-ledger-page .employee-leave-latest-panel::-webkit-scrollbar,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-latest-panel::-webkit-scrollbar {
        display: none !important;
    }

    .employee-leave-ledger-page .employee-leave-balance-group,
    .employee-leave-ledger-page .employee-approved-leave-group,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-leave-balance-group,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-approved-leave-group {
        width: 100% !important;
        display: grid !important;
        gap: .66rem !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        animation: payrollMenuCardIn .30s cubic-bezier(.22, .78, .20, 1) both !important;
        will-change: opacity, transform !important;
    }

    .employee-leave-ledger-page .employee-leave-balance-group { animation-delay: .08s !important; }
    .employee-leave-ledger-page .employee-approved-leave-group { animation-delay: .14s !important; }

    .employee-leave-ledger-page .employee-attendance-leave-heading,
    .employee-leave-ledger-page .employee-approved-leave-heading,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-heading,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-approved-leave-heading {
        min-height: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: .8rem !important;
        margin: 0 !important;
        padding: 0 .06rem !important;
        border: 0 !important;
        background: transparent !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-heading span,
    .employee-leave-ledger-page .employee-approved-leave-heading span,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-heading span,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-approved-leave-heading span {
        color: #0f172a !important;
        font-size: .92rem !important;
        font-weight: 780 !important;
        letter-spacing: -.01em !important;
        line-height: 1.15 !important;
        text-transform: none !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-heading small,
    .employee-leave-ledger-page .employee-approved-leave-heading small,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-heading small,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-approved-leave-heading small {
        color: #64748b !important;
        font-size: .68rem !important;
        font-weight: 650 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
        text-transform: none !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-primary,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-primary {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: .72rem !important;
        margin: 0 !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-secondary,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-secondary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: .56rem !important;
        margin: 0 !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-primary article,
    .employee-leave-ledger-page .employee-attendance-leave-secondary article,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-primary article,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-secondary article {
        position: relative !important;
        min-height: 64px !important;
        display: grid !important;
        align-content: center !important;
        gap: .22rem !important;
        padding: .62rem .58rem .58rem .94rem !important;
        overflow: hidden !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-primary article::before,
    .employee-leave-ledger-page .employee-attendance-leave-secondary article::before,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-primary article::before,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-secondary article::before {
        inset: .48rem auto .48rem .42rem !important;
        width: 3px !important;
        border-radius: 999px !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-primary span,
    .employee-leave-ledger-page .employee-attendance-leave-secondary span,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-primary span,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-secondary span {
        color: #64748b !important;
        font-size: .66rem !important;
        font-weight: 650 !important;
        line-height: 1.1 !important;
        letter-spacing: 0 !important;
        text-transform: none !important;
    }

    .employee-leave-ledger-page .employee-attendance-leave-primary strong,
    .employee-leave-ledger-page .employee-attendance-leave-secondary strong,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-primary strong,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-attendance-leave-secondary strong {
        color: #0f172a !important;
        font-size: .96rem !important;
        font-weight: 780 !important;
        letter-spacing: -.01em !important;
        line-height: 1.05 !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-list,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-list {
        display: grid !important;
        gap: .72rem !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-card,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-card {
        position: relative !important;
        min-height: 76px !important;
        display: grid !important;
        align-items: center !important;
        gap: .2rem !important;
        padding: .78rem .82rem .74rem 1rem !important;
        overflow: hidden !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
        animation: payrollMenuCardIn .30s cubic-bezier(.22, .78, .20, 1) both !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-card:nth-child(1) { animation-delay: .20s !important; }
    .employee-leave-ledger-page .employee-filed-leave-card:nth-child(2) { animation-delay: .24s !important; }
    .employee-leave-ledger-page .employee-filed-leave-card:nth-child(3) { animation-delay: .28s !important; }
    .employee-leave-ledger-page .employee-filed-leave-card:nth-child(4) { animation-delay: .32s !important; }
    .employee-leave-ledger-page .employee-filed-leave-card:nth-child(n+5) { animation-delay: .34s !important; }

    .employee-leave-ledger-page .employee-filed-leave-card::before,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-card::before {
        inset: .52rem auto .52rem .42rem !important;
        width: 3px !important;
        border-radius: 999px !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-card > div,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-card > div {
        min-width: 0 !important;
        display: grid !important;
        gap: .18rem !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-card strong,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-card strong {
        color: #0f172a !important;
        font-size: .86rem !important;
        font-weight: 780 !important;
        line-height: 1.15 !important;
        letter-spacing: 0 !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-card span,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-card span {
        color: #64748b !important;
        font-size: .68rem !important;
        font-weight: 650 !important;
        line-height: 1.12 !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-card em,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-card em {
        color: #0f766e !important;
        font-size: .88rem !important;
        font-style: normal !important;
        font-weight: 780 !important;
        line-height: 1.1 !important;
    }

    .employee-leave-ledger-page .employee-filed-leave-empty,
    .page:has(.employee-mobile-tabbar) .employee-leave-ledger-page .employee-filed-leave-empty {
        min-height: 160px !important;
        border: 1px solid rgba(226, 232, 240, .92) !important;
        border-radius: 16px !important;
        background: #ffffff !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
        animation: payrollMenuCardIn .30s cubic-bezier(.22, .78, .20, 1) .18s both !important;
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-leave-ledger-page .employee-leave-heading,
        .employee-leave-ledger-page .employee-leave-latest-panel,
        .employee-leave-ledger-page .employee-leave-balance-group,
        .employee-leave-ledger-page .employee-approved-leave-group,
        .employee-leave-ledger-page .employee-filed-leave-card,
        .employee-leave-ledger-page .employee-filed-leave-empty {
            animation: none !important;
            transition: none !important;
            transform: none !important;
        }
    }
}

/* Dashboard polish: theme-based greeting panel and updated quick links. */
@media (max-width: 760px) {
    .employee-mobile-hero-card {
        background: linear-gradient(135deg, var(--employee-mobile-primary-strong, #0b6b64) 0%, var(--employee-mobile-primary, #0f766e) 62%, #19a596 100%) !important;
        box-shadow: 0 16px 28px rgba(15, 118, 110, .18) !important;
    }

    .employee-mobile-hero-card::after {
        background:
            radial-gradient(circle at 84% 18%, rgba(255, 255, 255, .16), transparent 28%),
            radial-gradient(circle at 18% 100%, rgba(255, 255, 255, .10), transparent 34%),
            linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, 0));
    }

    .employee-mobile-glance-grid {
        gap: .52rem !important;
    }

    .employee-mobile-glance-card,
    .employee-mobile-glance-card:is(button) {
        appearance: none !important;
        width: 100% !important;
        margin: 0 !important;
        cursor: pointer !important;
        font: inherit !important;
    }

    .employee-mobile-glance-card {
        gap: .38rem !important;
        padding: .54rem .28rem !important;
        border-radius: 15px !important;
        transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
    }

    .employee-mobile-glance-card:active {
        transform: translateY(1px) scale(.992);
    }

    .employee-mobile-glance-card.is-service-record {
        --glance-accent: #0f766e;
    }

    .employee-mobile-glance-card.is-employment {
        --glance-accent: #2563eb;
    }

    .employee-mobile-glance-card.is-payroll {
        --glance-accent: #ca8a04;
    }

    .employee-mobile-glance-card.is-file-leave {
        --glance-accent: #7c3aed;
    }

    .employee-mobile-glance-icon.icon-service-record {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5M9 13h6M9 17h6M9 9h2'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-icon.icon-employment {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='7' width='20' height='14' rx='2'/%3E%3Cpath d='M16 21V5a2 2 0 0 0-2-2H10a2 2 0 0 0-2 2v16M2 13h20'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-icon.icon-payroll {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M7 15h.01M11 15h2'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-icon.icon-file-leave {
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7z'/%3E%3Cpath d='M14 2v5h5M12 18v-6M9 15h6'/%3E%3C/svg%3E");
    }

    .employee-mobile-glance-card strong {
        max-width: 100% !important;
        font-size: .66rem !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        text-wrap: balance;
    }

    .employee-dashboard-dialog {
        position: fixed;
        inset: 0;
        z-index: 160;
        display: grid;
        place-items: center;
        padding: 1rem;
    }

    .employee-dashboard-dialog-backdrop {
        position: absolute;
        inset: 0;
        border: 0;
        background: rgba(15, 23, 42, .42);
    }

    .employee-dashboard-dialog-panel {
        position: relative;
        z-index: 1;
        width: min(100%, 290px);
        padding: 1rem 1rem .95rem;
        border: 1px solid rgba(226, 232, 240, .98);
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 22px 60px rgba(15, 23, 42, .2);
        text-align: center;
        animation: employeeDashboardDialogIn .18s ease both;
    }

    .employee-dashboard-dialog-panel h2 {
        margin: 0 0 .38rem;
        color: #0f172a;
        font-size: 1rem;
        font-weight: 760;
        line-height: 1.2;
    }

    .employee-dashboard-dialog-panel p {
        margin: 0 0 .88rem;
        color: #64748b;
        font-size: .86rem;
        line-height: 1.38;
    }

    .employee-dashboard-dialog-panel .btn {
        min-width: 96px;
        border-radius: 999px;
    }

    @keyframes employeeDashboardDialogIn {
        from { opacity: 0; transform: translateY(8px) scale(.985); }
        to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @media (prefers-reduced-motion: reduce) {
        .employee-dashboard-dialog-panel,
        .employee-mobile-glance-card {
            animation: none !important;
            transition: none !important;
        }
    }
}

/* Dashboard quick links refinement: label, request icons for SR/Employment, and cleaner section headings. */
@media (max-width: 760px) {
    .employee-mobile-quick-links-heading {
        margin: -.02rem 0 -.48rem !important;
        padding-inline: .05rem !important;
    }

    .employee-mobile-quick-links-heading h2 {
        margin: 0 !important;
        color: #1e293b !important;
        font-size: .98rem !important;
        font-weight: 720 !important;
        letter-spacing: 0 !important;
        line-height: 1.12 !important;
    }

    .employee-mobile-announcement-heading,
    .employee-mobile-requests-title {
        gap: 0 !important;
    }

    .employee-mobile-announcement-heading .employee-mobile-section-icon,
    .employee-mobile-requests-title .employee-mobile-section-icon {
        display: none !important;
    }
}

/* Dashboard request status cleanup: remove helper/new action spacing. */
@media (max-width: 760px) {
    .employee-mobile-requests-card .employee-mobile-requests-heading {
        justify-content: flex-start !important;
        margin-bottom: .1rem !important;
    }

    .employee-mobile-requests-card .employee-mobile-requests-title {
        gap: 0 !important;
    }
}

/* Mobile dashboard entrance animation: plays after login and whenever Dashboard is opened from another menu. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-mobile-home {
        animation: employeeDashboardScreenIn .26s cubic-bezier(.2, .8, .2, 1) both;
        will-change: opacity, transform;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-hero-card {
        animation: employeeDashboardHeroIn .42s cubic-bezier(.18, .9, .2, 1) both;
        will-change: opacity, transform;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-quick-links-heading {
        animation: employeeDashboardFadeUp .34s cubic-bezier(.2, .8, .2, 1) .06s both;
        will-change: opacity, transform;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-glance-card {
        animation: employeeDashboardQuickLinkIn .34s cubic-bezier(.18, .9, .2, 1) both;
        will-change: opacity, transform;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-glance-card:nth-child(1) {
        animation-delay: .10s;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-glance-card:nth-child(2) {
        animation-delay: .14s;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-glance-card:nth-child(3) {
        animation-delay: .18s;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-glance-card:nth-child(4) {
        animation-delay: .22s;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-announcements {
        animation: employeeDashboardPanelIn .38s cubic-bezier(.2, .8, .2, 1) .26s both;
        will-change: opacity, transform;
    }

    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-requests-card {
        animation: employeeDashboardPanelIn .38s cubic-bezier(.2, .8, .2, 1) .32s both;
        will-change: opacity, transform;
    }
}

@keyframes employeeDashboardScreenIn {
    from {
        opacity: .01;
    }
    to {
        opacity: 1;
    }
}

@keyframes employeeDashboardHeroIn {
    from {
        opacity: 0;
        transform: translateY(16px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes employeeDashboardFadeUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes employeeDashboardQuickLinkIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes employeeDashboardPanelIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
    .page:has(.employee-mobile-tabbar) .employee-mobile-home,
    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-hero-card,
    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-quick-links-heading,
    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-glance-card,
    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-announcements,
    .page:has(.employee-mobile-tabbar) .employee-mobile-home .employee-mobile-requests-card {
        animation: none !important;
        transform: none !important;
    }
}


/* Payroll detail bottom gap fix: remove the extra gray/white spacer above the fixed mobile tab bar. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-payslip-page.is-preview-open .employee-payslip-inline-preview {
        padding-bottom: .75rem !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-payslip-page.is-preview-open {
        margin-bottom: 0 !important;
    }
}

/* Employee Request form input alignment: keep typed/read-only values vertically centered in mobile popup fields. */
@media (max-width: 760px) {
    .employee-request-form input.form-control {
        height: 42px !important;
        min-height: 42px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        line-height: 42px !important;
        display: block !important;
        vertical-align: middle !important;
    }

    .employee-request-form textarea.form-control {
        min-height: 52px !important;
        padding-top: .86rem !important;
        padding-bottom: .42rem !important;
        line-height: 1.22 !important;
        vertical-align: middle !important;
    }
}


/* Temporarily hide only the My Profile button inside the employee mobile account menu.
   Keep the top-right avatar/menu trigger visible so users can still open the menu. */
@media (max-width: 760px) {
    .employee-drawer-profile-link {
        display: none !important;
    }
}

/* Desktop login policy: computers are temporarily limited to System User access. */
.login-form[data-login-device="desktop"] .login-mode-toggle {
    display: none !important;
}

.login-desktop-system-note {
    margin: -.2rem 0 .15rem;
    padding: .72rem .82rem;
    color: #0f3d36;
    background: rgba(15, 118, 110, .08);
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 12px;
    font-size: .82rem;
    font-weight: 700;
    line-height: 1.35;
}

.login-choice-desktop-note {
    margin: .6rem 0 0;
    padding: .72rem .82rem;
    color: #0f3d36;
    background: rgba(15, 118, 110, .08);
    border: 1px solid rgba(15, 118, 110, .18);
    border-radius: 12px;
    font-size: .88rem;
    font-weight: 700;
    line-height: 1.35;
}

.login-choice-shell[data-login-device="desktop"] .login-choice-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: min(100%, 430px) !important;
}

.login-choice-shell[data-login-device="desktop"] .login-choice-card {
    min-height: 0;
}

/* Attendance date log popup: keep the sheet above the fixed employee bottom menu. */
@media (max-width: 760px) {
    .page:has(.employee-mobile-tabbar) .employee-attendance-modal-backdrop {
        top: var(--employee-mobile-header-height, 72px) !important;
        right: 0 !important;
        bottom: var(--employee-mobile-tabbar-space, 86px) !important;
        left: 0 !important;
        z-index: 1800 !important;
        align-items: end !important;
        padding: .9rem .86rem .72rem !important;
    }

    .page:has(.employee-mobile-tabbar) .employee-attendance-modal {
        max-height: calc(100svh - var(--employee-mobile-header-height, 72px) - var(--employee-mobile-tabbar-space, 86px) - 1.8rem) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain !important;
    }
}