/****************************************
 * ASIYA MOBILE FOUNDATION V3.3
 *
 * Global phone-size safety rules.
 * Dense tables may scroll inside their own
 * container, but the application shell must
 * never exceed the physical viewport.
 ****************************************/

html{
    width:100%;
    max-width:100%;
    min-height:100%;
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
    overflow-x:hidden;
}

body{
    width:100%;
    max-width:100%;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    overflow-x:hidden;
    overscroll-behavior-x:none;
}

#app{
    width:100%;
    max-width:100%;
    min-width:0;
    min-height:100vh;
    min-height:100dvh;
    overflow-x:clip;
}

/* Every layout child may shrink on narrow screens. */
#app *,
#app *::before,
#app *::after{
    min-width:0;
}

img,
svg,
canvas,
video,
iframe{
    max-width:100%;
}

img,
video{
    height:auto;
}

button,
input,
select,
textarea{
    max-width:100%;
}

/* 16px avoids Safari auto-zoom and the width jump that follows it. */
@media (max-width:768px){

    input,
    select,
    textarea{
        font-size:16px !important;
    }

    .login-screen,
    .field-login-container,
    .office-login-container,
    .employee-home,
    .employee-screen,
    .history-screen,
    .documents-screen,
    .report-screen,
    .manager-page,
    .management-page,
    .management-container{
        width:100% !important;
        max-width:100% !important;
    }

    /*
     * Never globally break every div/span/button.
     * Generic wrapping caused "Working" and report
     * statuses to collapse into vertical letters.
     */
    #app{
        overflow-wrap:normal;
        word-break:normal;
    }

    .tile-name,
    .document-list-row a,
    .management-notification-help,
    .management-reminder-block textarea{
        overflow-wrap:break-word;
        word-break:normal;
    }

    /* Fixed overlays respect notches and Home indicator. */
    .modal,
    .modal-overlay,
    .settings-modal,
    .history-modal,
    .comment-modal{
        max-width:100vw;
    }

    .bottom-nav,
    .manager-bottom-nav,
    .management-bottom-nav{
        padding-bottom:max(
            env(safe-area-inset-bottom),
            8px
        );
    }

    /* Standalone PWA gets exact dynamic viewport sizing. */
    .pwa-standalone body,
    body.pwa-standalone,
    .pwa-standalone #app{
        min-height:var(--app-viewport-height, 100dvh);
    }
}

/* Very small Android devices / older iPhones. */
@media (max-width:360px){

    .login-screen{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    #app button{
        white-space:normal;
    }
}

/* Landscape phones: allow content to grow vertically instead of clipping. */
@media (max-height:500px) and (orientation:landscape){
    body,
    #app{
        min-height:100dvh;
        height:auto;
    }
}

/****************************************
 * V3.4 MOBILE SIGNATURE PAD
 ****************************************/
.signature-container{
    width:100%;
    max-width:100%;
    min-width:0;
}

#signatureCanvas{
    display:block;
    width:100%;
    max-width:100%;
    height:clamp(160px, 24vh, 220px);
    min-height:160px;
    box-sizing:border-box;
    touch-action:none;
    overscroll-behavior:contain;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none;
}


/****************************************
 * V3.6 STANDALONE APP EXPERIENCE
 *
 * Installed PWA uses the full phone canvas
 * instead of desktop card widths centered
 * inside a narrow web page.
 ****************************************/

:root{
    --app-safe-top:
        env(safe-area-inset-top, 0px);

    --app-safe-bottom:
        env(safe-area-inset-bottom, 0px);

    --app-safe-left:
        env(safe-area-inset-left, 0px);

    --app-safe-right:
        env(safe-area-inset-right, 0px);
}


html.pwa-standalone,
body.pwa-standalone{
    background:#f4f6f8;
}


body.pwa-standalone{
    width:100%;
    min-height:
        var(
            --app-viewport-height,
            100dvh
        );

    margin:0;

    padding:0;

    overscroll-behavior-y:none;
}


body.pwa-standalone #app{
    width:100%;
    max-width:none;

    min-height:
        var(
            --app-viewport-height,
            100dvh
        );

    margin:0;
    padding:0;

    overflow-x:hidden;
}


body.pwa-standalone .employee-app{
    width:100%;
    max-width:none;

    min-height:
        var(
            --app-viewport-height,
            100dvh
        );

    padding-top:
        var(--app-safe-top);

    padding-left:
        var(--app-safe-left);

    padding-right:
        var(--app-safe-right);

    background:#f4f6f8;
}


body.pwa-standalone .app-header{
    width:100%;

    padding:
        12px
        18px
        8px;
}


body.pwa-standalone .app-logo{
    width:92px;
    max-width:28vw;
}


body.pwa-standalone .attendance-area{
    width:100%;

    justify-content:center;

    padding:
        10px
        16px
        18px;
}


body.pwa-standalone .status-card{
    width:100%;
    max-width:none;

    margin:0;

    padding:
        clamp(
            20px,
            5vw,
            28px
        );

    border-radius:24px;
}


body.pwa-standalone .status{
    margin:
        16px
        0;

    font-size:
        clamp(
            24px,
            7vw,
            32px
        );
}


