/*
 * MAD-3050 — Sauce Labs brand-refresh login page for legacy MAD.
 *
 * Ported verbatim from the new Symfony platform's login styling
 * (mad-docker/mad/assets/styles/app.css :51-275) so the legacy login screens
 * match the Symfony login pixel-for-pixel. Loaded standalone by
 * templates/session/brand-login-layout.tpl (NOT the shared dashboard layout),
 * so it carries its own reset, fonts, and tokens and does not depend on any
 * app-wide stylesheet.
 */

/* --- Minimal reset (the standalone layout loads nothing else) --------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, p { margin: 0; }
img { border: 0; }
a { text-decoration: none; }
input, button, textarea, select { font-family: inherit; font-size: 100%; }
button { cursor: pointer; }

/* --- Brand fonts ----------------------------------------------------------- */
@font-face {
    font-family: 'P22 Mackinac Pro';
    src: url('/fonts/p22-mackinac/P22MackinacPro-Book.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'P22 Mackinac Pro';
    src: url('/fonts/p22-mackinac/P22MackinacPro-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atkinson Hyperlegible';
    src: url('/fonts/atkinson-hyperlegible/AtkinsonHyperlegible-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- Brand color tokens (subset used by the login page) -------------------- */
:root {
    --color-brand-dark: #192319;
    --color-khaki-700: #6d7344;   /* Olive — the new brand color */
    --color-ivory: #f0f0ec;
    --color-off-white: #f8f8f8;
    --color-warm-gray: #dcdcd7;
    --color-ink: #0a140a;
    --color-highlight: #abe082;
}

/* --- Brand-refresh login page ---------------------------------------------- */
.brand-login {
    position: relative;
    min-height: 100vh;
    background-color: var(--color-ivory) !important;
    font-family: 'Atkinson Hyperlegible', Arial, sans-serif;
    color: var(--color-ink);
    overflow-x: hidden;
}
.brand-topnav {
    position: relative;
    z-index: 2;
    margin: 16px 40px 0;
    padding: 8px 8px 8px 22px;
    background: var(--color-off-white);
    border: 1px solid var(--color-warm-gray);
    border-radius: 40px;
    display: flex;
    align-items: center;
    min-height: 48px;
}
.brand-login-main {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    padding: 80px 50px 140px;
}
.brand-login-card {
    display: flex;
    width: 100%;
    max-width: 1140px;
    background: #fff;
    border: 1px solid #e8ebf1;
    border-radius: 16px;
    box-shadow: 0 8px 36px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}
.brand-login-form {
    flex: 1;
    min-width: 0;
    padding: 60px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: center;
}
.brand-login-form h1 {
    font-family: 'P22 Mackinac Pro', Georgia, serif;
    font-weight: 500;
    font-size: 36px;
    margin: 0 0 12px;
    color: var(--color-ink);
}
.brand-login-sub {
    color: var(--color-khaki-700);
    font-size: 16px;
    margin: 0;
}
.brand-login-fields {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.brand-input {
    width: 100%;
    background: #f0f0f0;
    border: 0;
    border-radius: 4px;
    padding: 18px 20px;
    font-size: 14px;
    color: var(--color-ink);
}
.brand-input:focus {
    outline: 2px solid var(--color-khaki-700);
    background: #f0f0f0;
}
.brand-input::placeholder {
    text-transform: uppercase;
    font-size: 12.5px;
    letter-spacing: 0.25px;
    color: rgba(25, 35, 25, 0.64);
}
.brand-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
}
.brand-remember {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    cursor: pointer;
}
.brand-remember .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid var(--color-ink);
    border-radius: 4px;
}
.brand-remember .form-check-input:checked {
    background-color: var(--color-ink);
    border-color: var(--color-ink);
}
.brand-login-options a {
    color: var(--color-ink);
    text-decoration: underline;
}
.btn-brand-cta {
    background: var(--color-brand-dark);
    color: var(--color-off-white);
    border: 0;
    border-radius: 100px;
    padding: 16px 32px;
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.btn-brand-cta:hover {
    background: #2a3b32;
    color: var(--color-off-white);
}
.brand-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--color-khaki-700);
    font-size: 14px;
    white-space: nowrap;
}
.brand-divider::before,
.brand-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--color-khaki-700);
}
.brand-social {
    display: flex;
    gap: 12px;
}
.btn-brand-outline {
    flex: 1;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-ink);
    border-radius: 999px;
    background: #fff;
    color: var(--color-ink) !important;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}
