/* Qimma authentication layout — full-height account card and runtime theme support. */
body.auth-page-with-hero {
    overflow-x: hidden;
    background: var(--theme-bg, #f4f7f8);
}

body.auth-page-with-hero .q-public-main,
body.auth-page-with-hero main.q-public-main {
    width: 100%;
    max-width: none;
    min-height: 100svh;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    background: transparent !important;
}

.q-auth-hero-layout,
.q-auth-hero-layout * { box-sizing: border-box; }

/* The login card follows the compact, logo-forward reference layout. */
.auth-login-page .q-auth-hero-layout {
    grid-template-columns: minmax(0, 1fr) minmax(420px, 560px);
}
.auth-login-page .q-auth-hero-layout .auth-wrap.q-auth-page {
    max-width: 560px;
}

.q-auth-hero-layout {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 520px);
    grid-template-areas: "visual form";
    align-items: stretch;
    gap: clamp(18px, 2vw, 30px);
    width: 100%;
    min-height: 100svh;
    margin: 0;
    padding: 14px clamp(14px, 1.7vw, 26px) 14px clamp(24px, 3vw, 56px);
    direction: ltr;
    overflow: hidden;
    background: transparent;
}

/* The photo remains a clean, untinted background. */
.q-auth-page-background {
    /* Keep the backdrop aligned to the viewport, not the intrinsic height of the form card. */
    position: fixed;
    z-index: -1;
    inset: 0;
    height: 100vh;
    height: 100svh;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    pointer-events: none;
    background: var(--theme-bg, #f4f7f8);
    contain: paint;
}
.q-auth-page-background img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    /* Fill the viewport from edge to edge. On common screens the extra width is cropped,
       keeping the top and bottom of the wide illustration visible. */
    object-fit: cover;
    object-position: left center;
}

/* For ultra-wide displays, prefer the complete illustration over any vertical crop. */
@media (min-aspect-ratio: 27/10) {
    .q-auth-page-background img { object-fit: contain; object-position: left center; }
}

.q-auth-form-region {
    grid-area: form;
    display: flex;
    align-self: stretch;
    min-width: 0;
    width: 100%;
    align-items: stretch;
    justify-content: stretch;
    direction: inherit;
}
html[dir="rtl"] .q-auth-form-region { direction: rtl; }
html[dir="ltr"] .q-auth-form-region { direction: ltr; }

.q-auth-hero-layout .auth-wrap.q-auth-page {
    display: flex;
    width: 100%;
    max-width: 520px;
    min-height: 100%;
    margin: 0;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    background: transparent;
}