body.pwa-standalone .hours{
    font-size:
        clamp(
            22px,
            6vw,
            28px
        );
}


body.pwa-standalone .punch-main,
body.pwa-standalone .punch-button{
    width:100%;
    max-width:none;

    min-height:60px;

    margin-top:18px;

    padding:
        16px
        18px;

    border-radius:18px;

    font-size:
        clamp(
            18px,
            5vw,
            22px
        );
}


body.pwa-standalone .bottom-nav{
    width:100%;

    padding:
        10px
        10px
        max(
            var(--app-safe-bottom),
            10px
        );

    flex:0 0 auto;
}


body.pwa-standalone .nav-item{
    min-height:48px;
}


body.pwa-standalone .nav-home{
    width:64px;
    height:64px;

    margin-top:-30px;
}


body.pwa-standalone .nav-logo{
    width:50px;
    height:50px;
}


/* Installed login should also feel app-native. */
body.pwa-standalone .login-screen,
body.pwa-standalone .field-login-container,
body.pwa-standalone .office-login-container{
    width:100%;
    max-width:none;

    min-height:
        var(
            --app-viewport-height,
            100dvh
        );

    margin:0;

    padding:
        calc(
            var(--app-safe-top) +
            20px
        )
        20px
        calc(
            var(--app-safe-bottom) +
            20px
        );
}


/* Signature surface must always look like paper. */
#signatureCanvas{
    background:#ffffff !important;
    border:1px solid #cfd6df;
    border-radius:12px;
}


/* Safe checking screen: never show a Punch control
   until stale attendance is verified. */
.employee-checking-card{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:12px;
}

.employee-checking-card h2{
    margin:0;
    font-size:20px;
    text-align:center;
}

.employee-checking-card p{
    margin:0;
    color:#667085;
    text-align:center;
}

.employee-checking-spinner{
    width:32px;
    height:32px;

    border:3px solid #d7dde5;
    border-top-color:#2563eb;
    border-radius:50%;

    animation:
        employeeCheckingSpin
        .8s
        linear
        infinite;
}

@keyframes employeeCheckingSpin{
    to{
        transform:rotate(360deg);
    }
}


/* Compact phones: preserve app proportions without
   cutting the footer or Punch button. */
@media (max-width:380px){

    body.pwa-standalone .attendance-area{
        padding-left:12px;
        padding-right:12px;
    }

    body.pwa-standalone .status-card{
        padding:18px 16px;
    }

    body.pwa-standalone .app-header{
        padding-top:8px;
    }

}


/****************************************
 * V3.7 NATIVE MOBILE INTERACTION
 ****************************************/

/*
 * Direct display-mode media query is the
 * source of truth for an installed PWA.
 * It does not depend on JavaScript timing.
 */
@media (display-mode: standalone){

    html,
    body,
    #app{
        width:100% !important;
        max-width:none !important;
        min-width:0 !important;

        margin:0 !important;

        overflow-x:hidden !important;
    }


    body{
        min-height:100dvh;

        background:#f4f6f8;

        overscroll-behavior:none;

        -webkit-user-select:none;
        user-select:none;
    }


    #app{
        min-height:100dvh;
    }


    .employee-app{
        width:100% !important;
        max-width:none !important;

        min-height:100dvh;

        margin:0 !important;
    }


    .attendance-area{
        width:100% !important;

        padding:
            8px
            14px
            18px !important;

        box-sizing:border-box;
    }


    .status-card{
        width:100% !important;
        max-width:none !important;

        box-sizing:border-box;

        margin:0 !important;

        border-radius:22px;
    }


    .punch-main,
    .punch-button{
        width:100% !important;
        max-width:none !important;

        box-sizing:border-box;

        min-height:60px;

        margin-top:14px !important;
    }


    .menu-grid{
        width:100% !important;
        max-width:none !important;

        padding:
            0
            14px;

        box-sizing:border-box;
    }


    .app-header{
        width:100%;

        padding:
            max(
                env(
                    safe-area-inset-top,
                    0px
                ),
                10px
            )
            16px
            8px !important;

        box-sizing:border-box;
    }


    .bottom-nav{
        width:100%;

        padding-bottom:
            max(
                env(
                    safe-area-inset-bottom,
                    0px
                ),
                10px
            ) !important;

        box-sizing:border-box;
    }


    /*
     * Browser-like centered login cards are
     * removed in standalone mode.
     */
    .login-screen,
    .field-login-container,
    .office-login-container{
        width:100% !important;
        max-width:none !important;

        min-height:100dvh;

        margin:0 !important;

        border-radius:0 !important;
    }

}


/*
 * Android canvas compositor protection.
 */
#signatureCanvas{
    background-color:#ffffff !important;

    color-scheme:light;

    opacity:1 !important;

    filter:none !important;

    mix-blend-mode:normal !important;

    isolation:isolate;

    contain:paint;

    transform:none !important;

    -webkit-transform:none !important;

    -webkit-tap-highlight-color:transparent;

    forced-color-adjust:none;
}


