/* ==========================================================
   MOT MANAGER CRM
   Authentication
   ========================================================== */

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 42px 28px;

    font-family: Inter, "Segoe UI", Arial, sans-serif;
    color: var(--album-text);

    background:
        linear-gradient(
            rgba(238,248,252,.82),
            rgba(238,248,252,.82)
        ),
        none
        center / cover fixed no-repeat;
}

/* ==========================================================
   ALBUM COVER
   ========================================================== */

.auth-panel {
    position: relative;

    width: min(920px, calc(100vw - 56px));
    min-height: 520px;

    margin: 0;
    padding: 0 0 42px;

    box-sizing: border-box;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 90% 22%,
            rgba(255,212,92,.24),
            transparent 31%
        ),
        radial-gradient(
            circle at 7% 92%,
            rgba(91,195,232,.13),
            transparent 28%
        ),
        #fffdf7;

    border: 1px solid rgba(22,143,202,.15);
    border-radius: 32px;

    box-shadow:
        0 30px 70px rgba(40,72,91,.24),
        0 8px 24px rgba(40,72,91,.10);
}

/* ==========================================================
   BLUE ALBUM HEADER
   ========================================================== */

.brand {
    display: flex;
    align-items: center;

    min-height: 72px;

    margin: 0 0 0;
    padding: 0 40px;

    box-sizing: border-box;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            #168fca 0%,
            #58c0e6 72%,
            #76cee9 100%
        );

    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;

    letter-spacing: .045em;
    text-transform: uppercase;
}

/* ==========================================================
   AUTH CONTENT
   ========================================================== */

.auth-panel > h1 {
    margin:
        56px
        52%
        12px
        54px;

    color: var(--album-deep-blue);

    font-size: 48px;
    line-height: 1;
    letter-spacing: -.045em;
}

.auth-panel > h1::before {
    content: "Welcome to";
    display: block;

    margin-bottom: 9px;

    color: #718399;

    font-size: 15px;
    font-weight: 800;
    line-height: 1;

    letter-spacing: .05em;
    text-transform: uppercase;
}

/* ==========================================================
   DECORATIVE FAMILY ALBUM PANEL
   ========================================================== */

.auth-panel::before {
    content:
        "MOT Manager CRM\A\A"
        "Customers, vehicles, conversations and activity together in one secure CRM.";

    white-space: pre-wrap;

    position: absolute;

    top: 128px;
    right: 44px;
    bottom: 52px;

    width: 38%;

    box-sizing: border-box;

    padding: 42px 34px;

    color: #ffffff;

    background:
        linear-gradient(
            145deg,
            #168fca 0%,
            #49b9df 100%
        );

    border-radius: 24px;

    font-size: 17px;
    font-weight: 600;
    line-height: 1.55;

    box-shadow:
        0 16px 35px rgba(22,143,202,.18);
}

/* colourful album tabs */

.auth-panel::after {
    content: "";

    position: absolute;

    right: 74px;
    bottom: 82px;

    width: 145px;
    height: 12px;

    border-radius: 999px;

    background:
        linear-gradient(
            90deg,
            #ffd45c 0 23%,
            transparent 23% 27%,
            #ef8179 27% 50%,
            transparent 50% 54%,
            #71c88b 54% 77%,
            transparent 77% 81%,
            #ffffff 81% 100%
        );
}

/* ==========================================================
   FORM
   ========================================================== */

.auth-panel > form {
    width: calc(48% - 54px);

    margin:
        30px
        0
        0
        54px;
}

.auth-panel label {
    display: block;

    margin: 0 0 8px;

    color: #34475a;

    font-size: 14px;
    font-weight: 850;
}

.auth-panel input[type="text"],
.auth-panel input[type="email"],
.auth-panel input[type="password"] {
    display: block;

    width: 100%;
    min-height: 52px;

    margin: 0 0 19px;
    padding: 11px 16px;

    box-sizing: border-box;

    color: #34475a;
    background: #ffffff;

    border: 2px solid #d8e9f1;
    border-radius: 15px;

    outline: none;

    font: inherit;

    transition:
        border-color .15s ease,
        box-shadow .15s ease;
}

.auth-panel input[type="text"]:focus,
.auth-panel input[type="email"]:focus,
.auth-panel input[type="password"]:focus {
    border-color: #5bc3e8;

    box-shadow:
        0 0 0 4px rgba(91,195,232,.17);
}

/* ==========================================================
   EXISTING PASSWORD EYE

   Keep the existing JavaScript and button.
   Position it over the password field instead of allowing it
   to become a normal form button.
   ========================================================== */

.password-wrap,
.password-field,
.password-container {
    position: relative;
}

