/*
 * ============================================================================
 *  Catch-Up CRM — Login page (FEATURE_NEW_DESIGN)
 * ============================================================================
 *  Split-card layout inspired by modern SaaS auth screens: form on the left,
 *  classy application teaser on the right. Loaded only when the feature flag
 *  is on (see resources/views/auth/login.blade.php).
 * ============================================================================
 */

body.login-new-design {
    --bg: #f7f7f8;
    --card: #ffffff;
    --border: #ececef;
    --border-strong: #e3e3e6;
    --text: #1a1a1f;
    --text-muted: #6b6b75;
    --text-faint: #a1a1aa;
    --accent: #266DF0;
    --accent-hover: #1B5DE0;
    --accent-soft: #E9F0FD;
    --shadow-card: 0 1px 3px rgba(16, 17, 21, 0.06), 0 1px 2px rgba(16, 17, 21, 0.03);
    --shadow-lift: 0 4px 16px rgba(38, 109, 240, 0.12);
    --radius: 14px;
    --radius-lg: 16px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --pill: 999px;
    --hover-1: #f1f2f5;
    --hover-2: #f5f6f8;
    --hover-3: #f7f7fa;
    --hover-4: #fafafb;
    --font-sans: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --hu-green: var(--accent);
    --hu-green-1: var(--accent);
    --hu-green-2: var(--accent);
    --login-accent: var(--accent);
    --login-accent-hover: var(--accent-hover);
    --login-accent-soft: var(--accent-soft);
    --login-text: var(--text);
    --login-muted: var(--text-muted);
    --login-border: var(--border);
    --login-bg: var(--bg);
    --login-card-shadow: 0 24px 64px rgba(38, 64, 90, 0.12), 0 2px 8px rgba(38, 64, 90, 0.06);
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-sans);
    background: var(--login-bg);
    color: var(--login-text);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

body.login-new-design #app,
body.login-new-design #wrapper,
body.login-new-design #page-wrapper {
    min-height: 100vh;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent !important;
}

/* Primitives (DS §8.1–8.2) — same recipes as theme-new-design, login gate. */
body.login-new-design .btn {
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-size: 13px;
}

body.login-new-design .btn-dark {
    background: #111;
    border-color: #111;
    color: #fff;
}

body.login-new-design .btn-dark:hover,
body.login-new-design .btn-dark:focus {
    background: #000;
    border-color: #000;
}

body.login-new-design .btn-outline-secondary {
    color: var(--text);
    border-color: var(--border-strong);
    background: #fff;
}

body.login-new-design .btn-outline-secondary:hover {
    background: var(--hover-3);
    color: var(--text);
    border-color: var(--border-strong);
}

body.login-new-design .btn:focus,
body.login-new-design .btn.focus {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

body.login-new-design .form-control,
body.login-new-design .custom-select {
    border-color: var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 13.5px;
    color: var(--text);
}

body.login-new-design .form-control:focus,
body.login-new-design .custom-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-nd {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 32px;
    box-sizing: border-box;
}

.login-nd__card {
    display: flex;
    width: 88vw;
    max-width: 1360px;
    min-height: min(760px, 86vh);
    background: #ffffff;
    border-radius: 24px;
    box-shadow: var(--login-card-shadow);
    overflow: hidden;
}

.login-nd__card--narrow {
    max-width: 440px;
    min-height: auto;
}

.login-nd__form-panel--full {
    flex: 1 1 auto;
    max-width: none;
}

.login-nd__auth-content {
    text-align: left;
    color: var(--login-muted);
    font-size: 14px;
}

.login-nd__auth-content .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.login-nd__auth-content .form-control {
    height: 46px;
    border-radius: 12px;
    border: 1px solid var(--login-border);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--login-text);
    background: #ffffff;
    box-shadow: none;
}

.login-nd__auth-content .form-control:focus {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.login-nd__auth-content .btn-primary-hu {
    display: block;
    width: 100%;
    height: 48px;
    margin-top: 8px;
    border: none;
    border-radius: 12px;
    background: #111 !important;
    border-color: #111 !important;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 700;
}

.login-nd__auth-content .btn-primary-hu:hover,
.login-nd__auth-content .btn-primary-hu:focus {
    background: #000 !important;
    border-color: #000 !important;
}

.login-nd__auth-content a {
    color: var(--login-accent);
    font-weight: 600;
}

.login-nd__auth-content a:hover {
    color: var(--login-accent-hover);
}

/* -------------------------------------------------------------------------- */
/*  Form panel                                                                */
/* -------------------------------------------------------------------------- */

.login-nd__form-panel {
    flex: 0 0 40%;
    max-width: 520px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 52px;
    box-sizing: border-box;
    background: #ffffff;
}

.login-nd__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}

