/* mis-forms.css
   Shared styles for the account-side form pages (login, register, manage, etc.).
   Loaded from Views/Shared/_Layout.cshtml. Scoped to unique .mis-* class names
   so it never collides with the Bootstrap 3 dashboards. */

/* ============================================================
   Card shell
   ============================================================ */
/* Every property this rule used to carry was measured against
   _Layout.cshtml: the -15px sides cancelled that layout's .body-content
   padding, the -20px top cancelled its margin-top, and `100vh - 130px`
   was its header plus footer. _ViewStart now points at _LayoutAdmin and
   no view loads _Layout at all, so all four numbers described a page
   that no longer exists — the card was being pulled 20px up into the
   page head, inset 7px from each edge instead of bleeding, and given an
   arbitrary height.

   It asks its container for nothing now. Under the admin shell
   .mis-content supplies the padding and .mis-main supplies the ground
   tint; on the plain (signed-out) path the card's own border and shadow
   carry it. The three pages using this — Cloud Storage, Register and
   Change Password — all sit inside one of those two. */
.mis-form-shell {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 0 0 32px;
    width: 100%;
}
.mis-card {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border: 1px solid #E8EDF4;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(14,32,56,.08), 0 2px 6px rgba(14,32,56,.04);
    overflow: hidden;
}
.mis-card.mis-card-wide { max-width: 720px; }
.mis-card-head {
    padding: 20px 24px;
    background: linear-gradient(180deg, #FAFDFB 0%, #fff 100%);
    border-bottom: 1px solid #E8EDF4;
    display: flex;
    align-items: center;
    gap: 12px;
}
.mis-card-head .mis-dot {
    width: 8px; height: 8px; border-radius: 3px;
    background: var(--mis-accent);
    box-shadow: 0 0 0 4px rgba(var(--mis-accent-rgb),.14);
    flex: 0 0 auto;
}
.mis-card-head h3 {
    margin: 0;
    font-size: 16.5px;
    font-weight: 600;
    color: #0E2038;
    line-height: 1.4;
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
}
.mis-card-head .mis-sub {
    display: block;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    color: #8496AE;
    line-height: 1.4;
    margin-top: 2px;
    font-weight: 400;
    word-break: break-all;
}
.mis-card-body { padding: 22px 24px 24px; }
.mis-card-intro + .mis-card-body { padding-top: 20px; }

/* ============================================================
   Form fields
   ============================================================ */
.mis-form .form-group { margin: 0 0 14px; }
.mis-form label,
.mis-form .control-label {
    display: block;
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: #0E2038;
    margin: 0 0 6px;
    line-height: 1.5;
    /* Explicitly allow wrap so long Khmer labels don't overflow the card. */
    white-space: normal;
    text-align: left;
}
.mis-form .form-control {
    display: block;
    width: 100%;
    height: auto;
    padding: 11px 14px;
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-size: 15px;
    line-height: 1.55;
    color: #0E2038;
    background: #fff;
    border: 1.5px solid #E8EDF4;
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .16s, box-shadow .16s, background-color .16s;
}
.mis-form .form-control:hover { border-color: #CBD5E0; }
.mis-form .form-control:focus {
    outline: none;
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb),.16);
    background: #FCFDFB;
}
.mis-form select.form-control { padding-right: 36px; background-position: right 12px center; }
.mis-form .checkbox { padding-left: 0; }
.mis-form .checkbox label { font-weight: 500; }

/* Kill Bootstrap 3 .form-horizontal negative margins so children stay in the card padding. */
.mis-form.form-horizontal .form-group { margin-left: 0; margin-right: 0; }
.mis-form.form-horizontal .form-group > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* Two-column pair layout — collapses to single-col on narrow viewports. */
.mis-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 0;
}
.mis-row > * { min-width: 0; }
@media (max-width: 560px) {
    .mis-row { grid-template-columns: 1fr; gap: 0; }
}

/* ============================================================
   Validation
   ============================================================ */
.mis-form .text-danger,
.mis-form .field-validation-error {
    display: block;
    color: #B33232;
    font-size: 12.5px;
    margin-top: 6px;
    line-height: 1.5;
}
.mis-form .validation-summary-errors {
    background: #FCEDED;
    border: 1px solid #F5C6CB;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 0 0 14px;
    color: #B33232;
    font-size: 13px;
}
.mis-form .validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* ============================================================
   Submit button (matches the public site's b-pri)
   ============================================================ */
.mis-form .btn-mis-primary,
.mis-form input[type="submit"].btn-primary,
.mis-form input[type="submit"].btn-mis-primary,
.mis-form button[type="submit"].btn-mis-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 20px;
    background: var(--mis-accent);
    color: #fff;
    border: 1.5px solid var(--mis-accent);
    border-radius: 10px;
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(var(--mis-accent-rgb),.26);
    transition: background-color .16s, box-shadow .16s, transform .16s;
    white-space: nowrap;
}
.mis-form .btn-mis-primary:hover,
.mis-form input[type="submit"].btn-primary:hover,
.mis-form input[type="submit"].btn-mis-primary:hover,
.mis-form button[type="submit"].btn-mis-primary:hover {
    background: var(--mis-accent-dark);
    border-color: var(--mis-accent-dark);
    box-shadow: 0 8px 22px rgba(var(--mis-accent-rgb),.32);
    color: #fff;
}
.mis-form .btn-mis-primary:active,
.mis-form input[type="submit"].btn-primary:active,
.mis-form input[type="submit"].btn-mis-primary:active,
.mis-form button[type="submit"].btn-mis-primary:active { transform: translateY(1px); }

