/*
 * Modern auth screens (login, forgot password, 2FA, account activation).
 *
 * Faithfully mirrors the new React UI login (Passcreator.Frontend.UI) so the legacy Fluid auth
 * pages match its look & feel: a split-screen with a sky-blue decorative panel (photo behind a
 * diagonal gradient + a slowly morphing "blob" corner) and a clean white form panel with a
 * centered logo, and — crucially — the SAME typography (Be Vietnam Pro), form fields (label
 * above the input, no placeholder) and buttons (navy design-system button) as the new UI.
 *
 * Everything is scoped under the body class .auth-modern, which is only added for NON
 * white-label customers on opted-in templates (see PublicWithoutMenu.html), so white-label
 * logins and all other shared pages are completely unaffected.
 *
 * Values are lifted verbatim from the React design system (@passcreator/ui `ui.css` tokens and
 * tailwind.config.js): primary/navy #183D57 (hover = 90% opacity), sky #3CB6EA, border #d1d5db,
 * text #282828, muted #9ca3af, error #E53935; radius .375rem; input/button lg = 40px height,
 * 15px font; label = 14px / weight 500; base font 15px "Be Vietnam Pro".
 */

/* ---- Self-hosted Be Vietnam Pro (same .ttf files the React app uses) ---- */
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../Fonts/BeVietnamPro/BeVietnamPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../Fonts/BeVietnamPro/BeVietnamPro-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../Fonts/BeVietnamPro/BeVietnamPro-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../Fonts/BeVietnamPro/BeVietnamPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Be Vietnam Pro';
    src: url('../Fonts/BeVietnamPro/BeVietnamPro-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Apply the design-system font to the whole scope, including form controls (which don't inherit). */
.auth-modern,
.auth-modern button,
.auth-modern input,
.auth-modern select,
.auth-modern textarea,
.auth-modern .btn {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
}

.auth-modern,
.auth-modern.has-full-screen-bg {
    background: #ffffff;
    color: #282828;
    font-size: 15px;
    line-height: 1.5;
}

/* Full-viewport split-screen with a 1rem gutter (React `flex h-screen p-4`).
   `dvh` keeps the in-panel footer visible on mobile browsers whose URL bar inflates 100vh. */
.auth-modern .auth-modern-wrapper {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 16px;
    box-sizing: border-box;
    background: #ffffff;
}

/* ---- Left decorative panel (React `hidden w-1/2 p-8 lg:block`) ---- */
.auth-modern .auth-modern-visual {
    display: none;
    width: 50%;
    flex-shrink: 0;
    padding: 32px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .auth-modern .auth-modern-visual {
        display: block;
    }
}

/* Sky-blue card with a heavily rounded bottom-right corner (React `rounded-3xl rounded-br-[45%] bg-pc-sky shadow-xl`). */
.auth-modern .auth-modern-visual-card {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 24px;
    border-bottom-right-radius: 45%;
    background: #3CB6EA;
    padding: 32px;
    box-sizing: border-box;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Photo layer + morphing top-left corner (React `animate-tl-radius-alternate rounded-tl-[25%] bg-gray-900`). */
.auth-modern .auth-modern-visual-photo {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-top-left-radius: 25%;
    background: #111827;
    animation: auth-modern-radius-alternate 20s 4s ease alternate infinite;
}

.auth-modern .auth-modern-visual-photo img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* Diagonal gradient overlay + larger morphing corner (React `animate-tl-radius-alternate-lg rounded-tl-[50%] bg-gradient-to-tr from-black/80 to-white/70`). */
.auth-modern .auth-modern-visual-overlay {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    border-top-left-radius: 50%;
    background: linear-gradient(to top right, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.7));
    animation: auth-modern-radius-alternate-lg 20s ease alternate infinite;
}

@keyframes auth-modern-radius-alternate {
    0%, 100% { border-top-left-radius: 25%; }
    30% { border-top-left-radius: 15%; }
    70% { border-top-left-radius: 30%; }
}

