/* Hide Frappe's original authentication card before the Q Org shell is mounted.
   The page background remains visible, so the legacy card cannot flash on a cold load. */
html:not([data-qorg-login-ready="1"]) body:has(.for-login) .for-login,
html:not([data-qorg-login-ready="1"]) body:has(.for-forgot) .for-forgot,
html:not([data-qorg-login-ready="1"]) body:has(.for-signup) .for-signup,
html:not([data-qorg-login-ready="1"]) body:has(.for-email-login) .for-email-login,
html:not([data-qorg-login-ready="1"]) body:has(.for-login-with-email-link) .for-login-with-email-link,
html:not([data-qorg-login-ready="1"]) body:has(.for-reset-password) .for-reset-password {
    visibility: hidden !important;
}

html[data-qorg-login-ready="1"] .qorg-login-shell .for-login,
html[data-qorg-login-ready="1"] .qorg-login-shell .for-forgot,
html[data-qorg-login-ready="1"] .qorg-login-shell .for-signup,
html[data-qorg-login-ready="1"] .qorg-login-shell .for-email-login,
html[data-qorg-login-ready="1"] .qorg-login-shell .for-login-with-email-link,
html[data-qorg-login-ready="1"] .qorg-login-shell .for-reset-password {
    visibility: visible !important;
}

html,
body {
    margin: 0 !important;
    padding: 0 !important;
}

body .page-content-wrapper,
body .page_content,
body .page-content,
body main.page-content,
body .page-content-wrapper > .container,
body .page-content-wrapper .container,
body .page_content > .container,
body main.container {
    width: 100% !important;
    max-width: none !important;
    min-height: 100svh !important;
    margin: 0 !important;
    padding: 0 !important;
}

.qorg-login-shell,
.qorg-login-shell[data-qorg-direction="rtl"],
.qorg-login-shell[data-qorg-direction="ltr"] {
    direction: ltr !important;
    grid-template-areas: "visual form" !important;
    align-items: stretch;
    margin: 0 !important;
}

.qorg-login-shell[data-qorg-direction="rtl"] {
    grid-template-areas: "form visual" !important;
}

.qorg-login-shell .qorg-login-visual {
    grid-area: visual !important;
    order: initial !important;
}

.qorg-login-shell .qorg-login-form-panel {
    grid-area: form !important;
    order: initial !important;
}

.qorg-login-shell[data-qorg-direction="rtl"] .qorg-login-form-panel,
.qorg-login-shell[data-qorg-direction="rtl"] .qorg-login-form-host,
.qorg-login-shell[data-qorg-direction="rtl"] .page-card,
.qorg-login-shell[data-qorg-direction="rtl"] .page-card-head,
.qorg-login-shell[data-qorg-direction="rtl"] .page-card-body,
.qorg-login-shell[data-qorg-direction="rtl"] .page-card-actions,
.qorg-login-shell[data-qorg-direction="rtl"] .form-group {
    direction: rtl !important;
    text-align: right !important;
}

.qorg-login-shell[data-qorg-direction="ltr"] .qorg-login-form-panel,
.qorg-login-shell[data-qorg-direction="ltr"] .qorg-login-form-host,
.qorg-login-shell[data-qorg-direction="ltr"] .page-card,
.qorg-login-shell[data-qorg-direction="ltr"] .page-card-head,
.qorg-login-shell[data-qorg-direction="ltr"] .page-card-body,
.qorg-login-shell[data-qorg-direction="ltr"] .page-card-actions,
.qorg-login-shell[data-qorg-direction="ltr"] .form-group {
    direction: ltr !important;
    text-align: left !important;
}