#signatureCanvas:active,
#signatureCanvas:focus{
    background-color:#ffffff !important;

    opacity:1 !important;

    filter:none !important;

    outline:none;
}


/*
 * Native-touch interaction polish.
 */
button,
[role="button"],
.menu-card,
.nav-item,
.settings-button{
    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;
}


@media (prefers-reduced-motion: no-preference){

    button,
    [role="button"],
    .menu-card,
    .nav-item,
    .settings-button{
        transition:
            transform .09s ease,
            opacity .09s ease,
            box-shadow .12s ease;
    }


    button:active,
    [role="button"]:active,
    .menu-card:active,
    .nav-item:active,
    .settings-button:active{
        transform:scale(.975);
    }

}


/****************************************
 * V3.8 VERSION / FEEDBACK / APP HANDOFF
 ****************************************/

.app-version-badge{
    position:fixed;
    right:
        max(
            env(
                safe-area-inset-right,
                0px
            ),
            8px
        );
    bottom:
        max(
            env(
                safe-area-inset-bottom,
                0px
            ),
            6px
        );

    z-index:30;

    padding:3px 6px;

    border-radius:7px;

    background:rgba(255,255,255,.82);

    color:#667085;

    font-size:10px;
    font-weight:700;

    pointer-events:none;
}


.settings-version-info{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:3px;

    margin-top:10px;
    margin-bottom:4px;

    color:#667085;

    font-size:12px;
}


.settings-version-info strong{
    color:#111827;
    font-size:14px;
}


.open-installed-app-banner{
    position:fixed;

    left:
        max(
            env(
                safe-area-inset-left,
                0px
            ),
            10px
        );

    right:
        max(
            env(
                safe-area-inset-right,
                0px
            ),
            10px
        );

    top:
        max(
            env(
                safe-area-inset-top,
                0px
            ),
            10px
        );

    z-index:10000;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;

    padding:10px 12px;

    border:1px solid #d0d5dd;
    border-radius:14px;

    background:rgba(255,255,255,.96);

    box-shadow:
        0 5px 18px
        rgba(0,0,0,.12);

    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
}


.open-installed-app-link{
    flex:1;

    color:#111827;

    font-weight:700;

    text-decoration:none;
}


.open-installed-app-banner button{
    width:32px;
    height:32px;

    border:0;
    border-radius:50%;

    background:#f2f4f7;

    font-size:20px;
}


/****************************************
 * V3.8 SIGNATURE PAPER LAYER
 *
 * The white paper is a normal DIV.
 * Canvas is transparent and only carries
 * the ink. This avoids Android repainting
 * the whole canvas layer black on touch.
 ****************************************/

.signature-paper{
    position:relative;

    width:100%;
    max-width:100%;

    min-height:160px;

    overflow:hidden;

    border:1px solid #cfd6df;

    border-radius:12px;

    background:#ffffff !important;

    isolation:isolate;

    box-sizing:border-box;
}


.signature-paper::before{
    content:"";

    position:absolute;
    inset:0;

    z-index:0;

    background:#ffffff;

    pointer-events:none;
}


#signatureCanvas{
    position:relative;

    z-index:1;

    display:block;

    width:100%;
    max-width:100%;

    height:clamp(160px, 24vh, 220px);

    min-height:160px;

    border:0 !important;

    border-radius:0 !important;

    background:transparent !important;

    opacity:1 !important;

    mix-blend-mode:normal !important;

    filter:none !important;

    contain:strict;

    touch-action:none;

    -webkit-tap-highlight-color:transparent;
}


#signatureCanvas:active,
#signatureCanvas:focus{
    background:transparent !important;
}


/* Don't cover important bottom navigation with
   the tiny development version marker. */
body.pwa-standalone .app-version-badge{
    bottom:
        calc(
            max(
                env(
                    safe-area-inset-bottom,
                    0px
                ),
                6px
            )
            +
            72px
        );
}

@media (display-mode: standalone){

    .app-version-badge{
        bottom:
            calc(
                max(
                    env(
                        safe-area-inset-bottom,
                        0px
                    ),
                    6px
                )
                +
                72px
            );
    }

    .open-installed-app-banner{
        display:none !important;
    }

}


/****************************************
 * V3.9 PHONE-SCALE LAYOUT
 ****************************************/

/*
 * Home should use the screen instead of
 * centering a small desktop card inside it.
 */