.password-wrap input,
.password-field input,
.password-container input {
    padding-right: 54px;
}

.password-toggle,
.password-eye,
.toggle-password,
button.eye {
    position: absolute !important;

    right: 8px !important;
    top: 50% !important;

    width: 38px !important;
    min-width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;

    padding: 0 !important;
    margin: 0 !important;

    transform: translateY(-50%) !important;

    color: #168fca !important;
    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    box-shadow: none !important;
}

/* ==========================================================
   MAIN BUTTONS
   ========================================================== */

.auth-panel form button:not(.password-toggle):not(.password-eye):not(.toggle-password):not(.eye),
.auth-panel input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 46px;

    margin-top: 2px;
    padding: 0 26px;

    color: #ffffff;

    background:
        linear-gradient(
            110deg,
            #168fca,
            #27a9dd
        );

    border: 0;
    border-radius: 999px;

    font: inherit;
    font-weight: 850;

    cursor: pointer;

    box-shadow:
        0 8px 18px rgba(22,143,202,.23);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.auth-panel form button:not(.password-toggle):not(.password-eye):not(.toggle-password):not(.eye):hover,
.auth-panel input[type="submit"]:hover {
    transform: translateY(-1px);

    box-shadow:
        0 11px 24px rgba(22,143,202,.29);
}

/* ==========================================================
   LINKS / TEXT BELOW FORM
   ========================================================== */

.auth-panel > p,
.auth-panel > .auth-actions,
.auth-panel > .auth-links,
.auth-panel > .message,
.auth-panel > .auth-message {
    width: calc(48% - 54px);

    margin-left: 54px;
    margin-right: 0;

    box-sizing: border-box;
}