@keyframes auth-modern-radius-alternate-lg {
    0%, 100% { border-top-left-radius: 40%; }
    30% { border-top-left-radius: 50%; }
    70% { border-top-left-radius: 35%; }
}

/* Users who prefer reduced motion get a static shape. */
@media (prefers-reduced-motion: reduce) {
    .auth-modern .auth-modern-visual-photo,
    .auth-modern .auth-modern-visual-overlay {
        animation: none;
    }
}

/* ---- Right form panel (React `flex h-full w-full flex-col p-8 lg:w-1/2`) ----
   Mobile-first: slimmer padding so the form gets the width; desktop restores the React p-8. */
.auth-modern .auth-modern-panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    flex-shrink: 0;
    padding: 16px;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    .auth-modern .auth-modern-panel {
        width: 50%;
        padding: 32px;
    }
}

/* Centered logo. Mobile-first: larger and with tighter margins so the form stays above the fold
   on phones; desktop restores the React proportions (`mx-auto mb-24 mt-12 w-2/5`). */
.auth-modern .auth-modern-logo {
    display: block;
    width: 55%;
    max-width: 260px;
    height: auto;
    margin: 16px auto 32px auto;
}

@media (min-width: 1024px) {
    .auth-modern .auth-modern-logo {
        width: 40%;
        max-width: 280px;
        margin: 48px auto 96px auto;
    }
}

/* The main area soaks up the leftover height so the footer sits at the panel bottom. */
.auth-modern .auth-modern-main {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Form/content column, horizontally centered directly under the logo (React form `self-center`,
   responsive widths); leftover panel height collects above the footer. */
.auth-modern .auth-modern-content {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
}

/* ---- Neutralise the legacy Bootstrap grid inside the panel so content stacks and centers ---- */
.auth-modern .auth-modern-content .row {
    margin-left: 0;
    margin-right: 0;
}

.auth-modern .auth-modern-content [class*="col-"] {
    width: 100%;
    float: none;
    margin-left: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Bootstrap's .form-horizontal gives every .form-group -15px side margins (normally compensated
   by the column padding removed above) — without this reset the inputs overflow the content column. */
.auth-modern .form-horizontal .form-group {
    margin-left: 0;
    margin-right: 0;
}

/* ---- Form box: drop the translucent-black card, use plain white background ---- */
.auth-modern .form-box {
    width: 100%;
    float: none;
    margin: 0;
}

.auth-modern .access-section {
    padding: 0;
}

.auth-modern .access-section .form-box .form-box-inner {
    background: transparent;
    padding: 0;
}

/* The new UI login has NO headline — hide the legacy "Login" / 2FA title. */
.auth-modern .access-section .form-box .title,
.auth-modern .form-box .title {
    display: none;
}

/* ---- Inputs: label ABOVE the field, no placeholder (matches the React `Input`) ---- */
.auth-modern .form-group {
    margin-bottom: 16px;
    position: static;
}

/* Reveal the previously screen-reader-only field label and style it like the design system
   (React label = `block text-sm font-medium text-theme-text mb-1`). */
.auth-modern .form-group label.sr-only {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 4px 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #282828;
}

/* Remove the FontAwesome user/lock glyphs the old dark theme injected. */
.auth-modern .access-section .form-group.email:before,
.auth-modern .access-section .form-group.password:before {
    content: none;
    display: none;
}

/* The label makes the placeholder redundant — hide it (keeps markup/attrs untouched). */
.auth-modern .form-control::placeholder {
    color: transparent;
}
.auth-modern .form-control::-webkit-input-placeholder {
    color: transparent;
}

.auth-modern .form-control,
.auth-modern .access-section .form-control {
    height: 40px;
    padding: 0 16px;
    font-size: 15px;
    line-height: 40px;
    color: #282828;
    background: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-modern .form-control:focus {
    border-color: #3CB6EA;
    box-shadow: 0 0 0 3px rgba(60, 182, 234, 0.2);
    outline: none;
}

/* jquery-validate error state. */
.auth-modern .form-control.error,
.auth-modern .form-control.input-validation-error {
    border-color: #E53935;
}

.auth-modern label.error {
    color: #E53935;
    font-size: 13px;
    font-weight: 400;
    display: block;
    margin-top: 4px;
}

/* ---- Forgot-password link: design-system link button (navy, sm), left-aligned under the field ---- */
.auth-modern .forgot-password {
    text-align: left;
    margin: 6px 0 0 0;
}

.auth-modern .forgot-password a {
    color: #183D57;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    text-underline-offset: 4px;
}

.auth-modern .forgot-password a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

/* Register / sign-up line (React `mt-8 text-center`); tighter on phones. */
.auth-modern p.lead {
    text-align: center;
    margin-top: 16px;
    margin-bottom: 0;
    font-size: 15px;
    font-weight: 400;
}

@media (min-width: 1024px) {
    .auth-modern p.lead {
        margin-top: 32px;
    }
}

.auth-modern a.signup-link {
    color: #183D57;
    font-weight: 500;
    text-decoration: none;
}

.auth-modern a.signup-link:hover {
    text-decoration: underline;
}

/* ---- Primary button: solid navy, right-aligned, design-system lg sizing ---- */
.auth-modern form#login,
.auth-modern form.login-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Inside the flex form the gap provides the spacing — drop the .form-group bottom margin so
   field/button distances don't double up (React relies on `gap-4` alone). */
.auth-modern form#login .form-group,
.auth-modern form.login-form .form-group {
    margin-bottom: 0;
}

.auth-modern .btn-cta-primary,
.auth-modern .btn-block.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    align-self: flex-end;
    margin-top: 0;
    padding: 0 20px;
    height: 40px;
    font-size: 15px;
    font-weight: 500;
    color: #ffffff;
    background: #183D57;
    border: none;
    border-radius: 6px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.auth-modern .btn-cta-primary:hover,
.auth-modern .btn-cta-primary:focus {
    background: #183D57;
    color: #ffffff;
    opacity: 0.9;
}

.auth-modern .btn-cta-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #d1d5db;
}

/* ---- Bootstrap panels used by the activation pages: clean white card, brand button ---- */
.auth-modern .panel {
    border: 1px solid #d1d5db;
    border-radius: 6px;
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.1);
    background: #ffffff;
}

