/* /Components/Home/HeroMotion.razor.rz.scp.css */
.hero-motion[b-vhrjx26ttp]{min-width:0;width:100%;max-width:500px;justify-self:end;padding:18px;border:1px solid #ecdfe1;border-radius:18px;background:linear-gradient(150deg,#fff 30%,#fff2f2);box-shadow:0 24px 60px #70131d0c}
.motion-heading[b-vhrjx26ttp]{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;font-weight:650}.motion-badge[b-vhrjx26ttp]{color:#c10f1e;background:#fff2f2;padding:4px 8px;border-radius:20px;white-space:nowrap}
.motion-stage[b-vhrjx26ttp]{margin-top:12px;display:grid}.motion-scene[b-vhrjx26ttp]{grid-area:1/1;min-width:0}.motion-scene[hidden][b-vhrjx26ttp]{display:none}
.motion-art[b-vhrjx26ttp]{height:310px;position:relative;background:radial-gradient(ellipse,#fbe4e6,transparent 75%)}
.demo-web[b-vhrjx26ttp]{position:absolute;top:26px;left:0;width:calc(100% - 142px);background:#fff;border:1px solid #dbced0;border-radius:8px;box-shadow:0 12px 24px #70131d0b;overflow:hidden}.window-bar[b-vhrjx26ttp]{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#f7f4f4;border-bottom:1px solid #eee;font-size:11px;color:#555}.window-bar i[b-vhrjx26ttp]{width:5px;height:5px;border-radius:50%;background:#d9c9cd}.window-bar span[b-vhrjx26ttp]{margin-left:auto}.web-content[b-vhrjx26ttp]{padding:12px}.screen-title[b-vhrjx26ttp]{display:flex;justify-content:space-between;align-items:center;gap:5px;font-size:14px;font-weight:750;color:#151515}.screen-title>span[b-vhrjx26ttp]{font-size:10px;font-weight:400;color:#777}.mini-summary[b-vhrjx26ttp]{display:flex;justify-content:space-between;gap:5px;background:#fff2f2;padding:8px;margin:12px 0;font-size:11px}.mini-summary b[b-vhrjx26ttp]{color:#c10f1e}.demo-grid[b-vhrjx26ttp]{display:grid;align-items:center;gap:0;font-size:12px;line-height:1.6}.demo-grid>*[b-vhrjx26ttp]{padding:7px 3px;border-bottom:1px solid #f1e9eb}.attendance-grid[b-vhrjx26ttp]{grid-template-columns:1fr 1fr 1fr}.attendance-grid>span:nth-child(-n+3)[b-vhrjx26ttp]{font-size:11px;color:#777}.highlight-cell[b-vhrjx26ttp]{color:#c10f1e!important;background:#fff2f2;font-weight:700}.payslip-grid[b-vhrjx26ttp]{grid-template-columns:1fr 1.6fr}
.demo-phone[b-vhrjx26ttp]{position:absolute;right:0;top:48px;width:130px;min-height:216px;padding:10px 10px 12px;display:flex;flex-direction:column;align-items:center;gap:7px;border:2px solid #303030;border-radius:19px;background:white;box-shadow:5px 8px 0 #c10f1e0c;font-size:12px}.phone-speaker[b-vhrjx26ttp]{width:30px;height:4px;background:#303030;border-radius:8px;margin-bottom:2px}.device-role[b-vhrjx26ttp]{font-size:10px;background:#f6f1f2;border-radius:4px;padding:2px 8px;color:#666}.demo-phone>b[b-vhrjx26ttp]{font-size:13px}.muted[b-vhrjx26ttp]{color:#777;font-size:10px;white-space:nowrap}.clock-time[b-vhrjx26ttp]{font-size:29px;line-height:1.4;font-variant-numeric:tabular-nums}.app-action[b-vhrjx26ttp]{background:#c10f1e;color:#fff;padding:7px;width:100%;text-align:center;border-radius:5px;font-weight:600}.app-confirm[b-vhrjx26ttp]{color:#c10f1e;font-size:11px;font-weight:650}.connection-flow[b-vhrjx26ttp]{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;padding:10px 0;color:#666}.connection-flow i[b-vhrjx26ttp]{color:#c10f1e;font-style:normal;font-size:20px}.connection-flow b[b-vhrjx26ttp]{color:#c10f1e}
.contract-info[b-vhrjx26ttp]{display:flex;flex-direction:column;gap:10px;margin:14px 0;font-size:12px}.contract-info>b[b-vhrjx26ttp]{padding-bottom:5px;border-bottom:1px solid #eee}.document-actions[b-vhrjx26ttp]{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;font-size:11px;padding:10px 0}.signature-box[b-vhrjx26ttp]{width:100%;padding:8px 4px;border:1px dashed #e4c6cb;border-radius:4px;margin:7px 0;font-size:10px;color:#777}.motion-signature[b-vhrjx26ttp]{width:100%;height:44px;stroke:#171717;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.payroll-web[b-vhrjx26ttp]{width:100%;top:14px}.payroll-web .web-content[b-vhrjx26ttp]{padding:14px}.payroll-toolbar[b-vhrjx26ttp]{display:flex;gap:6px;margin:12px 0;font-size:11px}.payroll-toolbar>*[b-vhrjx26ttp]{border:1px solid #ead7d9;border-radius:4px;padding:4px 8px}.payroll-toolbar b[b-vhrjx26ttp]{background:#c10f1e;color:white}.payroll-table[b-vhrjx26ttp]{width:100%;border-collapse:collapse;font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}.payroll-table th[b-vhrjx26ttp],.payroll-table td[b-vhrjx26ttp]{padding:9px 5px;border-bottom:1px solid #eee;text-align:right}.payroll-table th:first-child[b-vhrjx26ttp]{text-align:left}.payroll-table thead[b-vhrjx26ttp]{background:#f7f4f4;color:#666;font-size:11px}.payroll-table tbody th[b-vhrjx26ttp]{font-weight:500}.payroll-total[b-vhrjx26ttp]{display:flex;justify-content:space-between;align-items:center;gap:8px;background:#fff2f2;padding:10px;margin-top:10px;font-size:12px}.payroll-total b[b-vhrjx26ttp]{color:#c10f1e;font-size:17px}.payroll-footer[b-vhrjx26ttp]{display:flex;justify-content:space-between;margin-top:8px;font-size:10px;color:#777}.payroll-footer b[b-vhrjx26ttp]{color:#c10f1e}.payroll-art .connection-flow[b-vhrjx26ttp]{bottom:-5px}
.slip-details[b-vhrjx26ttp]{width:100%;display:grid;grid-template-columns:1fr auto;gap:6px 3px;font-size:10px;margin-top:4px}.slip-details>span[b-vhrjx26ttp]{color:#666}.slip-details>b[b-vhrjx26ttp]{font-weight:500;font-variant-numeric:tabular-nums}.slip-net[b-vhrjx26ttp]{width:100%;display:flex;flex-direction:column;background:#fff2f2;padding:6px;border-radius:4px;font-size:10px}.slip-net strong[b-vhrjx26ttp]{color:#c10f1e;font-size:13px;white-space:nowrap}
.motion-copy[b-vhrjx26ttp]{min-height:68px;padding:9px 0 6px}.motion-copy h2[b-vhrjx26ttp]{font-size:18px;margin:0 0 4px;line-height:1.4;letter-spacing:-.035em}.motion-copy p[b-vhrjx26ttp]{font-size:13px;line-height:1.6;color:#666}
.motion-controls[b-vhrjx26ttp]{display:flex;align-items:center;gap:8px;flex-wrap:wrap;border-top:1px solid #ead7d9;padding-top:8px}.motion-controls[hidden][b-vhrjx26ttp]{display:none}.motion-steps[b-vhrjx26ttp]{display:flex;gap:4px;flex:1}.motion-steps button[b-vhrjx26ttp],.motion-play[b-vhrjx26ttp]{min-height:34px;border:1px solid #ead7d9;border-radius:5px;background:white;color:#555;font-size:12px;padding:5px 8px;white-space:nowrap}.motion-steps button[aria-pressed=true][b-vhrjx26ttp]{background:#c10f1e;color:white;border-color:#c10f1e}.motion-play[b-vhrjx26ttp]{border:0;padding:5px 0}.motion-caption[b-vhrjx26ttp]{font-size:11px;color:#777;margin-top:9px;line-height:1.5}
.hero-motion[data-playing=true] .motion-scene:not([hidden]) .demo-web[b-vhrjx26ttp]{animation:scene-enter-b-vhrjx26ttp .5s ease both}.hero-motion[data-playing=true] .motion-scene:not([hidden]) .demo-phone[b-vhrjx26ttp]{animation:scene-enter-b-vhrjx26ttp .5s .3s ease both}.hero-motion[data-playing=true] .motion-scene:not([hidden]) .highlight-cell[b-vhrjx26ttp],.hero-motion[data-playing=true] .motion-scene:not([hidden]) .app-confirm[b-vhrjx26ttp]{animation:confirm-enter-b-vhrjx26ttp .6s .9s ease both}.hero-motion[data-playing=true] .motion-scene:not([hidden]) .connection-flow i[b-vhrjx26ttp]{animation:flow-step-b-vhrjx26ttp 1.3s .6s ease 2}.hero-motion[data-playing=true] .motion-scene:not([hidden]) .motion-signature path[b-vhrjx26ttp]{stroke-dasharray:1;animation:signature-draw-b-vhrjx26ttp .2s linear both;animation-delay:calc(.3s + var(--stroke) * .17s)}
@keyframes scene-enter-b-vhrjx26ttp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes confirm-enter-b-vhrjx26ttp{from{opacity:0}to{opacity:1}}@keyframes flow-step-b-vhrjx26ttp{50%{transform:translateX(5px)}}@keyframes signature-draw-b-vhrjx26ttp{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(max-width:760px){.hero-motion[b-vhrjx26ttp]{max-width:none;padding:16px 12px}.motion-heading[b-vhrjx26ttp]{font-size:12px;flex-wrap:wrap}.motion-copy[b-vhrjx26ttp]{min-height:78px}.motion-copy h2[b-vhrjx26ttp]{font-size:17px}.motion-controls[b-vhrjx26ttp]{gap:4px}.motion-steps button[b-vhrjx26ttp]{padding:5px 7px;min-height:40px}.motion-play[b-vhrjx26ttp]{min-height:40px}.motion-caption[b-vhrjx26ttp]{font-size:11px}.demo-web[b-vhrjx26ttp]{width:calc(100% - 132px)}.demo-phone[b-vhrjx26ttp]{width:122px}.web-content[b-vhrjx26ttp]{padding:9px}.screen-title[b-vhrjx26ttp]{font-size:13px}.screen-title>span[b-vhrjx26ttp]{display:none}.mini-summary>span[b-vhrjx26ttp]{display:none}.payroll-web[b-vhrjx26ttp]{width:100%}.payroll-web .web-content[b-vhrjx26ttp]{padding:10px}.payroll-table[b-vhrjx26ttp]{font-size:11px}.payroll-table .optional[b-vhrjx26ttp]{display:none}.payroll-table th[b-vhrjx26ttp],.payroll-table td[b-vhrjx26ttp]{padding:10px 3px}.payroll-total b[b-vhrjx26ttp]{font-size:15px}.connection-flow[b-vhrjx26ttp]{font-size:11px;gap:5px}}
@media(max-width:420px){.connected-art[b-vhrjx26ttp]{height:350px}.connected-art .demo-web[b-vhrjx26ttp]{width:100%;top:6px}.connected-art .web-content[b-vhrjx26ttp]{padding-right:10px}.connected-art .demo-phone[b-vhrjx26ttp]{top:127px;min-height:202px;right:3px}.connected-art .demo-grid[b-vhrjx26ttp]{padding-right:126px;grid-template-columns:1fr 1fr}.attendance-grid>span:nth-child(3n)[b-vhrjx26ttp]{display:none}.connected-art .payslip-grid[b-vhrjx26ttp]{grid-template-columns:1fr}.payslip-grid>span:nth-child(2n)[b-vhrjx26ttp]{display:none}.connected-art .mini-summary[b-vhrjx26ttp]{margin:8px 0}.connected-art .contract-info[b-vhrjx26ttp]{padding-right:115px;font-size:11px;gap:8px}.connected-art .document-actions[b-vhrjx26ttp]{max-width:110px}.connected-art .connection-flow[b-vhrjx26ttp]{right:130px;bottom:8px;flex-direction:column;align-items:flex-start;gap:2px;font-size:11px}.connected-art .connection-flow i[b-vhrjx26ttp]{font-size:18px;line-height:1.2}.connected-art .demo-web:has(.contract-info)[b-vhrjx26ttp]{min-height:245px}}
@media(prefers-reduced-motion:reduce){.hero-motion *[b-vhrjx26ttp]{animation:none!important;transition:none!important}}
/* Keep the illustrative UI compact enough to stay within its stage. */
.motion-art[b-vhrjx26ttp]{line-height:1.35}
.window-bar[b-vhrjx26ttp]{padding:6px 9px}
.demo-phone[b-vhrjx26ttp]{gap:5px}
.payroll-web .web-content[b-vhrjx26ttp]{padding:10px 12px}
.payroll-toolbar[b-vhrjx26ttp]{margin:9px 0;line-height:1.3}
.payroll-table[b-vhrjx26ttp]{line-height:1.3}
.payroll-table th[b-vhrjx26ttp],.payroll-table td[b-vhrjx26ttp]{padding:7px 4px}
.payroll-total[b-vhrjx26ttp]{padding:8px;margin-top:8px;line-height:1.3}
.payroll-footer[b-vhrjx26ttp]{margin-top:7px;line-height:1.3}
@media(max-width:420px){.connected-art[b-vhrjx26ttp]{height:370px}.connected-art .demo-phone[b-vhrjx26ttp]{top:132px}.payroll-table th[b-vhrjx26ttp],.payroll-table td[b-vhrjx26ttp]{padding:8px 3px}}
.payroll-web[b-vhrjx26ttp]{top:4px}.payroll-web .web-content[b-vhrjx26ttp]{padding:8px 10px}.payroll-toolbar[b-vhrjx26ttp]{margin:8px 0}.payroll-table th[b-vhrjx26ttp],.payroll-table td[b-vhrjx26ttp]{padding:5px 4px}.payroll-total[b-vhrjx26ttp]{padding:6px;margin-top:6px}.payroll-art .connection-flow[b-vhrjx26ttp]{bottom:-2px}

.app-location[b-vhrjx26ttp]{display:flex;align-items:center;gap:3px;font-size:10px;color:#555;background:#f6f3f3;border-radius:4px;padding:4px;white-space:nowrap}
.dispatch-methods[b-vhrjx26ttp]{margin:10px 0;font-size:10px;color:#666}.dispatch-methods>div[b-vhrjx26ttp]{display:flex;gap:4px;margin-top:5px}.dispatch-methods b[b-vhrjx26ttp]{font-weight:500;font-size:11px;border:1px solid #e2d5d8;border-radius:4px;padding:4px 7px;color:#555}.dispatch-methods .selected-method[b-vhrjx26ttp]{background:#c10f1e;border-color:#c10f1e;color:white}
.motion-signature[b-vhrjx26ttp]{height:50px}
@media(max-width:420px){.dispatch-methods[b-vhrjx26ttp]{margin:8px 0}.dispatch-methods b[b-vhrjx26ttp]{padding:3px 7px}}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* Shared homepage layout styles are in wwwroot/app.css. */
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-7lhsjq15e8],
.components-reconnect-repeated-attempt-visible[b-7lhsjq15e8],
.components-reconnect-failed-visible[b-7lhsjq15e8],
.components-pause-visible[b-7lhsjq15e8],
.components-resume-failed-visible[b-7lhsjq15e8],
.components-rejoining-animation[b-7lhsjq15e8] {
    display: none;
}

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


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

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

}

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

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

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

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 0;
    }
}

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

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

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

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

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

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

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

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

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

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

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

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}