@media (max-width:700px){

    .employee-app{
        display:grid !important;

        grid-template-rows:
            auto
            minmax(0,1fr)
            auto;

        min-height:
            var(
                --app-viewport-height,
                100dvh
            ) !important;

        justify-content:stretch !important;
    }


    .app-header{
        padding:
            14px
            18px
            6px !important;
    }


    .app-logo{
        width:
            clamp(
                100px,
                26vw,
                138px
            ) !important;

        max-width:none !important;
    }


    .user-name{
        margin-top:6px !important;

        font-size:
            clamp(
                18px,
                4.8vw,
                24px
            ) !important;
    }


    .attendance-area{
        flex:none !important;

        min-height:0;

        display:flex;

        justify-content:flex-start !important;

        padding:
            clamp(
                28px,
                7vh,
                72px
            )
            14px
            18px !important;
    }


    .status-card{
        width:100% !important;

        padding:
            clamp(
                26px,
                6vw,
                38px
            )
            20px !important;
    }


    .status-card h2{
        font-size:
            clamp(
                22px,
                5.4vw,
                29px
            );

        margin:
            0
            0
            18px;
    }


    .status{
        font-size:
            clamp(
                31px,
                8vw,
                42px
            ) !important;

        line-height:1.15;

        margin:
            14px
            0 !important;
    }


    .hours{
        font-size:
            clamp(
                30px,
                7.5vw,
                40px
            ) !important;

        font-weight:700;
    }


    .punch-time{
        margin-top:6px;

        font-size:
            clamp(
                16px,
                4vw,
                20px
            );
    }


    .punch-main{
        min-height:66px !important;

        font-size:
            clamp(
                20px,
                5.2vw,
                25px
            ) !important;

        border-radius:20px !important;
    }


    .bottom-nav{
        min-height:72px;

        padding-top:10px !important;
    }


    .nav-item{
        font-size:13px !important;
    }


    .nav-item span{
        font-size:28px !important;
    }

}


/****************************************
 * V3.9 COMPLETION / SIGNATURE PHONE UI
 ****************************************/

@media (max-width:700px){

    .punch-complete-screen{
        display:flex !important;

        justify-content:flex-start !important;

        width:100% !important;

        max-width:none !important;

        min-height:
            var(
                --app-viewport-height,
                100dvh
            ) !important;

        padding:
            max(
                env(
                    safe-area-inset-top,
                    0px
                ),
                18px
            )
            16px
            max(
                env(
                    safe-area-inset-bottom,
                    0px
                ),
                22px
            ) !important;

        box-sizing:border-box;
    }


    .punch-complete-screen .logo{
        width:
            clamp(
                122px,
                31vw,
                168px
            ) !important;

        margin:
            4px
            0
            12px !important;
    }


    .punch-complete-screen h1{
        font-size:
            clamp(
                28px,
                7vw,
                38px
            ) !important;

        margin:
            6px
            0 !important;
    }


    .punch-complete-screen .subtitle{
        font-size:
            clamp(
                16px,
                4vw,
                20px
            );

        margin-bottom:16px !important;
    }


    .punch-complete-screen .approval-summary{
        width:100%;

        max-width:520px;

        box-sizing:border-box;

        padding:
            16px
            18px !important;

        margin:
            8px
            0
            14px !important;

        border-radius:16px;
    }


    .punch-complete-screen .approval-summary h3{
        font-size:
            clamp(
                18px,
                4.6vw,
                23px
            );

        margin:
            0
            0
            10px !important;
    }


    .punch-complete-screen .summary-line{
        font-size:
            clamp(
                17px,
                4.3vw,
                21px
            ) !important;

        padding:
            7px
            0 !important;
    }


    .punch-complete-screen .login-form{
        width:100% !important;

        max-width:520px !important;
    }


    .punch-complete-screen textarea{
        width:100% !important;

        min-height:72px;

        box-sizing:border-box;

        padding:12px;

        border-radius:12px;

        font-size:17px;
    }


    .punch-complete-screen .signature-container{
        width:100%;

        margin-top:12px;
    }


    .punch-complete-screen .signature-container > p{
        margin:
            0
            0
            8px;

        font-size:
            clamp(
                18px,
                4.6vw,
                23px
            );

        font-weight:600;
    }


    .punch-complete-screen .signature-paper{
        width:100% !important;

        height:
            clamp(
                230px,
                31vh,
                360px
            ) !important;

        min-height:230px !important;

        border-radius:16px !important;
    }


    .punch-complete-screen #signatureCanvas{
        width:100% !important;

        height:100% !important;

        min-height:230px !important;
    }


    .punch-complete-screen .back-button{
        min-height:44px;

        margin:
            10px
            0
            4px !important;

        font-size:17px;
    }


    .punch-complete-screen .login-button{
        min-height:58px;

        margin-top:8px !important;

        border-radius:14px;

        font-size:20px;
    }

}


/****************************************
 * V3.9 SETTINGS TOGGLE FEEDBACK
 ****************************************/

.settings-button{
    min-height:50px;
}


/*
 * Version badge is for development visibility
 * but should not compete with main navigation.
 */
@media (max-width:700px){

    .app-version-badge{
        opacity:.72;
    }

}


/****************************************
 * V3.10 CROSS-DEVICE UX LOCK
 *
 * Rules here intentionally avoid viewport-
 * based font sizing for core employee text.
 * Layout may grow vertically for accessibility,
 * but it must never squeeze words into columns.
 ****************************************/

:root{
    --employee-nav-height:82px;
    --employee-page-gutter:16px;
    --employee-content-max:620px;
}

html,
body{
    font-size:16px;
}

.employee-app{
    width:100%;
    max-width:100%;
    box-sizing:border-box;

    padding-bottom:
        calc(
            var(--employee-nav-height)
            +
            max(
                env(safe-area-inset-bottom,0px),
                6px
            )
        );
}