.q-auth-hero-layout .auth-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    min-height: 100%;
    margin: 0;
    padding: clamp(24px, 2.6vw, 42px);
    border: 1px solid var(--theme-border, #dce5eb);
    border-top: 1px solid var(--theme-border, #dce5eb);
    border-radius: 26px;
    background: var(--theme-surface, #fff);
    color: var(--theme-text, #20343f);
    box-shadow: var(--theme-shadow-lg, 0 18px 46px rgba(20, 45, 65, .16));
    backdrop-filter: blur(7px);
}

/* Login is intentionally a screen-height panel; registration remains independently scrollable. */
.auth-login-page .q-auth-hero-layout .auth-card {
    min-height: calc(100svh - 28px);
}
.auth-register-page .q-auth-hero-layout .auth-card {
    min-height: calc(100svh - 28px);
}

.q-auth-card-topbar {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    margin: 0 0 clamp(12px, 2vh, 24px);
}
.q-auth-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    border: 1px solid var(--theme-border, #dce5eb);
    border-radius: 999px;
    background: var(--theme-surface-soft, #f7fafb);
    color: var(--theme-text-soft, #526773);
}
.q-auth-language-switch a {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--theme-text-soft, #526773);
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.3;
    transition: background-color .16s ease, color .16s ease;
}
.q-auth-language-switch a:hover { background: var(--theme-primary-soft, #edf5f6); color: var(--theme-primary, #0d6e4f); }
.q-auth-language-switch a.is-active {
    background: var(--theme-primary, #0d6e4f);
    color: #fff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
}

.auth-login-page .q-auth-hero-layout .q-auth-card-content {
    justify-content: flex-start;
}
.auth-login-page .q-auth-hero-layout .auth-card-logo {
    margin: clamp(12px, 2vh, 20px) 0 clamp(16px, 2.4vh, 24px);
}
.auth-login-page .q-auth-brand-link img,
.auth-login-page .q-auth-brand-link svg.q-brand {
    max-width: min(100%, 270px);
    max-height: 94px;
}
.auth-login-page .q-auth-stacked-brand {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    line-height: 0;
}
.auth-login-page .q-auth-stacked-brand .q-auth-brand-icon {
    display: block;
    width: auto;
    height: clamp(54px, 7vh, 72px);
    max-width: 92px;
    object-fit: contain;
}
.auth-login-page .q-auth-stacked-brand .q-auth-brand-name {
    display: block;
    width: clamp(132px, 15vw, 164px);
    height: auto;
    max-height: 68px;
    object-fit: contain;
}

.q-auth-card-content {
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 0;
}
.auth-register-page .q-auth-card-content { justify-content: flex-start; }

.q-auth-hero-layout .auth-card-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 clamp(18px, 2.5vh, 28px);
}
.q-auth-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    color: var(--theme-primary, #0d6e4f);
    text-decoration: none;
    border-radius: 10px;
}
.q-auth-brand-link img,
.q-auth-brand-link svg.q-brand {
    display: block;
    width: auto;
    max-width: min(100%, 210px);
    height: auto;
    max-height: 66px;
    object-fit: contain;
}
.q-auth-brand-link span { color: var(--theme-primary, #0d6e4f); }
.q-auth-brand-link:hover { opacity: .9; }
.q-auth-brand-link:focus-visible,
.q-auth-language-switch a:focus-visible {
    outline: 3px solid var(--theme-accent, #f4a300);
    outline-offset: 3px;
}

.q-auth-hero-layout .auth-card h2 {
    margin: 0 0 clamp(18px, 2.4vh, 28px);
    color: var(--theme-text, #20343f);
    font-size: clamp(25px, 2.2vw, 32px);
    font-weight: 900;
    line-height: 1.35;
    text-align: center;
}
.q-auth-hero-layout .auth-card label {
    color: var(--theme-text, #20343f);
    font-weight: 750;
}
.q-auth-hero-layout .form-control {
    width: 100%;
    min-height: 47px;
    border: 1px solid var(--theme-border-strong, #d2dee5);
    border-radius: 12px;
    background: var(--theme-surface-soft, #f7fafb);
    color: var(--theme-text, #20343f);
    box-shadow: none;
}
.q-auth-hero-layout .form-control::placeholder { color: var(--theme-muted, #76858e); opacity: 1; }
.q-auth-hero-layout .form-control:focus {
    border-color: var(--theme-primary, #0d6e4f);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-primary, #0d6e4f) 14%, transparent);
    outline: none;
}
.q-auth-hero-layout .btn-primary {
    border-color: var(--theme-primary, #0d6e4f);
    background: var(--theme-primary, #0d6e4f);
    color: #fff;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--theme-primary, #0d6e4f) 18%, transparent);
}
.q-auth-hero-layout .btn-primary:hover {
    border-color: var(--theme-primary-dark, #07543c);
    background: var(--theme-primary-dark, #07543c);
}
.q-auth-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 8px 0 22px;
    color: var(--theme-muted, #71818a);
    font-size: 14px;
}
.q-auth-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    cursor: pointer;
    user-select: none;
}
.q-auth-remember input {
    width: 17px;
    height: 17px;
    margin: 0;
    accent-color: var(--theme-primary, #0d6e4f);
    cursor: pointer;
}
.q-auth-remember span {
    color: var(--theme-text-soft, #526773);
    font-weight: 650;
}
.q-auth-hero-layout .q-auth-forgot-link,
.q-auth-hero-layout .q-link,
.q-auth-hero-layout .auth-footer a {
    color: var(--theme-primary, #0d6e4f);
    font-weight: 800;
    text-decoration: none;
}
.q-auth-hero-layout .q-auth-forgot-link:hover,
.q-auth-hero-layout .q-link:hover,
.q-auth-hero-layout .auth-footer a:hover { color: var(--theme-primary-dark, #07543c); text-decoration: underline; }
.q-auth-hero-layout .auth-footer {
    margin-top: clamp(18px, 2.4vh, 28px);
    padding-top: clamp(15px, 2vh, 22px);
    border-top: 1px solid var(--theme-border, #dce5eb);
    color: var(--theme-muted, #71818a);
    text-align: center;
    line-height: 1.8;
}
.q-auth-hero-layout .alert-error { border-color: var(--theme-accent, #f4a300); }

/* Registration has more fields, so keep it top-aligned and naturally scrollable. */
.auth-register-page .q-auth-hero-layout .auth-card { padding-bottom: clamp(24px, 3vw, 42px); }
.auth-register-page .q-auth-hero-layout .auth-card h2 { margin-bottom: 18px; }
.auth-register-page .q-auth-hero-layout .auth-card-logo { margin-bottom: 15px; }
.auth-register-page .q-auth-hero-layout .q-auth-card-content { flex: 0 0 auto; }

/* No site header/footer on the dedicated authentication pages. */
body.auth-page-with-hero .site-header,
body.auth-page-with-hero .site-header-v2,
body.auth-page-with-hero .top-strip,
body.auth-page-with-hero .q-top-strip,
body.auth-page-with-hero .q-public-header,
body.auth-page-with-hero .q-site-footer,
body.auth-page-with-hero .site-footer-v2,
body.auth-page-with-hero .q-footer-compact-v1 { display: none !important; }

@media (max-width: 1100px) {
    .q-auth-hero-layout {
        grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
        gap: 16px;
        padding-left: 22px;
        padding-right: 14px;
    }
    .q-auth-hero-layout .auth-card { padding: 26px; }
    .auth-login-page .q-auth-hero-layout { grid-template-columns: minmax(0, 1fr) minmax(380px, 500px); }
    .auth-login-page .q-auth-hero-layout .auth-wrap.q-auth-page { max-width: 500px; }
}

@media (max-width: 820px) {
    .auth-login-page .q-auth-hero-layout { grid-template-columns: minmax(0, 1fr); }
    .q-auth-hero-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "form";
        min-height: 100svh;
        padding: 12px;
        gap: 0;
    }
    .q-auth-form-region { width: 100%; justify-content: center; }
    .q-auth-hero-layout .auth-wrap.q-auth-page { width: 100%; max-width: 580px; min-height: calc(100svh - 24px); }
    .auth-login-page .q-auth-hero-layout .auth-card { min-height: calc(100svh - 24px); }
    .auth-register-page .q-auth-hero-layout .auth-card { min-height: calc(100svh - 24px); }
    .q-auth-hero-layout .auth-card { border-radius: 22px; padding: 25px 23px; }
    .auth-login-page .q-auth-hero-layout .auth-card { min-height: calc(100svh - 24px); }
    .auth-login-page .q-auth-brand-link img,
    .auth-login-page .q-auth-brand-link svg.q-brand { max-width: min(100%, 245px); max-height: 88px; }
    .q-auth-hero-layout .auth-card h2 { font-size: 27px; }
}

@media (max-width: 540px) {
    .q-auth-hero-layout { padding: 8px; }
    .q-auth-hero-layout .auth-wrap.q-auth-page { min-height: calc(100svh - 16px); }
    .auth-login-page .q-auth-hero-layout .auth-card,
    .auth-register-page .q-auth-hero-layout .auth-card { min-height: calc(100svh - 16px); }
    .q-auth-hero-layout .auth-card { padding: 20px 17px; border-radius: 18px; }
    .auth-login-page .q-auth-hero-layout .auth-card { min-height: calc(100svh - 16px); }
    .auth-login-page .q-auth-hero-layout .q-auth-card-content { justify-content: flex-start; }
    .auth-login-page .q-auth-brand-link img,
    .auth-login-page .q-auth-brand-link svg.q-brand { max-width: min(100%, 230px); max-height: 82px; }
    .auth-login-page .q-auth-stacked-brand .q-auth-brand-icon { height: 58px; max-width: 78px; }
    .auth-login-page .q-auth-stacked-brand .q-auth-brand-name { width: 142px; max-height: 54px; }
    .q-auth-card-topbar { margin-bottom: 12px; }
    .q-auth-language-switch { padding: 3px; }
    .q-auth-language-switch a { min-height: 31px; padding: 5px 10px; font-size: 11px; }
    .q-auth-hero-layout .auth-card-logo { margin-bottom: 15px; }
    .q-auth-brand-link img,
    .q-auth-brand-link svg.q-brand { max-width: min(100%, 180px); max-height: 58px; }
    .q-auth-hero-layout .auth-card h2 { margin-bottom: 18px; font-size: 24px; }
    .q-auth-hero-layout .form-control { min-height: 44px; }
}

@media (max-height: 700px) and (min-width: 821px) {
    .auth-login-page .q-auth-hero-layout .auth-card { padding-top: 18px; padding-bottom: 18px; }
    .auth-login-page .q-auth-hero-layout .auth-card-logo { margin-bottom: 12px; }
    .auth-login-page .q-auth-hero-layout .auth-card h2 { margin-bottom: 14px; }
    .auth-login-page .q-auth-hero-layout .auth-footer { margin-top: 12px; padding-top: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .q-auth-language-switch a { transition: none; }
}


/* Auth inputs: concise placeholder-led presentation with accessible labels. */
.q-auth-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}
.q-auth-placeholder-group { margin-bottom: clamp(15px, 2vh, 22px); }
.q-auth-hero-layout .q-auth-placeholder-group .form-control {
    min-height: 54px;
    padding: 14px 16px;
    font-size: 15px;
    line-height: 1.4;
}
.q-auth-hero-layout .q-auth-placeholder-group .form-control::placeholder {
    color: var(--theme-muted, #718096);
    opacity: 1;
}
.q-auth-hero-layout .btn-primary,
.q-auth-hero-layout .btn-primary:visited {
    color: #fff !important;
}
.q-auth-hero-layout .btn-primary:disabled,
.q-auth-hero-layout .btn-primary[disabled] {
    color: #fff !important;
    opacity: .72;
}
@media (max-width: 540px) {
    .q-auth-hero-layout .q-auth-placeholder-group .form-control { min-height: 50px; }
}


/* Recovery pages share the live theme palette used by the login and registration cards. */
.q-auth-recovery-help {
    margin: 0 0 20px;
    color: var(--theme-text-soft, #526773);
    font-size: 14px;
    line-height: 1.9;
}
.q-auth-recovery-page .auth-card .alert-info {
    border-color: var(--theme-border, #dce5eb);
    background: var(--theme-primary-subtle, #f4f8fa);
    color: var(--theme-text, #20343f);
}
.q-auth-recovery-page .auth-card .alert-success {
    border-color: var(--theme-border, #dce5eb);
    background: var(--theme-surface-soft, #f7fafb);
    color: var(--theme-text, #20343f);
}