/* Shared authentication shell — gives Register / Reset the same look as the Login page.
   Uses its own .ess-auth-* namespace (NOT Login's .ess-login-*) so it can never affect
   the Login page, and all Radzen input/button overrides are contained under .ess-auth-form. */

.ess-auth-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: var(--ess-color-surface-primary);
}

.ess-auth-container {
    display: flex;
    height: 100%;
    width: 100%;
}

/* LEFT — brand panel with building image */
.ess-auth-brand {
    position: relative;
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ess-spacing-8);
    background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/img/building.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow-y: auto;
    animation: authSlideInLeft 0.6s var(--ess-ease-out);
}

@keyframes authSlideInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ess-auth-brand__content {
    position: relative;
    z-index: 2;
    max-width: 500px;
    color: var(--ess-color-text-inverse);
    text-align: center;
}

@keyframes authFadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ess-auth-brand__title {
    margin: 0 0 var(--ess-spacing-4);
    font-size: var(--ess-font-size-4xl);
    font-weight: var(--ess-font-weight-bold);
    line-height: var(--ess-line-height-tight);
    animation: authFadeInDown 0.8s var(--ess-ease-out) 0.3s both;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.ess-auth-brand__features {
    display: flex;
    flex-direction: column;
    gap: var(--ess-spacing-4);
    margin-block-start: var(--ess-spacing-8);
    animation: authFadeInDown 0.8s var(--ess-ease-out) 0.5s both;
}

.ess-auth-feature {
    display: flex;
    align-items: center;
    gap: var(--ess-spacing-3);
    font-size: var(--ess-font-size-lg);
    opacity: 0.95;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.ess-auth-feature i {
    font-size: var(--ess-font-size-2xl);
    color: rgba(255, 255, 255, 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

/* RIGHT — form card */
.ess-auth-form-wrapper {
    flex: 0 0 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ess-spacing-6);
    background-color: var(--ess-color-surface-primary);
    overflow-y: auto;
    animation: authSlideInRight 0.6s var(--ess-ease-out);
}

@keyframes authSlideInRight {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.ess-auth-form {
    width: 100%;
    max-width: 440px;
    padding: var(--ess-spacing-6);
    background-color: var(--ess-color-surface-elevated);
    border-radius: var(--ess-radius-2xl);
    box-shadow: var(--ess-shadow-2xl);
    animation: authFadeInUp 0.8s var(--ess-ease-out) 0.2s both;
    margin: auto;
}

@keyframes authFadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ess-auth-logo-container {
    text-align: center;
    padding-block-end: var(--ess-spacing-6);
    margin-block-end: var(--ess-spacing-5);
    border-block-end: 1px solid var(--ess-color-border-subtle);
}

.ess-auth-logo {
    max-width: 160px;
    height: auto;
    display: inline-block;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.08));
}

.ess-auth-header {
    margin-block-end: var(--ess-spacing-5);
    text-align: center;
}

.ess-auth-title {
    margin: 0;
    font-size: var(--ess-font-size-3xl);
    font-weight: var(--ess-font-weight-bold);
    color: var(--ess-color-text-primary);
}

/* ---- WorkerCredentialsReset fields / buttons / links inside the card ---- */

.ess-auth-form .form-group {
    width: 100%;
    margin: 0 0 18px 0;
    position: relative;
}

/* Inputs (RadzenTextBox / RadzenPassword render an <input> that also carries form-control) */
.ess-auth-form .form-control,
.ess-auth-form .rz-textbox,
.ess-auth-form input.rz-textbox {
    width: 100% !important;
    height: 48px !important;
    padding: 12px 14px !important;
    font-size: var(--ess-font-size-base) !important;
    border: 2px solid var(--ess-color-border-default) !important;
    border-radius: var(--ess-radius-lg) !important;
    background: var(--ess-color-surface-elevated) !important;
    box-shadow: none !important;
    transition: var(--ess-transition-all) !important;
}

.ess-auth-form .form-control:focus,
.ess-auth-form .rz-textbox:focus,
.ess-auth-form input.rz-textbox:focus {
    border-color: var(--ess-color-primary) !important;
    box-shadow: 0 0 0 4px rgba(46, 51, 134, 0.1) !important;
    outline: none !important;
}

/* Primary buttons (Submit / Verify / Resend) */
.ess-auth-form .rz-button {
    width: 100% !important;
    height: 48px !important;
    margin: 6px 0 0 0 !important;
    font-size: 16px !important;
    font-weight: var(--ess-font-weight-semibold) !important;
    color: #fff !important;
    background-color: var(--ess-color-primary) !important;
    border: none !important;
    border-radius: var(--ess-radius-xl) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s !important;
}

.ess-auth-form .rz-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.ess-auth-form .rz-button:disabled {
    opacity: 0.6 !important;
}

/* Links (e.g. "Already a member?") */
.ess-auth-form a,
.ess-auth-form .rz-link {
    color: var(--ess-color-primary) !important;
    font-size: var(--ess-font-size-sm);
    font-weight: var(--ess-font-weight-medium);
    text-decoration: none;
    display: inline-block;
    margin-top: 4px;
}

.ess-auth-form a:hover,
.ess-auth-form .rz-link:hover {
    text-decoration: underline;
}

/* Stage description heading inside the steps (acts as the subtitle) */
.ess-auth-form h5 {
    font-size: var(--ess-font-size-base);
    color: var(--ess-color-text-secondary);
    font-weight: var(--ess-font-weight-medium);
    text-align: center;
    margin-block-end: var(--ess-spacing-4);
}

/* Success stage text */
.ess-auth-form .text-muted {
    color: var(--ess-color-text-secondary) !important;
    text-align: center;
}

/* ---- Responsive: hide brand panel, center the card ---- */
@media (max-width: 768px) {
    .ess-auth-container { flex-direction: column; }
    .ess-auth-brand { display: none !important; }
    .ess-auth-form-wrapper {
        flex: 1 !important;
        width: 100% !important;
        padding: 20px !important;
    }
    .ess-auth-form {
        max-width: 360px !important;
        padding: 24px 20px !important;
        animation: none !important;
    }
    .ess-auth-title { font-size: 22px !important; }
}