.mis-form-actions { margin-top: 4px; }
.mis-form-hint {
    margin: 14px 0 0;
    text-align: center;
    font-size: 12.5px;
    color: #8496AE;
    line-height: 1.7;
}

/* ============================================================
   Login extras — brand mark, captcha row, hint links
   ============================================================ */
/* Quiet, centred card header for the sign-in page: one mark, one title, no
   accent dot and no sub-line — everything above the first field competes for
   attention, so there is deliberately very little of it. */
.mis-card-intro {
    padding: 34px 28px 6px;
    text-align: center;
    background: #fff;
}
.mis-card-intro img {
    display: block;
    max-width: 124px;
    width: 100%;
    height: auto;
    margin: 0 auto 18px;
}
.mis-card-intro h1 {
    margin: 0;
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #0E2038;
    line-height: 1.45;
    letter-spacing: -.01em;
}
/* Captcha image and its input read as one control: the image is flush against
   the text box, sharing the field radius and matching its height. */
.mis-captcha { display: flex; align-items: stretch; }
.mis-captcha img {
    flex: 0 0 auto;
    width: 112px;
    height: auto;
    object-fit: cover;
    border: 1.5px solid #E8EDF4;
    border-right: none;
    border-radius: 10px 0 0 10px;
    background: #F6F9FC;
    cursor: pointer;
}
.mis-captcha .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border-radius: 0 10px 10px 0;
}
.mis-form-hint a { color: var(--mis-accent); font-weight: 600; text-decoration: none; }
.mis-form-hint a:hover { color: var(--mis-accent-dark); text-decoration: underline; }

/* ============================================================
   Circular flag language toggle (used in _LoginPartial.cshtml)
   ============================================================ */
.mis-lang { display: inline-flex; align-items: center; gap: 6px; padding: 15px 12px; }
.mis-lang-opt {
    display: inline-block;
    width: 28px; height: 28px;
    border-radius: 50%;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    background: #fff;
    opacity: .55;
    transition: opacity .18s, border-color .18s, box-shadow .18s, transform .18s;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(14,32,56,.12);
    vertical-align: middle;
    line-height: 0;
}
.mis-lang-opt:hover { opacity: .95; transform: translateY(-1px); }
.mis-lang-opt.on {
    opacity: 1;
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb),.18), 0 2px 4px rgba(14,32,56,.1);
    cursor: default;
}
.mis-lang-opt.on:hover { transform: none; }
/* Support both the legacy inline SVG and the new PNG flag files. Images fill
   the circular button and are clipped to a disc via border-radius:50% +
   object-fit:cover. */
.mis-lang-opt svg,
.mis-lang-opt img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.navbar-nav > li > .mis-lang { padding: 15px 12px; }

/* ============================================================
   Navbar brand polish (subtle typography refinement)
   ============================================================ */
