/* ============================================================================
   League Joe network — shared sign-in / sign-up styling  (assets/css/lj-auth.css)

   One neutral stylesheet for /login/ and /signup/ on every site in the League Joe
   network (League Joe, whitelabel companies, Make A Draft). The markup comes from
   userprofiles::renderAuthPage() / renderLoginModal(), so every site shares one
   structure and only the LOOK changes.

   HOW A BRAND CUSTOMISES THIS PAGE
   Do not copy rules. Set the --lj-auth-* tokens below on `.lj-auth` (and on
   `.lj-auth-modal` for the login pop-up) from the brand's own stylesheet:

       .lj-auth, .lj-auth-modal { --lj-auth-accent: var(--brand-primary); }

   Tokens are the whole customisation surface. If a brand needs a different
   structure, that is a change to this file for everybody — not a brand override.

   Written to look right with NO other framework CSS loaded (the Make A Draft site
   ships only Bootstrap), and to coexist with Bootstrap/Metronic when they are.
   ============================================================================ */

.lj-auth,
.lj-auth-modal {
    /* colour */
    --lj-auth-text:            #1f2937;
    --lj-auth-muted:           #5b6472;
    --lj-auth-surface:         #ffffff;
    --lj-auth-field-bg:        #ffffff;
    --lj-auth-line:            #dfe3ea;
    --lj-auth-line-strong:     #a9b1bf;
    --lj-auth-accent:          #2563eb;
    --lj-auth-accent-hover:    #1d4fd0;
    --lj-auth-accent-contrast: #ffffff;
    --lj-auth-link:            var(--lj-auth-accent);
    --lj-auth-focus:           var(--lj-auth-accent);
    --lj-auth-danger:          #b42318;
    --lj-auth-success:         #1a7f37;
    --lj-auth-notice-bg:       #eef4ff;
    --lj-auth-notice-line:     #b9cdfa;
    --lj-auth-network-bg:      #0f3d7a;
    --lj-auth-network-text:    #ffffff;
    --lj-auth-network-size:    .88rem;    /* the strip's text (and its "How does this work?" copy) */
    --lj-auth-network-logo-h:  1.6rem;    /* height of the League Joe mark in the strip */
    /* type */
    --lj-auth-font:            inherit;
    --lj-auth-title-font:      var(--lj-auth-font);
    --lj-auth-title-weight:    700;
    --lj-auth-title-transform: none;
    --lj-auth-title-size:      1.75rem;
    /* shape */
    --lj-auth-radius:          14px;
    --lj-auth-field-radius:    10px;
    --lj-auth-btn-radius:      10px;
    --lj-auth-btn-font:        var(--lj-auth-font);
    --lj-auth-btn-weight:      700;
    --lj-auth-card-border:     1px solid var(--lj-auth-line);
    --lj-auth-card-accent:     0 solid transparent;   /* e.g. 4px solid <brand> for a top bar */
    --lj-auth-shadow:          0 12px 36px rgba(15, 23, 42, .10);
    /* size */
    --lj-auth-width:           30rem;
    --lj-auth-width-wide:      44rem;
}

/* ---- page wrapper + card ------------------------------------------------- */
.lj-auth {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--lj-auth-width);
    margin: 2.5rem auto;
    padding: 0 1rem;
    font-family: var(--lj-auth-font);
    color: var(--lj-auth-text);
}
.lj-auth--wide { max-width: var(--lj-auth-width-wide); }
.lj-auth *, .lj-auth *::before, .lj-auth *::after { box-sizing: border-box; }

.lj-auth__card {
    background: var(--lj-auth-surface);
    border: var(--lj-auth-card-border);
    border-top: var(--lj-auth-card-accent);
    border-radius: var(--lj-auth-radius);
    box-shadow: var(--lj-auth-shadow);
    overflow: hidden;
}
.lj-auth__header { padding: 1.75rem 2rem 0; }
.lj-auth__title {
    margin: 0 0 .35rem;
    font-family: var(--lj-auth-title-font);
    font-weight: var(--lj-auth-title-weight);
    text-transform: var(--lj-auth-title-transform);
    font-size: var(--lj-auth-title-size);
    line-height: 1.15;
    color: var(--lj-auth-text);
}
.lj-auth__sub { margin: 0; color: var(--lj-auth-muted); font-size: 1rem; line-height: 1.45; }
.lj-auth__body { padding: 1.25rem 2rem 1.5rem; }
.lj-auth__foot {
    padding: 1rem 2rem 1.5rem;
    border-top: 1px solid var(--lj-auth-line);
    font-size: .95rem;
    color: var(--lj-auth-muted);
    text-align: center;
}
.lj-auth__foot p { margin: 0 0 .4rem; }
.lj-auth__foot p:last-child { margin-bottom: 0; }
.lj-auth a, .lj-auth-modal a { color: var(--lj-auth-link); }
.lj-auth :focus-visible, .lj-auth-modal :focus-visible { outline: 3px solid var(--lj-auth-focus); outline-offset: 2px; }

