/* MASAR HR Mobile Login Polish
   ارفع الملف داخل: public_html/assets/login-mobile-polish.css
   اربطه آخر CSS في login.php:
   <link rel="stylesheet" href="/assets/login-mobile-polish.css?v=1">
*/

@media (max-width: 900px) {
    html,
    body {
        width: 100% !important;
        min-height: 100% !important;
        margin: 0 !important;
        overflow-x: hidden !important;
    }

    body {
        background: #2A0308 !important;
    }

    .login-page {
        width: 100% !important;
        min-height: 100svh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 12px !important;
        padding: 20px 18px 24px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .login-brand {
        width: 100% !important;
        max-width: 420px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 auto 4px !important;
        padding: 0 !important;
        min-height: auto !important;
    }

    .login-logo {
        width: auto !important;
        height: auto !important;
        max-width: 122px !important;
        max-height: 92px !important;
        object-fit: contain !important;
        margin: 0 auto 10px !important;
        display: block !important;
    }

    .login-brand h1 {
        font-size: clamp(34px, 10vw, 48px) !important;
        line-height: 1 !important;
        margin: 0 !important;
        letter-spacing: 1px !important;
        text-align: center !important;
        white-space: nowrap !important;
    }

    .login-form-wrap {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        justify-self: auto !important;
    }

    .login-card {
        width: 100% !important;
        max-width: 430px !important;
        margin: 0 auto !important;
        padding: 26px 22px 24px !important;
        border-radius: 26px !important;
        box-sizing: border-box !important;
        background: rgba(255, 251, 248, 0.93) !important;
        backdrop-filter: blur(14px) !important;
    }

    .login-card h2 {
        font-size: clamp(28px, 8vw, 38px) !important;
        line-height: 1.15 !important;
        margin: 0 0 12px !important;
        text-align: center !important;
    }

    .login-card p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        margin: 0 0 14px !important;
        text-align: center !important;
    }

    .login-card label {
        display: block !important;
        font-size: 15px !important;
        margin: 12px 0 7px !important;
        text-align: right !important;
    }

    .login-card .input,
    .login-card input {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        padding: 0 18px !important;
        border-radius: 20px !important;
        font-size: 18px !important;
        box-sizing: border-box !important;
        margin: 0 !important;
        text-align: center !important;
    }

    .login-card .btn,
    .login-card button {
        width: 100% !important;
        height: 54px !important;
        min-height: 54px !important;
        border-radius: 20px !important;
        font-size: 17px !important;
        margin-top: 18px !important;
    }

    .alert {
        width: 100% !important;
        box-sizing: border-box !important;
        font-size: 14px !important;
        border-radius: 16px !important;
        margin: 10px 0 !important;
    }

    .masar-bg {
        width: 100vw !important;
        min-height: 100svh !important;
        overflow: hidden !important;
    }
}

@media (max-width: 380px) {
    .login-page {
        padding: 14px 12px 18px !important;
        gap: 8px !important;
    }

    .login-logo {
        max-width: 100px !important;
        max-height: 76px !important;
        margin-bottom: 8px !important;
    }

    .login-brand h1 {
        font-size: 32px !important;
    }

    .login-card {
        padding: 22px 18px 20px !important;
        border-radius: 24px !important;
    }

    .login-card h2 {
        font-size: 28px !important;
    }

    .login-card .input,
    .login-card input,
    .login-card .btn,
    .login-card button {
        height: 50px !important;
        min-height: 50px !important;
        border-radius: 18px !important;
    }
}