.auth-panel a {
    color: #155f91;

    font-weight: 800;

    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.auth-panel a:hover {
    color: #168fca;
}

.auth-panel form + p,
.auth-panel form + div {
    margin-top: 24px;
}

.auth-panel p {
    color: #718399;
    line-height: 1.55;
}

/* ==========================================================
   MESSAGES
   ========================================================== */

.message,
.auth-message,
.notice,
.error,
.success {
    box-sizing: border-box;

    padding: 13px 15px;

    border-radius: 14px;

    line-height: 1.45;
}

.error,
.message.error,
.auth-message.error {
    color: #8e3f39;
    background: #fff0ee;
    border: 1px solid #f5c7c2;
}

.success,
.message.success,
.auth-message.success {
    color: #31704a;
    background: #edf9f0;
    border: 1px solid #cbead4;
}

/* ==========================================================
   REGISTRATION / HELP TEXT
   ========================================================== */

.auth-panel small,
.auth-panel .hint,
.auth-panel .help,
.auth-panel .rules {
    color: #718399;
    line-height: 1.45;
}

.auth-panel ul {
    color: #718399;
}

/* ==========================================================
   TABLET / MOBILE
   ========================================================== */

@media (max-width: 800px) {

    body {
        align-items: flex-start;
        padding: 20px 12px;
    }

    .auth-panel {
        width: 100%;
        min-height: 0;

        padding-bottom: 30px;

        border-radius: 25px;
    }

    .brand {
        min-height: 64px;
        padding: 0 24px;

        font-size: 12px;
    }

    .auth-panel::before {
        position: static;

        display: block;

        width: auto;

        margin: 25px 22px 0;
        padding: 25px;

        font-size: 15px;
    }

    .auth-panel::after {
        display: none;
    }

    .auth-panel > h1 {
        margin: 30px 22px 10px;

        font-size: 40px;
    }

    .auth-panel > form,
    .auth-panel > p,
    .auth-panel > .auth-actions,
    .auth-panel > .auth-links,
    .auth-panel > .message,
    .auth-panel > .auth-message {
        width: auto;

        margin-left: 22px;
        margin-right: 22px;
    }

    .auth-panel > form {
        margin-top: 25px;
    }
}

/* ==========================================================
   AUTH HEADER / TITLE REFINEMENT
   ========================================================== */

/* Proper Family Album banner */
.brand {
    position: relative;

    min-height: 92px;
    margin: 0 !important;
    padding: 22px 42px !important;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    color: transparent !important;
    font-size: 0 !important;

    background:
        linear-gradient(
            110deg,
            #168fca 0%,
            #58c0e6 100%
        ) !important;
}

.brand::before {
    content: "MOT MANAGER CRM";

    display: block;

    color: #ffffff;

    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;

    letter-spacing: .045em;
}

.brand::after {
    content: "Customer management, together in one place";

    display: block;

    margin-top: 7px;

    color: rgba(255,255,255,.90);

    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;

    letter-spacing: 0;
    text-transform: none;
}

/* Login becomes a welcoming page title */
.auth-panel > h1 {
    margin-top: 48px;
    margin-bottom: 24px;

    font-size: 0;
}

.auth-panel > h1::before {
    content: "Welcome back";

    display: block;

    margin: 0;

    color: #155f91;

    font-size: 44px;
    font-weight: 900;
    line-height: 1.05;

    letter-spacing: -.04em;
    text-transform: none;
}

.auth-panel > h1::after {
    content: "Sign in to MOT Manager CRM";

    display: block;

    margin-top: 10px;

    color: #718399;

    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;

    letter-spacing: 0;
}

/* Move the right-hand memory panel down below the new banner */
.auth-panel::before {
    top: 142px;
}

/* Mobile */
@media (max-width: 800px) {

    .brand {
        min-height: 82px;
        padding: 18px 24px !important;
    }

    .brand::before {
        font-size: 16px;
    }

    .brand::after {
        font-size: 13px;
    }

    .auth-panel > h1 {
        margin-top: 30px;
        margin-bottom: 22px;
    }

    .auth-panel > h1::before {
        font-size: 36px;
    }

    .auth-panel > h1::after {
        font-size: 15px;
    }
}

/* ==========================================================
   AUTH PAGE TITLES — USE EACH PAGE'S REAL H1
   ========================================================== */

.auth-panel > h1 {
    margin-top: 44px;
    margin-bottom: 26px;

    color: #155f91 !important;

    font-size: 44px !important;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -.04em;
}

/* Use the real page title supplied by the CGI */
.auth-panel > h1::before,
.auth-panel > h1::after {
    content: none !important;
    display: none !important;
}

/* Give longer registration forms room */
.auth-panel:has(form[action*="register"]) {
    width: min(980px, calc(100vw - 56px));
}

.auth-panel form {
    padding-bottom: 4px;
}

.auth-panel form ul {
    margin-top: -5px;
    margin-bottom: 18px;
    padding-left: 24px;

    font-size: 13px;
    line-height: 1.5;
}

.auth-panel form small,
.auth-panel form .hint,
.auth-panel form .help,
.auth-panel form .rules {
    display: block;

    margin-top: -10px;
    margin-bottom: 15px;

    font-size: 13px;
}

.auth-panel form button[type="submit"],
.auth-panel form input[type="submit"] {
    margin-top: 5px;
}

@media (max-width: 800px) {
    .auth-panel > h1 {
        margin-top: 30px;
        font-size: 36px !important;
    }
}

/* ==========================================================
   REGISTRATION PAGE LAYOUT
   Keep long forms fully visible without stretching the
   decorative family-memory panel.
   ========================================================== */

body:has(.auth-panel form[action*="register"]) {
    align-items: flex-start;
    padding-top: 32px;
    padding-bottom: 32px;
}

.auth-panel:has(form[action*="register"]) {
    width: min(980px, calc(100vw - 56px));
    min-height: 0;
}

/* Registration heading slightly tighter */
.auth-panel:has(form[action*="register"]) > h1 {
    margin-top: 34px;
    margin-bottom: 22px;
}

/* Registration form spacing */
.auth-panel:has(form[action*="register"]) > form {
    margin-top: 0;
}

.auth-panel:has(form[action*="register"]) input[type="text"],
.auth-panel:has(form[action*="register"]) input[type="email"],
.auth-panel:has(form[action*="register"]) input[type="password"] {
    min-height: 48px;
    margin-bottom: 16px;
}

/* Don't make the decorative panel as tall as the form */
.auth-panel:has(form[action*="register"])::before {
    top: 136px;
    bottom: auto;
    height: 430px;
}

/* Keep the colour tabs inside that panel */
.auth-panel:has(form[action*="register"])::after {
    right: 74px;
    bottom: auto;
    top: 525px;
}

/* Mobile remains single-column */
@media (max-width: 800px) {

    body:has(.auth-panel form[action*="register"]) {
        padding: 18px 12px;
    }

    .auth-panel:has(form[action*="register"])::before {
        height: auto;
    }

    .auth-panel:has(form[action*="register"])::after {
        display: none;
    }
}


/* ==========================================================
   REMEMBER ME
   ========================================================== */

.remember-me {
    display: flex !important;

    align-items: center;

    gap: 11px;

    margin:
        15px
        0
        18px
        0;

    padding:
        11px
        13px;

    box-sizing: border-box;

    color: #29485a;

    background: #f3fbfe;

    border:
        1px solid #d8ebf3;

    border-radius: 14px;

    cursor: pointer;

    user-select: none;
}

.remember-me:hover {
    background: #eaf8fd;
}

.remember-me input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;

    min-width: 20px;

    margin: 0 !important;
    padding: 0 !important;

    accent-color: #168bc1;

    cursor: pointer;
}