/* Native app bar: always in the same place on every employee screen. */
.employee-app > .bottom-nav{
    position:fixed !important;
    left:0;
    right:0;
    bottom:0;

    z-index:500;

    width:100%;
    height:auto;
    min-height:var(--employee-nav-height);

    margin:0 !important;
    box-sizing:border-box;

    padding:
        10px
        12px
        max(
            env(safe-area-inset-bottom,0px),
            10px
        ) !important;

    background:rgba(255,255,255,.97);

    box-shadow:
        0 -4px 18px
        rgba(0,0,0,.09);

    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.employee-app > .bottom-nav .nav-item{
    flex:1 1 0;
    min-width:0;
}

.employee-app > .bottom-nav .nav-home{
    flex:0 0 68px;
}

/* Home attendance: unique selectors cannot collide with report status. */
.attendance-status-card{
    width:min(
        calc(100% - 2 * var(--employee-page-gutter)),
        var(--employee-content-max)
    ) !important;

    max-width:var(--employee-content-max) !important;

    margin:0 auto;

    box-sizing:border-box;
}

.attendance-status{
    width:auto !important;
    max-width:none !important;
    min-width:0;

    display:flex !important;
    align-items:center;
    justify-content:center;

    margin:14px 0 !important;
    padding:0 !important;

    border-radius:0 !important;
    background:transparent !important;

    font-size:34px !important;
    line-height:1.12 !important;

    white-space:nowrap !important;
    overflow:visible !important;
    text-overflow:clip !important;
    overflow-wrap:normal !important;
    word-break:keep-all !important;
}

.attendance-hours{
    font-size:34px !important;
    font-weight:700;
    line-height:1.15;

    white-space:nowrap;
    overflow-wrap:normal;
    word-break:keep-all;
}

@media (max-width:380px){
    .attendance-status{
        font-size:30px !important;
    }

    .attendance-hours{
        font-size:30px !important;
    }
}

/* History always occupies the area above the fixed nav. */
.history-page{
    width:100%;
    max-width:620px;

    margin:0 auto;

    box-sizing:border-box;

    min-height:
        calc(
            var(--app-viewport-height,100dvh)
            -
            var(--employee-nav-height)
        );

    padding:
        26px
        var(--employee-page-gutter)
        30px !important;
}

/* Documents grid uses visual left-to-right row order.
   File names individually detect Hebrew/English direction. */
.documents-page{
    width:100%;
    max-width:720px;

    margin:0 auto;

    box-sizing:border-box;

    padding:
        18px
        var(--employee-page-gutter)
        110px !important;
}

.documents-grid{
    direction:ltr !important;

    grid-template-columns:
        repeat(
            2,
            minmax(0,1fr)
        ) !important;

    grid-auto-flow:row;

    align-items:start;

    gap:14px !important;
}

.document-tile{
    min-width:0;
    width:100%;
    height:auto;

    box-sizing:border-box;
}

.tile-name{
    direction:auto;
    unicode-bidi:plaintext;

    min-height:48px;

    line-height:1.25;

    overflow:hidden;
    overflow-wrap:break-word;
    word-break:normal;
}

.document-thumb{
    width:100%;
    aspect-ratio:4 / 3;
    height:auto !important;
}

@media (max-width:345px){

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

}

/* Header/logo gets a stable CSS-pixel scale across phones. */
.employee-app .app-logo{
    width:118px !important;
    max-width:32vw !important;
}

.employee-app .user-name{
    font-size:18px !important;
    line-height:1.25;
}

/* Core home layout uses fixed/reasonable sizes rather than vw text. */
@media (max-width:700px){

    .employee-app{
        display:flex !important;
        flex-direction:column;
        justify-content:flex-start !important;

        min-height:
            var(
                --app-viewport-height,
                100dvh
            ) !important;
    }

    .employee-app .app-header{
        flex:0 0 auto;

        padding:
            14px
            18px
            8px !important;
    }

    .employee-app .attendance-area{
        flex:0 0 auto !important;

        width:100%;

        padding:
            44px
            var(--employee-page-gutter)
            18px !important;

        box-sizing:border-box;

        justify-content:flex-start !important;
    }

    .attendance-status-card{
        padding:
            30px
            20px !important;
    }

    .attendance-status-card h2{
        margin:
            0
            0
            18px !important;

        font-size:24px !important;
        line-height:1.2;
    }

    .employee-app .punch-main{
        width:min(
            calc(100% - 2 * var(--employee-page-gutter)),
            var(--employee-content-max)
        ) !important;

        max-width:var(--employee-content-max) !important;

        min-height:62px !important;

        margin:
            16px
            auto
            0 !important;

        font-size:21px !important;
        line-height:1.15;

        white-space:nowrap;
        overflow-wrap:normal;
        word-break:keep-all;
    }

}

/* Version badge remains visible but never covers report status/content. */
.app-version-badge{
    z-index:450 !important;
}



/****************************************
 * V3.11 THREE-MODE UX FOUNDATION
 ****************************************/

html.runtime-pc{
    --asiya-touch-target:44px;
}

html.runtime-phone-web{
    --asiya-touch-target:48px;
}

html.runtime-app{
    --asiya-touch-target:56px;
}


/****************************************
 * INSTALLED APP ONLY — EMPLOYEE
 ****************************************/

.runtime-app .employee-app{
    justify-content:flex-start !important;
}

.runtime-app .employee-app .app-header{
    flex:0 0 auto;
    padding:16px 18px 10px !important;
}

.runtime-app .employee-app .app-logo{
    width:132px !important;
    max-width:34vw !important;
}

.runtime-app .employee-app .user-name{
    font-size:20px !important;
}

.runtime-app .employee-app .attendance-area{
    padding-top:clamp(26px,5vh,60px) !important;
}

.runtime-app .employee-app .attendance-status-card{
    padding:34px 24px !important;
    border-radius:24px !important;
}

.runtime-app .employee-app .attendance-status{
    font-size:38px !important;
}

.runtime-app .employee-app .attendance-hours{
    font-size:38px !important;
}

.runtime-app .employee-app .punch-main{
    min-height:68px !important;
    font-size:23px !important;
    border-radius:20px !important;
}

.runtime-app .employee-app > .bottom-nav{
    min-height:88px !important;
}

.runtime-app .employee-app > .bottom-nav .nav-item{
    min-height:58px;
    font-size:14px !important;
}

.runtime-app .employee-app > .bottom-nav .nav-item span{
    font-size:30px !important;
}

.runtime-app .employee-app .receipt-wrapper{
    flex:1 1 auto;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px 18px 110px !important;
}

.runtime-app .employee-app .attendance-receipt{
    width:100%;
    max-width:620px;
    padding:28px !important;
}

.runtime-app .employee-app .receipt-row{
    min-height:50px;
    align-items:center;
    font-size:17px;
}

.runtime-app .employee-app .documents-page{
    flex:1 1 auto;
    width:100%;
    max-width:760px;
    margin:0 auto !important;
    padding:24px 16px 116px !important;
}

.runtime-app .documents-topbar h1{
    font-size:27px !important;
}

.runtime-app .documents-toolbar button{
    min-height:50px;
    padding:12px 20px !important;
    font-size:16px !important;
}

.runtime-app .document-tile .tile-button,
.runtime-app .document-list-row .list-view-button{
    min-height:52px;
    font-size:17px !important;
}

.runtime-app .report-page{
    width:100%;
    max-width:760px;
    margin:0 auto;
    padding:22px 16px 116px !important;
}

.runtime-app .report-page .report-title{
    font-size:30px !important;
}

.runtime-app .report-page .summary-card{
    padding:24px 18px !important;
    border-radius:20px !important;
}

.runtime-app .report-page .summary-grid strong,
.runtime-app .report-page .summary-grid b{
    font-size:30px !important;
}

.runtime-app .report-page .history-line,
.runtime-app .report-page .history-header{
    min-height:58px;
    font-size:15px !important;
}

.runtime-app .report-page select,
.runtime-app .report-page button{
    min-height:52px;
    font-size:17px;
}

.runtime-app .login-screen,
.runtime-app .field-login-container,
.runtime-app .office-login-container{
    width:100% !important;
    max-width:560px !important;
    margin:auto !important;
    padding:28px 24px !important;
}

.runtime-app .login-screen input,
.runtime-app .field-login-container input,
.runtime-app .office-login-container input{
    width:100% !important;
    min-height:54px;
    padding:0 14px;
    font-size:17px !important;
}

.runtime-app .login-screen button,
.runtime-app .field-login-container button,
.runtime-app .office-login-container button{
    min-height:58px;
    font-size:18px !important;
}

.runtime-app .settings-modal{
    width:min(92vw,560px) !important;
}

.runtime-app .settings-button{
    min-height:56px !important;
    font-size:17px !important;
}

.runtime-app .confirm-window{
    min-height:240px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.runtime-app .confirm-actions button{
    min-height:52px;
    min-width:120px;
    font-size:17px;
}


/****************************************
 * INSTALLED APP ONLY — SITE MANAGER
 ****************************************/

.runtime-app .manager-shell{
    min-height:var(--app-viewport-height,100dvh);
}

.runtime-app .manager-content{
    padding-bottom:110px;
}

.runtime-app .manager-nav-item,
.runtime-app .manager-settings-button,
.runtime-app .manager-report-download-card,
.runtime-app .manager-document-download-button{
    min-height:56px;
}

.runtime-app .manager-stat-card{
    min-height:120px;
}

.runtime-app .manager-stat-card strong{
    font-size:32px;
}


/****************************************
 * INSTALLED APP ONLY — MANAGEMENT
 ****************************************/

.runtime-app .management-app{
    height:var(--app-viewport-height,100dvh);
    min-height:0 !important;
    overflow:hidden;
    display:flex;
    flex-direction:column;
}

.runtime-app .management-top-header,
.runtime-app .management-page-header{
    flex:0 0 auto;
}

.runtime-app .management-main-content{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
    touch-action:pan-y;
    overscroll-behavior-y:contain;
    padding-bottom:96px;
}

.runtime-app .management-bottom-nav{
    flex:0 0 auto;
    min-height:82px;
    padding-bottom:max(
        env(safe-area-inset-bottom,0px),
        8px
    );
}

.runtime-app .management-nav-item{
    min-height:60px;
}

.runtime-app .management-nav-item span{
    font-size:25px;
}

.runtime-app .management-nav-item small{
    font-size:12px;
}

.runtime-app .management-employees-page{
    min-height:auto !important;
    padding:18px 14px 24px !important;
}

.runtime-app .management-employees-list{
    grid-template-columns:1fr !important;
    gap:12px !important;
}

.runtime-app .management-employee-card{
    min-height:92px !important;
    padding:18px 52px 18px 18px !important;
}

.runtime-app .management-employee-card-name{
    font-size:17px !important;
}

.runtime-app .management-employee-card-passport{
    font-size:14px !important;
}

.runtime-app .management-primary-button,
.runtime-app .management-notification-send{
    min-height:58px !important;
    font-size:18px !important;
}

.runtime-app .management-notification-label input,
.runtime-app .management-notification-label select,
.runtime-app .management-notification-label textarea{
    min-height:52px;
    font-size:17px !important;
}

.runtime-app .management-sites-map-container{
    height:calc(
        var(--app-viewport-height,100dvh)
        -
        270px
    ) !important;
    min-height:520px !important;
    max-height:none !important;
}


/****************************************
 * PHONE WEB
 *
 * Keep stable V3.10 compact responsive UI.
 ****************************************/

.runtime-phone-web{
    --asiya-phone-web-layout:compact;
}



/****************************************
 * V3.11.1 CORRECTION
 *
 * Preserve runtime separation, but restore
 * the polished V3.10 Employee Home geometry.
 ****************************************/

/* Installed Employee Home — restore V3.10 proportions */
.runtime-app .employee-app .app-header{
    padding:
        14px
        18px
        8px !important;
}

.runtime-app .employee-app .app-logo{
    width:118px !important;
    max-width:32vw !important;
}

.runtime-app .employee-app .user-name{
    font-size:18px !important;
}

.runtime-app .employee-app .attendance-area{
    flex:0 0 auto !important;
    width:100%;
    padding:
        44px
        var(--employee-page-gutter)
        18px !important;
    justify-content:flex-start !important;
    box-sizing:border-box;
}

.runtime-app .employee-app .attendance-status-card{
    padding:
        30px
        20px !important;
    border-radius:18px !important;
}

.runtime-app .employee-app .attendance-status{
    font-size:34px !important;
}

.runtime-app .employee-app .attendance-hours{
    font-size:34px !important;
}

.runtime-app .employee-app .punch-main{
    min-height:62px !important;
    font-size:21px !important;
    border-radius:16px !important;
}


/* Keep bottom actions easier to hit in BOTH mobile modes */
.runtime-phone-web .employee-app > .bottom-nav .nav-item,
.runtime-app .employee-app > .bottom-nav .nav-item{
    min-height:54px;
}

.runtime-phone-web .employee-app > .bottom-nav .nav-item span{
    font-size:27px !important;
}

.runtime-app .employee-app > .bottom-nav{
    min-height:82px !important;
}

.runtime-app .employee-app > .bottom-nav .nav-item span{
    font-size:28px !important;
}


/****************************************
 * FLOATING MODALS IN INSTALLED APP
 *
 * Restore the professional floating modal
 * instead of a stretched/broken sheet.
 ****************************************/

.runtime-app .modal-overlay{
    align-items:center !important;
    justify-content:center !important;

    padding:
        max(
            env(safe-area-inset-top,0px),
            16px
        )
        16px
        max(
            env(safe-area-inset-bottom,0px),
            16px
        );

    box-sizing:border-box;
}

.runtime-app .modal-window{
    width:min(
        100%,
        500px
    ) !important;

    max-height:
        min(
            84dvh,
            720px
        );

    overflow-y:auto;

    box-sizing:border-box;

    border-radius:24px !important;

    padding:24px !important;

    animation:
        appModalPop
        .18s
        ease-out
        forwards !important;
}

@keyframes appModalPop{

    from{
        transform:scale(.97);
        opacity:.75;
    }

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

}

.runtime-app .settings-modal{
    width:100% !important;
    max-width:none !important;
}


/****************************************
 * MANAGEMENT APP SCROLL — HARDENED
 ****************************************/

html.runtime-app,
html.runtime-app body{
    height:100%;
    overflow:hidden;
}

html.runtime-app body > #app{
    height:
        var(
            --app-viewport-height,
            100dvh
        );

    min-height:0 !important;
    overflow:hidden;
}

.runtime-app .management-app{
    width:100%;
    height:100% !important;
    min-height:0 !important;
    max-height:100%;

    display:flex !important;
    flex-direction:column !important;

    overflow:hidden !important;
}

.runtime-app .management-main-content{
    position:relative;

    flex:
        1
        1
        0 !important;

    min-height:0 !important;
    height:auto !important;

    overflow-y:scroll !important;
    overflow-x:hidden !important;

    touch-action:pan-y !important;
    -webkit-overflow-scrolling:touch;

    overscroll-behavior-y:contain;

    padding-bottom:
        104px !important;
}

.runtime-app .management-bottom-nav{
    flex:
        0
        0
        auto !important;
}


/****************************************
 * MANAGEMENT EMPLOYEES
 ****************************************/

.runtime-app .management-employees-page,
.runtime-phone-web .management-employees-page{
    min-height:auto !important;
}


/****************************************
 * MANAGEMENT MAP — BOTH MOBILE MODES
 ****************************************/

.runtime-phone-web .management-sites-map-container,
.runtime-app .management-sites-map-container{
    height:
        calc(
            var(
                --app-viewport-height,
                100dvh
            )
            -
            250px
        ) !important;

    min-height:
        480px !important;

    max-height:none !important;
}



/****************************************
 * V3.12 EMPLOYEE INSTALLED APP POLISH
 *
 * Phone Web and PC are intentionally
 * unchanged.
 ****************************************/

.employee-header-settings{
    display:none;
}


.runtime-app .app-header{
    position:relative;
}


.runtime-app .employee-header-settings{
    display:flex;

    position:absolute;

    top:max(
        env(safe-area-inset-top,0px),
        12px
    );

    right:14px;

    width:48px;
    height:48px;

    align-items:center;
    justify-content:center;

    padding:0;

    border:0;

    background:transparent;

    box-shadow:none;

    color:inherit;

    font-size:27px;
    line-height:1;

    -webkit-tap-highlight-color:transparent;

    touch-action:manipulation;
}


/* Make the logged-in identity unmistakable. */
.runtime-app .employee-app
.greeting-text{
    margin-top:8px;

    font-size:24px !important;
    font-weight:700;

    line-height:1.2;

    text-align:center;
}


/* Use the useful center of the phone. */
.runtime-app .employee-app
.attendance-area{
    flex:
        1
        1
        auto !important;

    min-height:0;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center !important;

    padding:
        18px
        var(--employee-page-gutter)
        calc(
            var(--employee-nav-height)
            +
            22px
        ) !important;
}


/* Attendance and Punch must align perfectly. */
.runtime-app .employee-app
.attendance-status-card,
.runtime-app .employee-app
.punch-main{
    width:min(
        calc(
            100%
            -
            2 * var(--employee-page-gutter)
        ),
        var(--employee-content-max)
    ) !important;

    max-width:
        var(--employee-content-max)
        !important;

    box-sizing:border-box;
}


.runtime-app .employee-app
.punch-main{
    min-height:64px !important;

    margin:
        18px
        auto
        0 !important;

    font-size:22px !important;
}


/****************************************
 * THREE-ITEM APP BOTTOM NAV
 *
 * Documents | Company Logo/Home | History
 ****************************************/

.runtime-app .employee-app
> .bottom-nav{
    min-height:94px !important;

    display:grid !important;

    grid-template-columns:
        1fr
        1fr
        1fr;

    align-items:center;

    gap:8px;

    padding:
        8px
        16px
        max(
            env(safe-area-inset-bottom,0px),
            10px
        ) !important;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-settings{
    display:none !important;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-documents{
    order:1;

    width:100%;
    min-height:66px;

    justify-self:stretch;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-home{
    order:2;

    position:static !important;

    justify-self:center;

    width:74px !important;
    height:74px !important;

    margin:0 !important;

    transform:none !important;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-home
.nav-logo{
    width:62px !important;
    height:62px !important;

    object-fit:contain;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-history{
    order:3;

    width:100%;
    min-height:66px;

    justify-self:stretch;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-documents,
.runtime-app .employee-app
> .bottom-nav
.employee-nav-history{
    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:4px;

    font-size:15px !important;
}


.runtime-app .employee-app
> .bottom-nav
.employee-nav-documents span,
.runtime-app .employee-app
> .bottom-nav
.employee-nav-history span{
    font-size:32px !important;
    line-height:1;
}


/****************************************
 * REPORT BACKGROUND JOB INDICATOR
 ****************************************/

.asiya-report-job-indicator{
    position:fixed;

    left:50%;

    bottom:calc(
        96px
        +
        env(safe-area-inset-bottom,0px)
    );

    z-index:12000;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    gap:9px;

    max-width:min(
        90vw,
        520px
    );

    padding:11px 15px;

    box-sizing:border-box;

    border:1px solid #d0d5dd;

    border-radius:15px;

    background:rgba(255,255,255,.97);

    box-shadow:
        0
        6px
        24px
        rgba(0,0,0,.14);

    font-size:14px;
    font-weight:700;

    pointer-events:none;
}


.asiya-report-job-indicator.success{
    border-color:#a6d8b4;
}


.asiya-report-job-indicator.error{
    border-color:#e4a7a7;
}


.asiya-report-job-spinner{
    width:18px;
    height:18px;

    flex:0 0 auto;

    border:2px solid #d0d5dd;
    border-top-color:#2867c7;
    border-radius:50%;

    animation:
        asiyaReportSpin
        .75s
        linear
        infinite;
}


@keyframes asiyaReportSpin{

    to{
        transform:rotate(360deg);
    }

}


.runtime-phone-web
.asiya-report-job-indicator,
.runtime-pc
.asiya-report-job-indicator{
    bottom:22px;
}