.login-nd__brand-logo {
    height: 44px;
    width: auto;
}

.login-nd__title {
    margin: 0 0 8px;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--login-text);
    text-align: left;
}

.login-nd__subtitle {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.5;
    color: var(--login-muted);
    text-align: left;
}

.login-nd__form .form-group {
    margin-bottom: 16px;
    text-align: left;
}

.login-nd__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--login-text);
}

.login-nd__form .form-control {
    height: 50px;
    border-radius: 12px;
    border: 1px solid var(--login-border);
    padding: 10px 14px;
    font-size: 15px;
    color: var(--login-text);
    background: #ffffff;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.login-nd__form .form-control:focus {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
    outline: none;
}

.login-nd__form .form-control.is-invalid {
    border-color: #dc3545;
}

.login-nd__submit {
    display: block;
    width: 100%;
    height: 52px;
    margin-top: 8px;
    margin-bottom: 0;
    border: none;
    border-radius: 12px;
    background: #111;
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.1s ease;
}

.login-nd__submit:hover,
.login-nd__submit:focus {
    background: #000;
    color: #ffffff;
    outline: none;
}

.login-nd__submit:active {
    transform: translateY(1px);
}

.login-nd__forgot {
    margin-top: 16px;
    text-align: center;
}

.login-nd__forgot a {
    color: var(--login-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.login-nd__forgot a:hover {
    color: var(--login-accent-hover);
    text-decoration: underline;
}

.login-nd__form .invalid-feedback {
    display: block;
    margin-top: 6px;
    font-size: 12px;
}

/* -------------------------------------------------------------------------- */
/*  Teaser panel — angled app screenshots                                     */
/* -------------------------------------------------------------------------- */

.login-nd__teaser {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 30% 20%, rgba(91, 108, 255, 0.12), transparent 55%),
        radial-gradient(ellipse at 80% 80%, rgba(91, 108, 255, 0.16), transparent 50%),
        linear-gradient(160deg, #F7FAFB 0%, #E8EEF2 100%);
    min-height: 100%;
}

/* One 3D plane for the whole composition: a single rotation on the stack, a long
   perspective (subtle keystone), depth only through translateZ. The cards never get
   their own rotation, so both screens stay parallel. Each card is sized from the
   panel width and keeps the screenshot's 16:10 ratio: no crop, no stretch. */
.login-nd__teaser-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    perspective: 2400px;
    perspective-origin: 50% 50%;
}

.login-nd__teaser-stack {
    position: relative;
    width: 84%;
    max-width: 760px;
    aspect-ratio: 5 / 4;
    transform-style: preserve-3d;
    transform: rotateY(-14deg) rotateX(6deg);
}

.login-nd__shot {
    position: absolute;
    border-radius: var(--radius, 14px);
    overflow: hidden;
    background: var(--card, #ffffff);
    box-shadow:
        0 0 0 1px var(--border, #ececef),
        0 28px 60px rgba(38, 64, 90, 0.18),
        0 4px 12px rgba(38, 64, 90, 0.08);
    backface-visibility: hidden;
}

.login-nd__shot picture {
    display: block;
}

.login-nd__shot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
}

.login-nd__shot--back {
    width: 72%;
    top: 0;
    right: 0;
    z-index: 1;
    transform: translateZ(-60px);
}

.login-nd__shot--front {
    width: 80%;
    left: 0;
    bottom: 0;
    z-index: 2;
    transform: translateZ(30px);
}

/* -------------------------------------------------------------------------- */
/*  Responsive                                                                */
/* -------------------------------------------------------------------------- */

@media (max-width: 900px) {
    .login-nd {
        padding: 16px;
        align-items: flex-start;
    }

    .login-nd__card {
        flex-direction: column;
        min-height: auto;
        max-width: 480px;
        width: 100%;
    }

    .login-nd__form-panel {
        flex: none;
        max-width: none;
        padding: 36px 28px 28px;
    }

    .login-nd__teaser {
        min-height: 280px;
        order: -1;
    }

    .login-nd__teaser-stack {
        transform: none;
        width: 90%;
        max-width: 560px;
        aspect-ratio: auto;
    }

    .login-nd__shot--back {
        display: none;
    }

    .login-nd__shot--front {
        position: relative;
        width: 100%;
        transform: none;
    }
}

@media (max-width: 480px) {
    .login-nd__form-panel {
        padding: 28px 20px;
    }

    .login-nd__title {
        font-size: 24px;
    }
}

/* ========================================================================== */
/*  CU-DP-050 — Full-bleed split (designer): form on the left half, the app   */
/*  illustration on the right half. Overrides the floating-card layout above */
/*  without touching the Blade markup.                                        */
/* ========================================================================== */

/* Narrow auth card (password reset…): the base `.login-nd__form-panel
   { flex: 0 0 40% }` comes after `.login-nd__form-panel--full` and won, so the
   form only got 40% of the 440px card (~135px). Full width again. */
.login-nd__card--narrow > .login-nd__form-panel {
    flex: 1 1 auto;
    max-width: none;
}

/* Scoped to the login page's split card (it holds the teaser): the other auth
   pages (layouts/login.blade.php: .login-nd__card--narrow,
   .login-nd__form-panel--full) keep their centred card. */
.login-nd:has(> .login-nd__card > .login-nd__teaser) {
    padding: 0;
    align-items: stretch;
}

.login-nd__card:has(> .login-nd__teaser) {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
}

/* Left half: logo pinned top-left, a narrow form centred in the half. */
.login-nd__form-panel:not(.login-nd__form-panel--full) {
    position: relative;
    flex: 0 0 50%;
    max-width: none;
    align-items: center;
    padding: 96px 48px 56px;
}

.login-nd__form-panel:not(.login-nd__form-panel--full) > * {
    width: 100%;
    max-width: 360px;
}

.login-nd__form-panel:not(.login-nd__form-panel--full) > .login-nd__brand {
    position: absolute;
    top: 36px;
    left: 48px;
    width: auto;
    max-width: none;
    margin: 0;
}

.login-nd__brand-logo {
    height: 32px;
}

.login-nd__title {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.login-nd__subtitle {
    margin: 0 0 28px;
    font-size: 14px;
    color: var(--text-muted);
}

/* Fields: the app's form recipe (12.5px muted labels, 40px inputs, 10px radius). */
.login-nd__label {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.login-nd__form .form-group {
    margin-bottom: 14px;
}

.login-nd__form .form-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md, 10px);
    font-size: 14px;
}

.login-nd__form .form-control::placeholder {
    color: var(--text-faint);
    font-style: normal; /* hikeup.css italicises placeholders */
}

/* Primary action: the app's blue button (was a 52px black block). */
.login-nd__submit {
    height: 40px;
    margin-top: 10px;
    border-radius: var(--radius-md, 10px);
    background: var(--accent);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0;
}

.login-nd__submit:hover,
.login-nd__submit:focus {
    background: var(--accent-hover);
}

.login-nd__submit:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-nd__forgot {
    margin-top: 14px;
}

.login-nd__forgot a {
    font-weight: 500;
}

/* Right half: light panel with the app illustration (public/images/
   login-teaser/app-cards.svg: kanban column, KPI tile, contacts, "won" toast).
   The two angled screenshots of the old teaser are hidden. */
/* Full-height right half on a pastel blue (designer), with the app cards
   overlapping each other (public/images/login-teaser/app-cards.svg: kanban
   column, contact list over it, KPI tile, "won" toast in front). */
.login-nd__teaser {
    flex: 1 1 50%;
    display: flex;
    flex-direction: column;
    border-left: 1px solid #DCE6FB;
    background:
        radial-gradient(ellipse at 80% 10%, rgba(255, 255, 255, 0.65), transparent 55%),
        radial-gradient(ellipse at 15% 95%, rgba(38, 109, 240, 0.10), transparent 55%),
        linear-gradient(165deg, #EEF3FE 0%, #E3ECFD 55%, #D9E5FC 100%);
}

.login-nd__teaser-stack {
    display: none;
}

.login-nd__teaser-stage {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    margin: 24px 48px 48px;
    background: url("/images/login-teaser/app-cards.svg?v=6") center / contain no-repeat;
    perspective: none;
}

/* Optional caption above the illustration, for the preprod-app Blade addition
   (see the changemanifest, CU-DP-050):
   <div class="login-nd__teaser-copy"><p class="login-nd__teaser-title">…</p>
   <p class="login-nd__teaser-text">…</p></div> as the aside's first child. */
.login-nd__teaser-copy {
    padding: 48px 48px 0;
}

.login-nd__teaser-title {
    max-width: 480px;
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text);
}

.login-nd__teaser-text {
    max-width: 460px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/*  CU-DP-051 — Password pages (layouts/login.blade.php: forgot / reset /     */
/*  expired) in the same split as the login. The layout has no teaser in its */
/*  markup, so the right half is drawn by .login-nd::after with the same     */
/*  pastel background and app-cards illustration.                            */
/* -------------------------------------------------------------------------- */
.login-nd:has(> .login-nd__card--narrow) {
    position: relative;
    justify-content: flex-start;
    align-items: stretch;
    padding: 0;
}

.login-nd:has(> .login-nd__card--narrow)::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    box-sizing: border-box;
    border-left: 1px solid #DCE6FB;
    background:
        url("/images/login-teaser/app-cards.svg?v=6") center / calc(100% - 96px) calc(100% - 96px) no-repeat,
        radial-gradient(ellipse at 80% 10%, rgba(255, 255, 255, 0.65), transparent 55%),
        radial-gradient(ellipse at 15% 95%, rgba(38, 109, 240, 0.10), transparent 55%),
        linear-gradient(165deg, #EEF3FE 0%, #E3ECFD 55%, #D9E5FC 100%);
    pointer-events: none;
}

.login-nd__card--narrow {
    width: 50%;
    max-width: none;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
}

.login-nd__card--narrow > .login-nd__form-panel {
    position: relative;
    align-items: center;
    padding: 96px 48px 56px;
}

.login-nd__card--narrow > .login-nd__form-panel > .login-nd__brand {
    position: absolute;
    top: 36px;
    left: 48px;
    margin: 0;
}

.login-nd__card--narrow .login-nd__auth-content {
    width: 100%;
    max-width: 360px;
    font-size: 14px;
}

/* Page title ("Réinitialiser le mot de passe", …): the login's title. */
.login-nd__card--narrow .login-nd__auth-content > .text-left:first-child:not(.alert) {
    margin: 0 0 6px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--text);
}

.login-nd__card--narrow .login-nd__auth-content > .mt-3 {
    margin: 22px 0 0 !important;
}

.login-nd__card--narrow .login-nd__auth-content .form-control {
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md, 10px);
    font-size: 14px;
}

.login-nd__card--narrow .login-nd__auth-content .form-control::placeholder {
    color: var(--text-faint);
    font-style: normal;
}

.login-nd__card--narrow .login-nd__auth-content .form-control:disabled {
    background: var(--hover-2);
    color: var(--text-muted);
}

/* Primary action: the app's blue button (was the black .btn-primary-hu). */
.login-nd__card--narrow .login-nd__auth-content .btn-primary-hu {
    display: block;
    width: 100%;
    height: 40px;
    margin: 10px 0 0;
    border: 0;
    border-radius: var(--radius-md, 10px);
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #FFFFFF !important;
    font-size: 14px;
    font-weight: 600;
}

.login-nd__card--narrow .login-nd__auth-content .btn-primary-hu:hover,
.login-nd__card--narrow .login-nd__auth-content .btn-primary-hu:focus {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}

.login-nd__card--narrow .login-nd__auth-content .btn-primary-hu:focus-visible {
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.login-nd__card--narrow .login-nd__auth-content > .text-center:last-child {
    margin-top: 14px !important;
}

.login-nd__card--narrow .login-nd__auth-content a {
    font-size: 13px;
    font-weight: 500;
}

.login-nd__card--narrow .login-nd__auth-content a small {
    font-size: inherit;
}

.login-nd__card--narrow .login-nd__auth-content .alert {
    border-radius: var(--radius-md, 10px);
    font-size: 13px;
}

@media (max-width: 900px) {
    .login-nd:has(> .login-nd__card--narrow)::after {
        display: none;
    }

    .login-nd__card--narrow {
        width: 100%;
    }

    .login-nd__card--narrow > .login-nd__form-panel {
        padding: 96px 24px 40px;
    }

    .login-nd__card--narrow > .login-nd__form-panel > .login-nd__brand {
        left: 24px;
    }
}

@media (max-width: 900px) {
    .login-nd__form-panel:not(.login-nd__form-panel--full) {
        flex: 1 1 auto;
        min-height: 100vh;
        padding: 96px 24px 40px;
    }

    .login-nd__form-panel:not(.login-nd__form-panel--full) > .login-nd__brand {
        left: 24px;
    }

    /* Phones / narrow tablets: the form alone, no illustration. */
    .login-nd__teaser {
        display: none;
    }
}