.remember-box-text {
    display: flex;

    flex-direction: column;

    gap: 2px;

    line-height: 1.25;
}

.remember-box-text strong {
    color: #173f55;

    font-size: 13px;
}

.remember-box-text small {
    color: #66808d;

    font-size: 11px;

    font-weight: 600;
}


@media (max-width: 600px) {

    .remember-me {
        padding:
            10px
            11px;
    }
}


/* ==========================================================
   MOBILE LOGIN OPTIMISATION
   Keep desktop/tablet presentation unchanged.
   On phones the login form takes priority over decoration.
   ========================================================== */

@media (max-width: 600px) {

    /*
       Reduce the outer page spacing so the login card uses
       substantially more of the phone screen.
    */

    body {
        padding:
            10px
            8px !important;
    }


    /*
       Main authentication shell.
    */

    .auth-shell {
        width:
            calc(100% - 4px) !important;

        max-width:
            none !important;

        margin:
            0 auto !important;

        border-radius:
            22px !important;

        overflow:
            hidden;
    }


    /*
       The large decorative "MOT Manager CRM" panel is
       useful on desktop but wastes most of a phone screen.
    */

    .auth-side,
    .auth-intro,
    .auth-memory-panel,
    .family-memory-panel {
        display:
            none !important;
    }


    /*
       Keep the album identity but make the banner compact.
    */

    .auth-brand,
    .auth-header,
    .family-album-header {
        padding:
            15px
            18px !important;

        min-height:
            0 !important;
    }

    .auth-brand h1,
    .auth-header h1,
    .family-album-header h1 {
        margin:
            0 0 3px 0 !important;

        font-size:
            21px !important;

        line-height:
            1.15 !important;
    }

    .auth-brand p,
    .auth-header p,
    .family-album-header p {
        margin:
            0 !important;

        font-size:
            13px !important;

        line-height:
            1.3 !important;
    }


    /*
       Main login area.
    */

    .auth-main,
    .auth-content,
    .auth-form-panel {
        width:
            100% !important;

        max-width:
            none !important;

        padding:
            18px !important;

        box-sizing:
            border-box !important;
    }


    /*
       Login heading.
    */

    .auth-main h1,
    .auth-main h2,
    .auth-content h1,
    .auth-content h2,
    .auth-form-panel h1,
    .auth-form-panel h2 {
        margin:
            0 0 14px 0 !important;

        font-size:
            34px !important;

        line-height:
            1.05 !important;
    }


    /*
       Form labels.
    */

    #login-form label:not(.remember-me) {
        margin-top:
            10px !important;

        margin-bottom:
            5px !important;
    }


    /*
       Large touch-friendly fields.
       16px prevents mobile browsers zooming the page when
       an input receives focus.
    */

    #login-form input[type="text"],
    #login-form input[type="email"],
    #login-form input[type="password"] {
        width:
            100% !important;

        min-height:
            48px !important;

        box-sizing:
            border-box !important;

        font-size:
            16px !important;
    }


    /*
       Password field and eye button.
    */

    #login-form .password-field {
        width:
            100% !important;

        margin-bottom:
            0 !important;
    }

    #login-form .password-eye {
        min-width:
            46px !important;

        min-height:
            46px !important;
    }


    /*
       Remember me becomes compact on mobile.
    */

    #login-form .remember-me {
        margin:
            12px
            0
            14px
            0 !important;

        padding:
            9px
            11px !important;

        border-radius:
            12px !important;
    }

    #login-form .remember-me input[type="checkbox"] {
        width:
            22px !important;

        height:
            22px !important;

        min-width:
            22px !important;
    }

    #login-form .remember-box-text strong {
        font-size:
            14px !important;
    }

    #login-form .remember-box-text small {
        font-size:
            11px !important;
    }


    /*
       Full-width, easy-to-hit Login button.
    */

    #login-form .primary-button {
        width:
            100% !important;

        min-height:
            50px !important;

        margin-top:
            0 !important;

        font-size:
            17px !important;

        border-radius:
            14px !important;
    }


    /*
       Create account link stays immediately below Login.
    */

    .alternative {
        margin:
            13px
            0
            2px
            0 !important;

        text-align:
            center !important;
    }

}


@media (max-width: 380px) {

    .auth-main,
    .auth-content,
    .auth-form-panel {
        padding:
            15px !important;
    }

    .auth-main h1,
    .auth-main h2,
    .auth-content h1,
    .auth-content h2,
    .auth-form-panel h1,
    .auth-form-panel h2 {
        font-size:
            30px !important;
    }

}