@media (max-width: 575.98px) {
    .lj-auth { margin: 1rem auto; padding: 0 .75rem; }
    .lj-auth__header { padding: 1.25rem 1.25rem 0; }
    .lj-auth__body { padding: 1rem 1.25rem 1.25rem; }
    .lj-auth__foot { padding: .9rem 1.25rem 1.25rem; }
}

/* ---- "part of the League Joe network" strip ------------------------------ */
.lj-auth__network {
    margin: 1.1rem 0 0;
    padding: .65rem 2rem;
    background: var(--lj-auth-network-bg);
    color: var(--lj-auth-network-text);
    font-size: var(--lj-auth-network-size);
    line-height: 1.4;
}
.lj-auth__network a { color: inherit; text-decoration: underline; }
.lj-auth__network-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .35rem .75rem; text-align: center; }
.lj-auth__network-logo { height: var(--lj-auth-network-logo-h); width: auto; }
.lj-auth__network details { margin-top: .4rem; text-align: left; }
.lj-auth__network summary { cursor: pointer; text-align: center; opacity: .9; }
.lj-auth__network details p { margin: .45rem 0 0; opacity: .95; }
@media (max-width: 575.98px) { .lj-auth__network { padding: .6rem 1.25rem; } }

/* ---- inline notice (e.g. "you already have an account") ------------------- */
.lj-auth__notice {
    margin: .25rem 0 1rem;
    padding: .9rem 1rem;
    background: var(--lj-auth-notice-bg);
    border: 1px solid var(--lj-auth-notice-line);
    border-radius: var(--lj-auth-field-radius);
    color: var(--lj-auth-text);
    font-size: .95rem;
    line-height: 1.45;
}
.lj-auth__notice[hidden] { display: none; }
.lj-auth__notice p { margin: 0 0 .6rem; }
.lj-auth__notice-title { font-weight: 700; }
.lj-auth__notice-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-top: .25rem; }
.lj-auth__notice-actions .lj-auth__btn { width: auto; margin: 0; }

/* ---- form controls (markup comes from $_Form, see form_class.php) -------- */
.lj-auth form, .lj-auth-modal form { margin: 0; }
.lj-auth .form-group, .lj-auth .fv-row, .lj-auth .control-group,
.lj-auth-modal .form-group, .lj-auth-modal .fv-row, .lj-auth-modal .control-group { margin: 0 0 1rem; position: static; }
.lj-auth label, .lj-auth-modal label {
    display: block;
    margin: 0 0 .3rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--lj-auth-text);
    position: static;
    transform: none;
}
.lj-auth .required, .lj-auth-modal .required { color: var(--lj-auth-danger); }
.lj-auth input[type="text"], .lj-auth input[type="email"], .lj-auth input[type="password"],
.lj-auth-modal input[type="text"], .lj-auth-modal input[type="email"], .lj-auth-modal input[type="password"] {
    display: block;
    width: 100%;
    min-height: 2.9rem;
    padding: .65rem .85rem;
    font: inherit;
    font-size: 1rem;
    color: var(--lj-auth-text);
    background: var(--lj-auth-field-bg);
    border: 1.5px solid var(--lj-auth-line-strong);
    border-radius: var(--lj-auth-field-radius);
    box-shadow: none;
}
.lj-auth input:focus, .lj-auth-modal input:focus { border-color: var(--lj-auth-focus); outline: 3px solid var(--lj-auth-focus); outline-offset: 1px; }
.lj-auth .help-inline { display: block; margin-top: .3rem; font-size: .85rem; color: var(--lj-auth-muted); }
.lj-auth .help-inline .success { color: var(--lj-auth-success); }
.lj-auth .help-block, .lj-auth .pwstrength { margin: .3rem 0 0; font-size: .8rem; line-height: 1.35; color: var(--lj-auth-muted); }
.lj-auth .fv-row:has(#passb) .pwstrength { display: none; }   /* hint once, under Password */
/* "Min 8 characters…" is a sign-up rule; on a sign-in form it only confuses. */
.lj-auth--login .pwstrength, .lj-auth-modal .pwstrength { display: none; }
.lj-auth .hidden, .lj-auth-modal .hidden { display: none !important; }   /* the email/username checks hide submit with .hidden */

/* Password field: the show/hide eye sits inside the input. */
.lj-auth .input-group, .lj-auth-modal .input-group { position: relative; display: block; }
.lj-auth .input-group > input, .lj-auth-modal .input-group > input { padding-right: 3rem; }
/* Bootstrap's .input-group squares the corners of a field that has a sibling (the eye); the eye
   is inside the field here, so keep every corner round. */
.lj-auth .input-group > input, .lj-auth-modal .input-group > input { border-radius: var(--lj-auth-field-radius) !important; }
.lj-auth .input-group-addon, .lj-auth-modal .input-group-addon {
    position: absolute; top: 0; right: .3rem; bottom: 0; z-index: 3;
    display: flex; align-items: center;
}
.lj-auth .input-group-addon a, .lj-auth-modal .input-group-addon a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.4rem; height: 2.4rem; border-radius: 8px;
    color: var(--lj-auth-muted); text-decoration: none;
}
.lj-auth .input-group-addon a:hover, .lj-auth-modal .input-group-addon a:hover { color: var(--lj-auth-text); }