.qorg-login-shell .for-login,
.qorg-login-shell .for-forgot,
.qorg-login-shell .for-signup,
.qorg-login-shell .for-email-login,
.qorg-login-shell .for-login-with-email-link,
.qorg-login-shell .for-reset-password {
    width: 100% !important;
    max-width: 590px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

.qorg-login-shell .page-card {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.qorg-login-shell .form-control {
    border-color: var(--border-color) !important;
    border-radius: var(--border-radius) !important;
    background: var(--control-bg) !important;
    color: var(--text-color) !important;
}

.qorg-login-shell .for-forgot .page-card-actions .btn,
.qorg-login-shell .for-forgot .page-card-actions button,
.qorg-login-shell .for-forgot button[type="submit"],
.qorg-login-shell .for-forgot .btn-forgot,
.qorg-login-shell .for-forgot .es-button[data-variant="solid"],
.qorg-login-shell .for-signup button[type="submit"],
.qorg-login-shell .for-email-login button[type="submit"],
.qorg-login-shell .for-login-with-email-link button[type="submit"],
.qorg-login-shell .for-reset-password button[type="submit"] {
    width: 100% !important;
    min-height: 56px !important;
    border: 1px solid var(--primary-color) !important;
    border-radius: var(--border-radius) !important;
    background: var(--primary-color) !important;
    background-image: none !important;
    color: var(--primary-btn-color, #fff) !important;
    font-family: var(--qorg-font-family, inherit) !important;
    font-size: var(--font-size-base, 14px) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

@media (max-width: 920px) {
    .qorg-login-shell,
    .qorg-login-shell[data-qorg-direction="rtl"],
    .qorg-login-shell[data-qorg-direction="ltr"] {
        grid-template-areas: "form" "visual" !important;
        min-height: 100svh !important;
        overflow-x: clip;
    }

    .qorg-login-form-panel {
        min-height: auto !important;
        padding: 86px 20px 28px !important;
    }

    /* The shell owns viewport height on mobile. Authentication cards must size to content,
       otherwise Frappe's page-card min-height adds an empty screen below the action button. */
    .qorg-login-shell .for-login .page-card,
    .qorg-login-shell .for-forgot .page-card,
    .qorg-login-shell .for-login-with-email-link .page-card,
    .qorg-login-shell .for-signup .page-card,
    .qorg-login-shell .for-email-login .page-card,
    .qorg-login-shell .for-reset-password .page-card {
        min-height: 0 !important;
        height: auto !important;
        padding: 0 !important;
    }

    .qorg-login-form-host .page-card-head,
    .qorg-login-form-panel .page-card-head {
        display: flex;
        flex-direction: column;
        align-items: center !important;
        margin-bottom: 0 !important;
        text-align: center !important;
    }

    .qorg-login-form-host .page-card-head h1,
    .qorg-login-form-host .page-card-head h2,
    .qorg-login-form-host .page-card-head h4,
    .qorg-login-form-host .page-card-head p,
    .qorg-login-form-panel .page-card-head h1,
    .qorg-login-form-panel .page-card-head h2,
    .qorg-login-form-panel .page-card-head h4,
    .qorg-login-form-panel .page-card-head p {
        width: 100%;
        margin-inline: auto !important;
        text-align: center !important;
    }

    .qorg-login-form-host .page-card-head img,
    .qorg-login-form-panel .page-card-head img,
    .qorg-login-form-host .page-card-head .app-logo,
    .qorg-login-form-panel .page-card-head .app-logo {
        margin-inline: auto !important;
        align-self: center !important;
    }

    .qorg-login-utility {
        inset-block-start: 16px !important;
        inset-inline: 16px !important;
        width: auto !important;
        max-width: calc(100vw - 32px);
    }

    .qorg-language-menu {
        width: min(100%, 260px);
        margin-inline-start: auto;
    }

    .qorg-language-trigger {
        width: 100%;
        min-width: 0 !important;
    }

    .qorg-language-options {
        position: absolute;
        inset-inline: auto 0 !important;
        width: min(260px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }

    .qorg-login-visual {
        position: relative !important;
        margin-bottom: 0 !important;
    }

    .qorg-login-visual__header {
        position: absolute !important;
        inset-block-start: 18px !important;
        inset-inline: 18px !important;
        align-items: flex-start !important;
        transform: none !important;
    }

    .qorg-login-return {
        position: relative !important;
        inset: auto !important;
        margin: 0 !important;
        transform: none !important;
    }
}

@media (max-width: 575.98px) {
    .qorg-login-form-panel {
        padding: 82px 16px 24px !important;
    }

    .qorg-language-options {
        inset-inline-end: 0 !important;
        inset-inline-start: auto !important;
    }
}