.btn-brand-outline:hover {
    background: var(--color-ivory);
}
.brand-admin-login {
    font-size: 13px;
    text-align: center;
}
.brand-admin-login a {
    color: var(--color-khaki-700);
}
.brand-login-visual {
    width: 514px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}
.brand-login-texture {
    height: 333px;
    background: var(--color-highlight) url('/images/app/branding/texture-mosaic-green.png') center / cover no-repeat;
}
.brand-login-copy {
    flex: 1;
    background: var(--color-ivory);
    padding: 40px;
    font-family: 'P22 Mackinac Pro', Georgia, serif;
    font-weight: 500;
    font-size: 36px;
    color: var(--color-ink);
}
.brand-login-copy p {
    margin: 0;
    line-height: 1.25;
}
.brand-blocks {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 340px;
    background: url('/images/app/branding/texture-blocks.jpg') bottom center / cover no-repeat;
    opacity: 0.33;
    z-index: 0;
    pointer-events: none;
}

/* --- Legacy-specific additions --------------------------------------------- */
/* Error box (legacy passes $error string). Styled to sit above the fields. */
.brand-login-error {
    padding: 12px 16px;
    border: 1px solid #ff505b;
    border-radius: 6px;
    background: rgba(255, 80, 91, 0.06);
    color: #da1503;
    font-size: 14px;
}
/* Submit spinner (tf-login.js toggles display) sits next to the CTA. */
.btn-brand-cta[disabled],
.btn-brand-cta.login-button-disabled {
    opacity: 0.6;
    cursor: default;
}
.login-button-spinner {
    width: 16px;
    height: 16px;
    margin-left: 10px;
    vertical-align: middle;
}
/* CTA wrapper: keeps the pill button and its spinner on one baseline. */
.brand-login-cta {
    display: flex;
    align-items: center;
}
/* Allow the pill CTA to be an <a> (Sauce-only login) as well as a <button>. */
a.btn-brand-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
/* SSO/variant screens: banner image + auxiliary links reuse brand tokens. */
.brand-login-banner {
    max-width: 100%;
    margin-bottom: 8px;
}
/* Whitelabel co-brand logo above the sign-in heading (Sauce logo stays in the
   top nav). Sized with max-height/max-width so any tenant logo fits cleanly. */
/* When a whitelabel co-brand logo is shown, top-align the form so the logo
   sits at the top of the card instead of being pushed down by centering. */
.brand-login-form.has-cobrand {
    justify-content: flex-start;
}
.brand-login-cobrand {
    text-align: center;
}
.brand-login-cobrand img {
    max-height: 48px;
    max-width: 240px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}
/* "enter your subdomain" row: field + fixed domain suffix on one line. */
.brand-login-subdomain {
    display: flex;
    align-items: center;
    gap: 12px;
}
.brand-login-subdomain .brand-input {
    flex: 1;
    min-width: 0;
}
.brand-login-subdomain-suffix {
    font-size: 18px;
    font-weight: 500;
    color: var(--color-ink);
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    /* Per the mobile design: flat full-width sections, copy above the green
       texture below the form, no bottom blocks. */
    .brand-login-main { padding: 8px 0 0; }
    .brand-login-card {
        flex-direction: column;
        max-width: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .brand-login-form { padding: 40px 24px; }
    .brand-login-visual {
        width: 100%;
        flex-direction: column-reverse;
    }
    .brand-login-texture { height: 260px; }
    .brand-login-copy { padding: 40px 24px; font-size: 32px; }
    .brand-blocks { display: none; }
    .brand-topnav { margin: 8px 8px 0; }
}