/* Agreement checkbox: box on the left, wrapped lines hang beside it. */
.lj-auth label.checkbox, .lj-auth .form-check-label {
    position: relative; margin: 0; padding-left: 1.8rem;
    font-size: .9rem; font-weight: 500; line-height: 1.45;
}
.lj-auth label.checkbox input[type="checkbox"] {
    position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem; margin: 0;
    accent-color: var(--lj-auth-accent);
}
.lj-auth .form-check { padding-left: 0; }
.lj-auth .form-check .form-check-input { position: absolute; left: 0; top: .15rem; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--lj-auth-accent); }
.lj-auth .checkbox-indicator { display: none; }

/* "Forgot password?" line the login form carries. */
.lj-auth .password-reminder, .lj-auth-modal .password-reminder { margin: 0; font-size: .9rem; color: var(--lj-auth-muted); text-align: right; }
.lj-auth .form-group.text-right, .lj-auth-modal .form-group.text-right { margin-top: -.4rem; }

/* ---- buttons ------------------------------------------------------------- */
.lj-auth__btn,
.lj-auth button[type="submit"], .lj-auth-modal button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 2.9rem; padding: .65rem 1.4rem;
    font-family: var(--lj-auth-btn-font); font-size: 1rem; font-weight: var(--lj-auth-btn-weight);
    line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer;
    color: var(--lj-auth-accent-contrast);
    background: var(--lj-auth-accent);
    border: 2px solid var(--lj-auth-accent);
    border-radius: var(--lj-auth-btn-radius);
    box-shadow: none;
}
.lj-auth__btn:hover, .lj-auth button[type="submit"]:hover, .lj-auth-modal button[type="submit"]:hover {
    background: var(--lj-auth-accent-hover); border-color: var(--lj-auth-accent-hover); color: var(--lj-auth-accent-contrast);
}
.lj-auth__btn--block, .lj-auth button[type="submit"], .lj-auth-modal button[type="submit"] { width: 100%; }
.lj-auth__btn--outline { background: transparent; color: var(--lj-auth-accent); }
.lj-auth__btn--outline:hover { background: var(--lj-auth-notice-bg); color: var(--lj-auth-accent); }
.lj-auth .form-group--sm { margin: .5rem 0 0; display: block; }

/* ---- login pop-up (Bootstrap modal) -------------------------------------- */
.lj-auth-modal .modal-content { border: var(--lj-auth-card-border); border-radius: var(--lj-auth-radius); background: var(--lj-auth-surface); color: var(--lj-auth-text); font-family: var(--lj-auth-font); }
.lj-auth-modal .modal-header { border-bottom: 0; padding: 1.25rem 1.5rem .25rem; }
.lj-auth-modal .modal-title { font-family: var(--lj-auth-title-font); font-weight: var(--lj-auth-title-weight); text-transform: var(--lj-auth-title-transform); font-size: 1.5rem; line-height: 1.15; }
.lj-auth-modal .modal-body { padding: .5rem 1.5rem 1rem; }
.lj-auth-modal .modal-footer { border-top: 1px solid var(--lj-auth-line); justify-content: center; font-size: .92rem; color: var(--lj-auth-muted); padding: .9rem 1.5rem 1.1rem; }
.lj-auth-modal .lj-auth__lede { margin: 0 0 1rem; color: var(--lj-auth-muted); font-size: .95rem; line-height: 1.45; }
.lj-auth-modal .lj-auth__hint { margin: 1rem 0 0; font-size: .85rem; color: var(--lj-auth-muted); line-height: 1.4; }
@media (max-width: 575.98px) {
    .lj-auth-modal .modal-header { padding: 1rem 1rem .25rem; }
    .lj-auth-modal .modal-body { padding: .5rem 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .lj-auth *, .lj-auth-modal * { transition: none !important; animation: none !important; }
}