.auth-modern .panel-heading {
    background: #ffffff;
    border-bottom: 1px solid #d1d5db;
    color: #282828;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.auth-modern .panel-title {
    color: #282828;
    font-weight: 600;
}

.auth-modern .panel-body .text-muted {
    color: #9ca3af;
}

.auth-modern .panel .btn-success,
.auth-modern .panel .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: #183D57;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    transition: opacity 0.15s ease;
}

.auth-modern .panel .btn-success:hover,
.auth-modern .panel .btn-primary:hover,
.auth-modern .panel .btn-success:focus,
.auth-modern .panel .btn-primary:focus {
    color: #ffffff;
    background: #183D57;
    opacity: 0.9;
}

/* Keep the reCAPTCHA disclaimer subtle. */
.auth-modern .recaptcha-disclaimer,
.auth-modern .recaptcha-disclaimer * {
    color: #9ca3af;
    font-size: 12px;
}

/* ---- Legal footer (copyright + legal notice / privacy / terms / cookie settings) ----
   Sits at the bottom of the form panel (the main area flex-grows above it); the links come
   from the shared PublicLegalLinks partial. Gray is #6b7280 (one step darker than the #9ca3af
   muted token) because the muted token fails WCAG AA contrast (4.5:1) for text this small on white. */
.auth-modern .auth-modern-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 16px 8px 0 8px;
    font-size: 12px;
    color: #6b7280;
    text-align: center;
}

.auth-modern .auth-modern-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 20px;
}

.auth-modern .auth-modern-footer a {
    color: #6b7280;
    text-decoration: underline;
    text-decoration-color: rgba(107, 114, 128, 0.4);
    text-underline-offset: 4px;
}

.auth-modern .auth-modern-footer a:hover,
.auth-modern .auth-modern-footer a:focus {
    color: #183D57;
    text-decoration-color: currentColor;
}