.navbar-default .navbar-brand {
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-weight: 700;
    letter-spacing: -.005em;
    color: #ffffff !important;
    transition: color .15s;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:active { color: #ffffff !important; }

/* ============================================================
   Sign-in screen

   A two-panel layout: the brand on the left, the form on the right.
   The old screen was a single card floating on a tinted strip that
   did not reach the top or bottom of the window, so it read as an
   unfinished page rather than a designed one.

   The left panel is decoration and carries no information the user
   needs, so it is the first thing dropped on a narrow screen.

   Colours come from the accent tokens in mis-app.css, which the
   layout loads before this file, so the sign-in screen follows
   whatever accent the customizer is set to.
   ============================================================ */

/* The form column comes first, both in the markup and here. It is also first
   in the DOM rather than being moved with `order`, so the tab order matches
   what is on screen: someone arriving to sign in reaches the email field
   before the brand panel's slide arrows, not after them. */
/* The form column comes first, both in the markup and here. It is also first
   in the DOM rather than being moved with `order`, so the tab order matches
   what is on screen: someone arriving to sign in reaches the email field
   before the brand panel's slide arrows, not after them. */
.mis-login {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    /* Sits inside _LayoutBlog's <main>, which is already offset by the 72px
       fixed site header, so the panels take what is left of the window rather
       than a full 100vh (which would push the page into a scroll). */
    min-height: calc(100vh - 72px);
}

/* ---- right: brand ----

   This panel is the public hero (Views/Home/Blog.cshtml `.hero`) rather
   than a sign-in decoration of its own: the same #EAF7F0 mint ground,
   the same #D3EBDF hairline, navy copy with a green second line, the
   white flag pill, the checked assurance row and the dots / counter /
   arrow cluster. A visitor moving from the marketing page to sign in
   should not feel they have crossed into a different product.

   The values are literal rather than accent-token driven, unlike the
   form side. They belong to the public site's palette, which does not
   follow the appearance customizer — the mint, the navy and the
   #D3EBDF hairline are tuned to each other and to the green, and a
   violet accent dropped into them would only break the set. */
.mis-login-brand {
    align-items: center;
    background: #EAF7F0;
    /* The hairline faces the form, which is now on the left. */
    border-left: 1px solid #D3EBDF;
    color: #5A6B82;
    display: flex;
    justify-content: center;
    overflow: hidden;
    padding: 56px 48px;
    position: relative;
}

/* The hero has no ornament of its own, so the old white ring is gone;
   what is left is a very faint green bloom that keeps the large mint
   field from reading as flat paint. */
.mis-login-brand::after {
    background: radial-gradient(circle, rgba(30, 158, 90, .08), transparent 70%);
    border-radius: 50%;
    bottom: -220px;
    content: "";
    height: 520px;
    /* Bleeds off the outer edge of the page, which is the right now that the
       brand panel has moved there. */
    right: -170px;
    position: absolute;
    width: 520px;
}

.mis-login-brand-inner {
    max-width: 470px;
    position: relative;
    text-align: left;
    width: 100%;
    z-index: 1;
}

/* the hero's .flag */
.mis-login-flag {
    align-items: center;
    background: #fff;
    border: 1px solid #E8EDF4;
    border-radius: 100px;
    box-shadow: 0 1px 2px rgba(14, 32, 56, .06), 0 2px 8px rgba(14, 32, 56, .05);
    color: #213B2C;
    display: inline-flex;
    font-size: 13.5px;
    gap: 9px;
    margin-bottom: 22px;
    padding: 6px 16px 6px 7px;
}
.mis-login-flag em {
    background: var(--mis-brand);
    border-radius: 7px;
    color: #fff;
    font-size: 12.5px;
    font-style: normal;
    font-weight: 600;
    line-height: 1.95;
    padding: 1px 12px;
}

/* the hero's h1 — navy, with the second line in brand green */
.mis-login-brand h2 {
    color: #0E2038;
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-size: clamp(23px, 2.4vw, 32px);
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.55;
    margin: 0 0 16px;
}
.mis-login-brand h2 span { color: var(--mis-brand); }

.mis-login-lede {
    color: #5A6B82;
    font-size: 15.5px;
    line-height: 1.9;
    margin: 0;
    max-width: 31em;
}

/* The hero's .assure, but a two-column grid rather than its wrapping
   row. The hero carries three short claims; this carries the five
   service names, and five items left to wrap land ragged — two, then
   two, then one reads as the list it actually is. */
.mis-login-assure {
    display: grid;
    font-size: 13.5px;
    gap: 11px 20px;
    grid-template-columns: 1fr 1fr;
    margin-top: 24px;
}
.mis-login-assure span {
    align-items: center;
    color: #5A6B82;
    display: flex;
    gap: 8px;
    line-height: 1.5;
    min-width: 0;
}
.mis-login-assure svg { flex: none; }

/* the hero's .hnav — dots, Inter counter, arrows */
.mis-login-hnav {
    align-items: center;
    display: flex;
    gap: 18px;
    margin-top: 34px;
}
.mis-login-count {
    color: #8496AE;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 600;
    min-width: 46px;
}
.mis-login-arws { display: flex; gap: 8px; margin-left: auto; }
.mis-login-arw {
    background: #fff;
    border: 1.5px solid #E8EDF4;
    border-radius: 12px;
    color: #0E2038;
    cursor: pointer;
    display: grid;
    height: 42px;
    padding: 0;
    place-items: center;
    transition: border-color .18s ease, color .18s ease;
    width: 42px;
}
.mis-login-arw:hover { border-color: var(--mis-brand); color: var(--mis-brand-dark); }

.mis-login-foot {
    bottom: 26px;
    color: #8496AE;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 1;
}

/* ---- left: the form ----

   The form used to sit bare on a flat white panel, which left the
   heading, the fields and the button floating with nothing holding
   them together. It is now a white card on a very faint neutral
   ground: the ground is what lets a white surface cast a shadow at
   all, and the card is what gives the eye an edge to read the
   spacing against.

   The ground is neutral rather than accent-tinted on purpose — a
   green wash would fight the eleven other accents the customizer
   offers. The accent shows up only where it means something: the
   hairline at the top of the card, the focus ring, the checkbox,
   the links and the submit button. */
.mis-login-panel {
    align-items: center;
    /* the public site's --tint. Near enough to white to read as a clean
       ground, far enough off it that the white card can cast a shadow. */
    background: #F6F9FC;
    display: flex;
    justify-content: center;
    padding: 48px 28px;
    position: relative;
}

.mis-login-form {
    background: var(--mis-surface, #fff);
    border: 1px solid rgba(16, 24, 40, .07);
    border-radius: 20px;
    /* Three layers, not one: a hairline that reads as an edge, a close
       shadow that seats the card, and a wide, very soft one that gives
       it height off the page. A single large blur just looks smudged. */
    box-shadow:
        0 1px 2px rgba(16, 24, 40, .04),
        0 12px 26px -10px rgba(16, 24, 40, .12),
        0 34px 60px -28px rgba(16, 24, 40, .18);
    max-width: 424px;
    overflow: hidden;
    padding: 40px 38px 34px;
    position: relative;
    width: 100%;
}

/* The one piece of pure decoration: a 3px accent hairline across the
   top edge, fading out at both ends so it reads as a highlight rather
   than a stripe. */
.mis-login-form::before {
    background: linear-gradient(
        90deg,
        transparent,
        var(--mis-accent) 22%,
        var(--mis-accent-dark) 50%,
        var(--mis-accent) 78%,
        transparent);
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

/* ---- centred head, flush-left fields ----
   The mark, the name and the sub-line share a centre line, and the button
   spans the card, so the top of the card still reads as a deliberate object
   rather than a fragment of a wider form.

   The field labels used to share that centre line too. They no longer do:
   a centred label sits over the middle of a full-width input, so the eye has
   to travel back to the left edge to start reading the field it names, and it
   made this the only form in the product that labelled its fields differently
   from all the others. */
.mis-login-head { margin-bottom: 26px; text-align: center; }
/* 22px/600, down from 26px/700. It was sized to carry the brand name; it
   is a page title now, and a title does not need to outweigh the button. */
.mis-login-head h1 {
    color: var(--mis-ink, #111827);
    font-family: 'Kantumruy Pro','Khmer OS Battambang','Noto Sans Khmer',system-ui,sans-serif;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.45;
    margin: 0;
}
.mis-login-head p {
    color: var(--mis-muted, #6b7280);
    font-size: 14px;
    line-height: 1.6;
    margin: 7px 0 0;
}

/* The mark above the heading, on every width. It used to appear only
   under 900px, standing in for the brand panel once that was dropped;
   now that the brand panel carries no logo of its own, this is the only
   one on the screen and it belongs on the card at all sizes.

   `margin: 0 auto 22px` is what centres it — the image is display:block,
   so without the auto sides it sat hard against the card's left padding
   while everything it introduced was centred beneath it. 22px below to
   sit evenly under the card's own 40px of breathing room above. */
.mis-login-mark { display: block; height: auto; margin: 0 auto 16px; width: 56px; }

/* ---- fields ----
   Taller than the shared .mis-form defaults (48px against ~44px) and a
   touch rounder. There are only four controls on this screen, so they
   can afford the room, and the extra height is what makes the card
   read as premium rather than dense. */
.mis-login .mis-form .form-group { margin-bottom: 18px; }
.mis-login .mis-form label {
    color: var(--mis-ink, #111827);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    margin-bottom: 7px;
    /* Left, like every other form in the product. These were centred, which
       put "Email" floating over the middle of a full-width input with nothing
       under its first character -- the eye has to travel back to the left edge
       to start reading the field it labels. The card heading above stays
       centred; that is a title, not a label. */
    text-align: left;
}
/* An error belongs under the start of the field it is about, not the middle. */
.mis-login .mis-form .field-validation-error { text-align: left; }
.mis-login .mis-form .form-control {
    background: #FBFCFD;
    border: 1.5px solid var(--mis-line, #E6EAF0);
    border-radius: 12px;
    font-size: 15px;
    min-height: 48px;
    padding: 12px 15px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mis-login .mis-form .form-control::placeholder { color: var(--mis-faint, #9ca3af); }
.mis-login .mis-form .form-control:hover { background: #fff; border-color: #CBD5E1; }
.mis-login .mis-form .form-control:focus {
    background: #fff;
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 4px rgba(var(--mis-accent-rgb), .14);
    outline: none;
}

/* ---- security code: image, input, and a refresh the user can see ---- */
.mis-login-captcha { align-items: stretch; display: flex; gap: 8px; }
/* The image is drawn at exactly 118x48 by AccountController's Captcha
   action, so at this size there is nothing to scale and nothing to crop.
   `contain` rather than `cover` is for the one width where the box is
   narrower (<=480px): cover cut ~6px off each side there, which on a wide
   first or last digit was enough of it to make the code ambiguous. The
   background matches the ground the SVG paints, so the few letterboxed
   pixels that leaves are invisible. */
.mis-login-captcha img {
    background: #F6F9FC;
    border: 1.5px solid var(--mis-line, #E6EAF0);
    border-radius: 12px;
    cursor: pointer;
    flex: none;
    height: 48px;
    object-fit: contain;
    width: 118px;
}
/* The field wrapper takes the rest of the line; the refresh button lives
   inside it (.mis-field-act), so this row is two boxes and not three. */
.mis-login-captcha .mis-field { flex: 1; min-width: 0; }
.mis-login-captcha .form-control { width: 100%; }

/* ---- remember me + forgot, on one line ---- */
.mis-login-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 2px 0 22px;
}
.mis-login-row .checkbox { margin: 0; }
.mis-login-row .checkbox label {
    align-items: center;
    color: var(--mis-muted, #6b7280);
    display: flex;
    font-size: 13.5px;
    font-weight: 500;
    gap: 8px;
    padding-left: 0;
}
/* accent-color paints the native tick in the brand green, which keeps
   the real checkbox — and with it the keyboard and screen-reader
   behaviour — instead of the usual hidden-input-plus-fake-box. */
.mis-login-row .checkbox input[type="checkbox"] {
    accent-color: var(--mis-accent);
    cursor: pointer;
    flex: none;
    height: 16px;
    margin: 0;
    position: static;
    width: 16px;
}
.mis-login-row .mis-login-forgot { margin-left: auto; }
.mis-login-row .mis-login-forgot a {
    border-radius: 6px;
    color: var(--mis-accent);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: color .14s ease;
}
.mis-login-row .mis-login-forgot a:hover {
    color: var(--mis-accent-dark);
    text-decoration: underline;
}

/* ---- submit ----
   The vertical gradient and the accent-tinted shadow are the whole
   point of this button: on a white card a flat fill reads as a block
   of colour, while the light-to-dark face plus a coloured shadow
   reads as a raised, pressable object. */
.mis-login .mis-form-actions { margin-top: 2px; }
.mis-login .mis-form .btn-mis-primary {
    /* The hero's .b-pri, to the value: flat brand green, 12px radius,
       15.5px/600, and its 0 4px 14px green shadow. The gradient face this
       button briefly wore looked richer on its own but read as a different
       button from the two on the page the user has just come from. */
    background: var(--mis-accent);
    border-color: var(--mis-accent);
    border-radius: 12px;
    box-shadow: 0 4px 14px rgba(var(--mis-accent-rgb), .26);
    font-size: 15.5px;
    min-height: 50px;
    padding: 14px 28px;
    transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease;
}
.mis-login .mis-form .btn-mis-primary:hover {
    background: var(--mis-accent-dark);
    border-color: var(--mis-accent-dark);
    box-shadow: 0 8px 22px rgba(var(--mis-accent-rgb), .32);
    transform: translateY(-1px);
}
.mis-login .mis-form .btn-mis-primary:active {
    box-shadow: 0 2px 6px -2px rgba(var(--mis-accent-rgb), .45);
    transform: translateY(0);
}

/* A green ring for everything that takes focus.

   Note that under _LayoutBlog -- which is the layout the sign-in screen
   renders in -- this is outranked and does not apply: that layout carries
   `#v4Body :focus-visible { outline:3px solid var(--gold) }`, and an id beats
   any number of classes, so buttons and links here show the public site's
   gold accessibility outline instead. That is left alone deliberately: gold
   is the site's focus colour, it is what the marketing pages show, and it is
   the higher-contrast of the two. This rule still holds on the pages that
   load this file under the app shell. */
.mis-login a:focus-visible,
.mis-login button:focus-visible,
.mis-login input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--mis-accent);
    outline-offset: 2px;
}

/* The text fields are the one place that outline has to go, and beating an
   id means naming it. What the layout's rule does to a field is not just a
   colour: it also sets `border-radius:6px`, so the autofocused email field
   opened with an amber box around it AND its 12px corners squared off, on
   top of the green ring the field draws itself.

   Nothing is lost by removing it. The field's own focus state -- an accent
   border plus a 4px accent halo -- is a stronger indicator than the outline
   it replaces, and it is the one every other form in the product uses. */
#v4Body .mis-login .mis-form .form-control:focus-visible { outline: none; }

/* ---- validation ---- */
.mis-login .validation-summary-errors {
    background: #FBE7E7;
    border: 1px solid #F3C9C9;
    border-radius: 12px;
    color: #B02A2A;
    font-size: 13px;
    margin-bottom: 18px;
    padding: 11px 14px;
}
.mis-login .validation-summary-errors ul { margin: 0; padding-left: 18px; }
.mis-login .validation-summary-errors ul:empty,
.mis-login .validation-summary-errors:empty { display: none; }

/* ------------------------------------------------------------
   Narrow: the brand panel goes, the form takes the window
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .mis-login { grid-template-columns: minmax(0, 1fr); }
    .mis-login-brand { display: none; }
    .mis-login-panel { padding: 40px 20px 52px; }
}

/* Below the card's own width there is nothing left for a ground to
   show, so the card drops its frame and the panel becomes the page —
   a bordered card inset by 16px on a 360px screen wastes the only
   space there is. */
@media (max-width: 480px) {
    .mis-login-panel {
        background: var(--mis-surface, #fff);
        padding: 28px 18px 40px;
    }
    .mis-login-form {
        border: 0;
        border-radius: 0;
        box-shadow: none;
        /* With the padding gone the fields sit flush against the card box,
           and overflow:hidden — which only existed to clip ::before to the
           radius — would shave the focus ring off their left and right. */
        overflow: visible;
        padding: 0;
    }
    .mis-login-form::before { display: none; }
    .mis-login-head h1 { font-size: 20px; }
    .mis-login-captcha img { width: 104px; }
}

/* someone who asked for less motion still gets the layout */
@media (prefers-reduced-motion: reduce) {
    .mis-login .mis-form .btn-mis-primary { transition: none; }
    .mis-login .mis-form .btn-mis-primary:hover { transform: none; }
    .mis-login .mis-field-act.on { transition: none; }
}

/* ============================================================
   Sign-in brand panel — the product mockup from the public site

   This is the .shot browser-window mockup out of the public
   homepage's hero (Views/Home/Blog.cshtml, #pageMain), ported so the
   sign-in screen leads with the same product visual the marketing
   site does.

   Two deliberate differences from the original:

   * Class names are prefixed .ls-. The v18 markup uses .win, .app,
     .side, .main, .row and .chart, which are far too generic to drop
     into this page — .row in particular would pick up Bootstrap's
     grid margins and tear the mockup apart.

   * The brand colours are our accent tokens rather than v18's fixed
     green, so the mockup follows the appearance customizer along with
     the rest of the screen. The semantic colours (amber for low
     stock, green for paid) stay literal, because those carry meaning
     and should not move with a theme.

   The hero's floating "receipt issued in under 3 seconds" badge is
   not ported: it is a sales claim, and this is a staff sign-in.
   ============================================================ */

.mis-login-shot {
    margin: 34px 0 0;
    max-width: 470px;
    width: 100%;
}

/* ---- the hero image ----
   The slides are the same uploads the public hero shows, and those images are
   already photographic device mockups with their own framing -- so there is no
   browser chrome drawn around them any more, just the picture with the corner
   radius and lift the rest of this panel uses. */
.mis-login-shot .ls-img {
    border-radius: 16px;
    box-shadow: 0 24px 56px rgba(14, 32, 56, .14), 0 6px 16px rgba(14, 32, 56, .07);
    display: block;
    height: auto;
    width: 100%;
}

/* The panel always carries .has-shot, so this is only here to hold the
   column at the mockup's width. The logo, rule and brand <p> that the
   rest of this block used to tune no longer exist. */
.mis-login-brand.has-shot .mis-login-brand-inner { max-width: 470px; }

/* ============================================================
   Brand panel — all three hero mockups

   The public hero cycles three product shots: the dashboard, the
   clinic patient list, and the phone. Slide 1 was ported first; this
   adds 2 and 3 and rotates between them.

   The rotation is much slower than the public site's 7s. That page is
   selling and wants you to see all three; this one is a backdrop to a
   password field, and movement beside a form you are typing into is a
   distraction. It also stops entirely for prefers-reduced-motion, and
   whenever the tab is hidden.
   ============================================================ */

/* ---- the deck ---- */
.mis-login-deck { margin: 34px 0 0; max-width: 470px; position: relative; width: 100%; }

/* All three slides share one grid cell, so the deck is always as tall as its
   tallest slide and nothing above it moves when the slide changes. Taking the
   inactive ones out of flow instead would let the deck resize on every
   rotation, which bounced the logo and heading up and down. */
.mis-login-deck { display: grid; }
.mis-login-deck .mis-login-shot {
    grid-area: 1 / 1;
    align-self: start;
    margin: 0;
    opacity: 0;
    transition: opacity .5s ease;
    visibility: hidden;
}
.mis-login-deck .mis-login-shot.on { opacity: 1; visibility: visible; }

/* ---- dots ---- */
.mis-login-dots {
    align-items: center;
    display: flex;
    gap: 9px;
}
/* The hero's .dt. White dots would have vanished on the mint, so these take
   its #C3D5CB / #1E9E5A pair; the active one grows into a capsule rather
   than carrying the hero's animated progress fill, because this deck runs at
   11s and a bar creeping for eleven seconds beside a password field is
   exactly the movement this screen was built to avoid. */
.mis-login-dots button {
    background: #C3D5CB;
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    height: 9px;
    padding: 0;
    transition: background-color .3s ease, width .3s ease;
    width: 9px;
}
.mis-login-dots button:hover { background: #8FBAA3; }
.mis-login-dots button[aria-selected="true"] { background: var(--mis-brand); width: 34px; }
@media (max-height: 720px) {
    .mis-login-deck { margin-top: 18px; }
}
@media (max-height: 620px) {
    .mis-login-deck, .mis-login-hnav { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .mis-login-deck .mis-login-shot { transition: none; }
}

/* ============================================================
   Sign-in — cleanup pass

   Removing rather than adding. What made the screen busy was
   repetition and two competing backgrounds, not a lack of polish.
   ============================================================ */

/* The panel's own background, ornament and logo rules used to be
   re-stated here to undo an earlier dark-green build. They are gone:
   the panel is defined once, up in "left: brand", as the hero's mint.

   What is worth keeping from that pass is only the spacing. */
.mis-login-deck { margin-top: 30px; }

/* ------------------------------------------------------------
   The form side

   One spacing step, used everywhere. The groups were 14px apart, the
   remember/forgot row 20px with a -2px pull, and the heading 26px —
   close enough to look accidental rather than intended.
   ------------------------------------------------------------ */
.mis-login-panel .mis-form .form-group { margin: 0 0 16px; }
.mis-login-head { margin-bottom: 24px; }
.mis-login-head p { margin-top: 6px; }
.mis-login-row { margin: 0 0 20px; }

/* the button carries the word alone, so it keeps the hero .btn padding */
.mis-login-panel .mis-form .btn-mis-primary { gap: 0; padding: 14px 28px; }

/* ---- validation sits with the fields, not adrift above them ---- */
.mis-login .validation-summary-errors { margin-bottom: 16px; }

/* ============================================================
   Sign-in under the public layout

   The screen renders inside _LayoutBlog to pick up the real site
   header, and that layout opens with a reset:

       body#v4Body img { max-width:100%; display:block; }

   Specificity (1,0,2) — an id — so it beats every .mis-login rule
   above, and the mark ignored its max-width and filled the card.

   Only the width still needs guarding. The reset's display:block is
   what this image wants anyway, and the mark is no longer hidden at
   any width, so the display half of this guard is gone.

   !important rather than prefixing with body#v4Body: that would
   silently re-break the sizing if the page were ever moved to another
   layout, and the point here is only to win against a global element
   reset, which is what !important is legitimately for.
   ============================================================ */
/* The width has to be restated with !important: the layout's reset is
   `body#v4Body img { max-width:100% }` at (1,0,1), which beat the rule above
   and let the mark fill the card. 56px rather than the 92px this used to be --
   the old artwork had wording in it that needed the size to be legible; this
   one is a disc, and at 92px it was the loudest thing on a form. */
.mis-login-mark { max-width: 56px !important; }

/* ============================================================
   External sign-in (Views/Account/_ExternalLoginsListPartial)

   One block for both pages that show it: the sign-in screen, where it
   sits under the submit button inside .mis-login, and Register, where
   it sits at the foot of a .mis-card. Only the spacing differs, so the
   button itself is defined once and .mis-login adjusts the gaps.

   The button is deliberately NOT accent-tinted. Every other button on
   these pages follows the appearance customizer, but this one carries
   Google's four-colour mark, and Google's brand terms ask for it on
   white or a single neutral. A green-on-green button with a red-blue-
   yellow glyph in it also simply looks wrong.
   ============================================================ */
.mis-oauth { margin-top: 20px; }

/* "or", with a rule through it. The rule is drawn by the two ::before /
   ::after boxes rather than a border on the parent, so the gap around
   the word scales with the text instead of being a fixed inset. */
.mis-oauth-sep {
    align-items: center;
    color: var(--mis-muted, #6b7280);
    display: flex;
    font-size: 12.5px;
    gap: 12px;
    margin-bottom: 16px;
    text-transform: lowercase;
}
.mis-oauth-sep::before,
.mis-oauth-sep::after {
    background: #E8EDF4;
    content: "";
    flex: 1 1 auto;
    height: 1px;
}
.mis-oauth-sep span { flex: 0 0 auto; }

.mis-oauth-form { margin: 0 0 10px; }
.mis-oauth-form:last-child { margin-bottom: 0; }

.mis-oauth-btn {
    align-items: center;
    background: #fff;
    border: 1px solid #DBE3EC;
    border-radius: 12px;
    color: #1F2937;
    cursor: pointer;
    display: flex;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    gap: 10px;
    justify-content: center;
    min-height: 48px;
    padding: 12px 20px;
    transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .12s ease;
    width: 100%;
}
.mis-oauth-btn:hover {
    background: #FAFBFD;
    border-color: #C3CEDC;
    box-shadow: 0 4px 12px rgba(14,32,56,.08);
}
.mis-oauth-btn:active {
    box-shadow: none;
    transform: translateY(1px);
}
/* The accent ring the fields already use, so the focus treatment on
   this button matches the rest of the form rather than the browser
   default it would otherwise fall back to. */
.mis-oauth-btn:focus-visible {
    outline: 2px solid var(--mis-accent);
    outline-offset: 2px;
}
.mis-oauth-mark { flex: 0 0 auto; }

/* Under the sign-in layout the submit button already carries a 4px
   shadow spread, so the separator needs a little more room above it
   than the 20px the card version uses. */
.mis-login .mis-oauth { margin-top: 24px; }

/* Field hint, used by the finish-signing-up form for the line
   explaining why the email cannot be edited. */
.mis-hint {
    color: var(--mis-muted, #6b7280);
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    margin-top: 6px;
}

/* A read-only field must not look like one waiting for input. */
.mis-form .form-control[readonly] {
    background: #F4F6F9;
    color: #4B5563;
    cursor: default;
}


/* ============================================================
   Notices (.mis-alert) — see Views/Shared/_MisAlert.cshtml

   Replaces the bare .validation-summary-errors block on the newer
   form pages. The old class is left alone: it is still what
   Html.ValidationSummary emits across the rest of the app, and
   restyling it there would change pages nobody asked about.

   Grid rather than flex so a wrapped second line stays aligned
   with the first instead of running back under the icon.
   ============================================================ */
.mis-alert {
    align-items: start;
    border: 1px solid;
    border-radius: var(--mis-radius-sm, 10px);
    column-gap: 10px;
    display: grid;
    font-size: 13px;
    grid-template-columns: 18px 1fr;
    line-height: 1.6;
    margin: 0 0 16px;
    padding: 12px 14px;
}
.mis-alert-icon {
    display: block;
    /* Optical centring against the first line of 13px/1.6 text — the
       icon box is 18px tall against a ~21px line, so half the
       difference puts its middle on the text's middle. */
    margin-top: 1px;
}
.mis-alert-body { min-width: 0; }
.mis-alert-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0;
}
.mis-alert-title + .mis-alert-text,
.mis-alert-title + .mis-alert-list { margin-top: 5px; }
.mis-alert-text { margin: 0; }
.mis-alert-list {
    list-style: disc;
    margin: 0;
    padding-left: 17px;
}
.mis-alert-list li + li { margin-top: 3px; }

/* Long values get quoted back inside these — a mistyped Bakong id, a
   path — and an unbroken one would otherwise push the card wide. */
.mis-alert code,
.mis-alert-list li { overflow-wrap: anywhere; }

.mis-alert-error {
    background: #FDF2F2;
    border-color: #F3C9C9;
    color: #9F2C2C;
}
.mis-alert-success {
    background: #F0FAF4;
    border-color: #BFE5CE;
    color: #1B6B3F;
}
.mis-alert-warn {
    background: #FFF8E6;
    border-color: #F4E3B8;
    color: #7A5B12;
}
.mis-alert-info {
    background: #F2F6FD;
    border-color: #CBDBF5;
    color: #24487F;
}

/* The field the summary is pointing at. Set by the view on the
   inputs whose keys are in ModelState, so the red block above and
   the box below agree about what is wrong. */
.mis-form .form-control.is-invalid {
    background: #FFFBFB;
    border-color: #E0A0A0;
}
.mis-form .form-control.is-invalid:focus {
    border-color: #D06A6A;
    box-shadow: 0 0 0 3px rgba(208,106,106,.16);
}

/* ============================================================
   Payment method chooser (/payment_website)

   A radio group that reads as a list of cards. The whole row is
   the <label>, so the hit target is the card rather than the
   12px dot — this is a money decision made on a phone.
   ============================================================ */
.mis-method-list {
    display: grid;
    gap: 10px;
}
.mis-method {
    align-items: start;
    background: #fff;
    border: 1.5px solid var(--mis-line, #E6EAF0);
    border-radius: var(--mis-radius-sm, 10px);
    cursor: pointer;
    display: grid;
    font-weight: 400;
    gap: 12px;
    grid-template-columns: 18px 1fr;
    margin: 0;
    padding: 12px 14px;
    transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.mis-method:hover { border-color: #C3CEDC; }
.mis-method input[type="radio"] {
    accent-color: var(--mis-accent);
    margin: 2px 0 0;
}
.mis-method-body { display: block; min-width: 0; }
.mis-method-name {
    color: var(--mis-ink, #111827);
    display: block;
    font-size: 14px;
    font-weight: 600;
}
.mis-method .mis-sub { display: block; margin-top: 2px; }

/* :has() rather than a class toggled by script, or one rendered on
   the way out -- a server-rendered class goes stale the moment the
   other radio is clicked and leaves both cards highlighted. */
.mis-method:has(input:checked) {
    background: rgba(var(--mis-accent-rgb), .04);
    border-color: var(--mis-accent);
    box-shadow: 0 0 0 3px rgba(var(--mis-accent-rgb), .12);
}
.mis-method:focus-within {
    outline: 2px solid var(--mis-accent);
    outline-offset: 2px;
}

/* ============================================================
   Sign-in — fields with a mark inside them

   All of this is scoped to .mis-login. The .mis-field wrapper is
   only used by the sign-in form; Register and Change Password
   share .mis-form with it, and they have no marks to place.

   The wrapper is what makes the mark possible at all: the input
   cannot draw one itself, and a background-image on it would not
   follow the focus colour.
   ============================================================ */
.mis-login .mis-field { display: block; position: relative; }

/* 15px matches the field's own left padding, so the mark starts where
   the text would have. currentColor is set here and inherited by the
   glyph's strokes, which is what lets the focus rule below move it. */
.mis-login .mis-field-ico {
    color: #9AA8BC;
    left: 15px;
    pointer-events: none;   /* the mark is not the hit target; the field is */
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transition: color .16s ease;
}
/* :focus-within, not :focus on the input — the wrapper is what has to
   react, and this also keeps the mark lit while the reveal button
   inside the same wrapper holds focus. */
.mis-login .mis-field:focus-within .mis-field-ico { color: var(--mis-accent); }

/* 44px = 15px gutter + 18px mark + 11px before the text. Text that
   started at the usual 15px would sit on top of the mark. Only fields
   that actually have a mark get it -- the security code's field has the
   code image sitting to its left and needs no glyph of its own. */
.mis-login .mis-field:has(> .mis-field-ico) .form-control { padding-left: 44px; }

/* ---- trailing action button inside a field ----
   Two controls use this: the password reveal and the security code's
   refresh. Both are styled as nothing until their script adds .on,
   because neither can do anything without JavaScript and a button that
   does nothing when pressed is worse than no button at all. */
.mis-login .mis-field-act { display: none; }
.mis-login .mis-field-act.on {
    align-items: center;
    background: none;
    border: 0;
    border-radius: 8px;
    color: #8496AE;
    cursor: pointer;
    display: flex;
    height: 34px;
    justify-content: center;
    padding: 0;
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    transition: color .14s ease, background-color .14s ease;
    width: 34px;
}
.mis-login .mis-field-act.on:hover {
    background: rgba(var(--mis-accent-rgb), .08);
    color: var(--mis-accent-dark);
}
/* Room for the button, but only on a field that has one — the email
   field would otherwise carry 46px of empty right padding. */
.mis-login .mis-field-hasact .form-control { padding-right: 46px; }

/* One glyph at a time, chosen by the same attribute the assistive
   technology reads, so the two cannot get out of step. */
.mis-login .mis-field-act .mis-peek-off { display: none; }
.mis-login .mis-field-act[aria-pressed="true"] .mis-peek-on { display: none; }
.mis-login .mis-field-act[aria-pressed="true"] .mis-peek-off { display: block; }
.mis-login .mis-field-act[aria-pressed="true"] { color: var(--mis-accent); }

/* The layout's `body#v4Body img { max-width:100% }` reset does not
   reach SVG, but its `display:block` sibling rule does not either —
   so these are set here rather than inherited from anywhere. */
.mis-login .mis-field-ico,
.mis-login .mis-field-act svg { display: block; flex: none; }

/* ============================================================
   Sign-in — autofill

   Chrome, Edge and Safari paint an autofilled field with their own
   background (a pale blue-lilac) and their own text colour, and they
   do it with an internal style that beats `background`. The result
   on this card was two lilac boxes and three white ones, which is
   how the screen looked to anyone whose browser knew their email.

   An inset box-shadow 100px deep is the one thing that covers it:
   the shadow is painted over the browser's background but under the
   text. Because the focus ring on these fields is also a box-shadow,
   the focus state has to restate both — an inset fill first, then
   the ring outside it.
   ============================================================ */
.mis-login .mis-form .form-control:-webkit-autofill,
.mis-login .mis-form .form-control:-webkit-autofill:hover {
    -webkit-box-shadow: inset 0 0 0 100px #FBFCFD;
    -webkit-text-fill-color: var(--mis-ink, #111827);
    border-color: var(--mis-line, #E6EAF0);
    caret-color: var(--mis-ink, #111827);
}
.mis-login .mis-form .form-control:-webkit-autofill:focus,
.mis-login .mis-form .form-control:-webkit-autofill:active {
    -webkit-box-shadow:
        inset 0 0 0 100px #fff,
        0 0 0 4px rgba(var(--mis-accent-rgb), .14);
    border-color: var(--mis-accent);
}
/* Firefox names its own, and takes a plain background. */
.mis-login .mis-form .form-control:autofill {
    background: #FBFCFD;
    color: var(--mis-ink, #111827);
}

/* ============================================================
   Sign-in — the security code row on a phone
   ============================================================ */
/* ---- the code row, on a very narrow screen ----
   Three controls on one line stay on one line down to about 360px: the
   card is edge-to-edge by then, so 104 for the image and 48 for the
   refresh still leave the input around 150px, which is more than enough
   for five digits. Below ~340px it is not, so the input takes a line of
   its own and the image and the refresh share the one under it.

   The image keeps its own width when that happens. Letting it grow into
   the free space stretched a 118px drawing across the whole card, and
   because it is object-fit:contain the digits did not grow with it --
   they just sat marooned in the middle of a very wide box. The refresh
   goes to the far edge instead, which reads as a deliberate pair. */
@media (max-width: 340px) {
    .mis-login-captcha { flex-wrap: wrap; }
    .mis-login-captcha .mis-field { flex: 1 0 100%; order: -1; }
}

@media (prefers-reduced-motion: reduce) {
    .mis-login .mis-field-ico,
    .mis-login .mis-field-act.on { transition: none; }
}