/* ==========================================================================
   AVICLAIM Backoffice - account forms
   --------------------------------------------------------------------------
   The white card, fields, buttons and message banners shared by every
   Views/Account page:

     LogOn          ForgotPassword     ResetPassword    (signed out)
     ChangePassword Register                            (signed in)

   This sheet styles the CARD ONLY - it never touches body, .wrapper20 or the
   application bar, so it is safe on the pages you reach while signed in,
   where the bar and the left menu have to keep working. The signed-out pages
   additionally link Styles/LoginForm.css, which turns the same
   .account-page wrapper into the full-page dark treatment.

   LINK IT FROM THE VIEW'S HeadContent, NOT FROM THE MASTER - both
   Dashboard.Master and SiteFlightService.Master open that hole after
   Content/Site.css and before Assets/style.css, which is the point in the
   cascade these rules are written for. Every selector is prefixed with
   .account-card so it outranks Site.css's bare input[type="text"] (pinned to
   200px) and Assets/style.css's a { color: #000 }.

   Palette and type follow Styles/GenericBackofficeHeader.css: ink #16293c,
   brand blue #0090c0, Open Sans (that sheet's @import pulls the font in).
   ========================================================================== */

/* ------------------------------------------------------------------- card */
.account-card {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 34px 40px 38px;
    background: #ffffff;
    border: 1px solid #e6edf4;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(6, 24, 40, .06);
    font-family: "Open Sans", "Segoe UI", Arial, sans-serif;
    color: #16293c;
    text-align: left;
}

/* Register carries eight fields; give it room for two columns */
.account-card.account-card--wide {
    max-width: 620px;
}

.account-card .account-logo {
    display: block;
    width: 132px;
    height: auto;
    margin: 0 auto 16px;
    border: 0;
}

.account-card .account-title {
    margin: 0 0 6px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.2px;
    color: #16293c;
}

.account-card .account-sub {
    margin: 0 0 24px;
    font-size: 13.5px;
    line-height: 1.55;
    color: #8194a6;
}

.account-card .account-sub:last-of-type {
    margin-bottom: 26px;
}

/* ----------------------------------------------------------------- fields */
.account-card .account-field {
    margin: 0 0 16px;
}

/* covers both plain <label> and Html.LabelFor, which emits the model's
   DisplayName and no class */
.account-card .account-field label {
    display: block;
    margin: 0 0 7px;
    font-size: 13px;
    font-weight: 600;
    color: #2b3f54;
}

/* two columns on the wider card, stacking again when there is no room */
.account-card .account-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.account-card .account-grid > .account-field {
    flex: 1 1 240px;
    min-width: 0;
}

/* the class prefix is what outranks Content/Site.css's input[type="text"] */
.account-card input[type="text"],
.account-card input[type="password"],
.account-card input[type="email"],
.account-card select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid #e2e8ef;
    border-radius: 7px;
    background-color: #f7f9fb;
    color: #16293c;
    font: 400 14px/44px "Open Sans", "Segoe UI", Arial, sans-serif;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

/* line-height on a select is ignored by some engines and clips text in
   others, so let the box centre it instead */
.account-card select {
    line-height: normal;
    padding-right: 38px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7f93' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.account-card input[type="text"]:focus,
.account-card input[type="password"]:focus,
.account-card input[type="email"]:focus,
.account-card select:focus {
    outline: none;
    background-color: #ffffff;
    border-color: #0e7fa5;
    box-shadow: 0 0 0 3px rgba(14, 127, 165, .14);
}

.account-card select:focus {
    background-color: #ffffff;
}

.account-card input::-webkit-input-placeholder { color: #a9b7c4; }

/* keep Chrome's autofill from repainting the field yellow */
.account-card input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #f7f9fb inset;
    -webkit-text-fill-color: #16293c;
}

/* a one-time code reads better spaced out */
.account-card #AuthCode {
    letter-spacing: 3px;
}

/* --------------------------------------------------------- helper controls */
.account-card .account-forgot {
    margin: 8px 0 0;
    text-align: right;
}

.account-card .account-remember {
    display: flex;
    align-items: center;
    margin: 20px 0 22px;
}

/* CheckBoxFor also emits a hidden input for the false case; it is
   display:none by default, so it takes no room in this flex row */
.account-card .account-remember input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0 9px 0 0;
    accent-color: #0e7fa5;
}

.account-card .account-remember label {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    color: #4a5f75;
    cursor: pointer;
}

/* Assets/style.css sets a { color: #000 } for the whole site */
.account-card .account-forgot a,
.account-card .account-foot a {
    font-size: 12.5px;
    font-weight: 600;
    color: #0e7fa5;
    text-decoration: none;
}

.account-card .account-forgot a:hover,
.account-card .account-forgot a:focus,
.account-card .account-foot a:hover,
.account-card .account-foot a:focus {
    color: #0090c0;
    text-decoration: underline;
}

.account-card .account-foot {
    margin: 22px 0 0;
    padding-top: 18px;
    border-top: 1px solid #eef2f7;
    text-align: center;
}

/* ----------------------------------------------------------------- submit */
.account-card .account-actions {
    margin: 22px 0 0;
}

.account-card input[type="submit"] {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 46px;
    border: 0;
    border-radius: 7px;
    background-color: #0e7fa5;
    color: #ffffff;
    font: 700 14.5px "Open Sans", "Segoe UI", Arial, sans-serif;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background-color .15s ease, box-shadow .15s ease;
}

.account-card input[type="submit"]:hover {
    background-color: #0090c0;
}

.account-card input[type="submit"]:active {
    background-color: #0b6c8d;
}

.account-card input[type="submit"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 127, 165, .32);
}

/* -------------------------------------------------- ViewData message banners */
/* ForgotPassword and ResetPassword report through ViewData["ErrorMessage"],
   ["SuccessMessage"] and ["TokenError"] rather than ModelState */
.account-card .account-alert {
    margin: 0 0 20px;
    padding: 11px 13px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

.account-card .account-alert--error {
    border: 1px solid #f6cfcc;
    background-color: #fdeceb;
    color: #a5342a;
}

.account-card .account-alert--success {
    border: 1px solid #c3e6d0;
    background-color: #edf8f1;
    color: #1e6b41;
}

/* an :empty banner still paints its border, and these are rendered
   unconditionally on some of the views */
.account-card .account-alert:empty {
    display: none;
}

/* -------------------------------------------------------------- validation */
.account-card .validation-summary-errors {
    margin: 0 0 20px;
    padding: 11px 13px;
    border: 1px solid #f6cfcc;
    border-radius: 7px;
    background-color: #fdeceb;
    color: #a5342a;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
}

.account-card .validation-summary-errors ul {
    margin: 6px 0 0;
    padding: 0 0 0 18px;
    list-style: disc outside;
    font-weight: 400;
}

.account-card .validation-summary-errors ul li {
    margin: 2px 0;
}

.account-card .field-validation-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #c0392b;
}

.account-card .input-validation-error {
    border-color: #e2a19b;
    background-color: #fdf6f5;
}

/* ------------------------------------------------------------------- small */
@media (max-width: 560px) {
    .account-card,
    .account-card.account-card--wide {
        padding: 30px 24px 34px;
    }

    .account-card .account-title {
        font-size: 24px;
    }
}