/* ==========================================================================
   iBorneoPRO - theme/dhru/css/auth.css

   Glue for the two DHRU-pattern auth pages (signin.php / signup.php). Both load
   DHRU's own theme first - bootstrap, theme.css and themes/theme8.css - which
   already supplies the card, the input-group, .page-title, .max-360 (450px),
   .mw-500 and the gold .btn-primary. What DHRU's client layout normally adds on
   top of those is only this:

     - the centring the client area gives the login card (auth pages are standalone)
     - the message box the login/registration templates print into
       (it exists in the markup, empty, and JavaScript fills it)
     - the body of the registration password-strength meter

   Rules marked "from DHRU" are copied from the Fusion source
   (templates/default5/css/custom.css, templates/default/css/theme.css).

   Deliberately NOT copied: that theme turns links white inside .page-login
   (`color:white !important`) because their login panel is a dark translucent
   block. This card is the plain white DHRU card, so links keep the theme's
   purple (themes/theme8.css sets `a{color:#37126C}`) and stay readable.
   ========================================================================== */

/* DHRU centres the login card inside the client area; these pages stand alone. */
.auth-shell{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:2rem 1rem;
}

/* from DHRU */
.page-registration{
    max-width:100%;
    flex:100%;
    padding:0;
}
.card.card-simple-form{
    padding:0;
}

/* The box the login / registration templates print their messages into. */
.alert-login,
.alert-reg{
    display:none;
    margin-bottom:1rem;
}
.alert-login.is-visible,
.alert-reg.is-visible{
    display:block;
}

/* The registration password-strength meter (a popover body in DHRU). */
.password-strength-box{
    display:none;
    margin-top:.5rem;
}
.password-strength-box.is-visible{
    display:block;
}
.password-strength-box .progress{
    height:6px;
    margin:.35rem 0 .25rem 0;
    background:rgba(0,0,0,.08);
}
.password-strength-box .progress-bar{
    width:0;
    transition:width .2s ease;
}

@media (max-width: 480px){
    .page-login{
        padding:1rem !important;
    }
}