/*
 * iHMIS login screen.
 * Two-column split: sign-in form on the left, CHMIS hero artwork on the right.
 * The hero collapses away below 900px so the form keeps the full width on
 * tablets and phones (see the resize listener in app/view/Login.js).
 */

:root {
    --hmis-navy: #12325F;
    --hmis-navy-2: #1B4B8F;
    --hmis-blue: #1E63B8;
    --hmis-teal: #12A5A8;
    --hmis-ink: #1F2937;
    --hmis-muted: #64748B;
    --hmis-line: #E2E8F0;
}

/* ---------------------------------------------------------------- viewport */

.hmis-login-vp,
.hmis-login-vp .x-panel-body {
    background: #EEF3FA;
}

/* ------------------------------------------------------------- left column */

.hmis-login-left {
    background: #FFFFFF;
    box-shadow: 10px 0 44px rgba(18, 50, 95, 0.13);
    z-index: 3;
}

.hmis-login-left .x-panel-body,
.hmis-login-card,
.hmis-login-card .x-panel-body,
.hmis-login-form,
.hmis-login-form .x-panel-body {
    background: #FFFFFF;
}

/* Thin brand bar down the very edge of the form column. */
.hmis-login-accent {
    background: linear-gradient(180deg, var(--hmis-navy) 0%, var(--hmis-blue) 55%, var(--hmis-teal) 100%);
}

/*
 * Displayfields inherit a 32px min-height and an 8px top margin so they line up
 * with input fields. Nothing here sits next to an input, so both are dropped -
 * otherwise every caption carries ~15px of dead space and the stack drifts.
 */
.hmis-login-form .x-form-display-field,
.hmis-login-form .x-form-display-field-body,
.hmis-login-form .x-form-item-no-label > .x-form-item-body {
    margin-top: 0;
    min-height: 0;
}

.hmis-login-brand .x-form-display-field {
    color: var(--hmis-navy);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.2px;
    line-height: 1.25;
    text-align: center;
}

.hmis-login-tagline .x-form-display-field {
    color: var(--hmis-teal);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: center;
}

.hmis-login-welcome .x-form-display-field {
    color: var(--hmis-ink);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
}

.hmis-login-welcome-sub .x-form-display-field {
    color: var(--hmis-muted);
    font-size: 12.5px;
    text-align: center;
}

/* Hairline rule with a centred pulse glyph, echoing the hero artwork. */
.hmis-login-rule {
    background: linear-gradient(90deg, rgba(18, 165, 168, 0) 0%, rgba(18, 165, 168, 0.55) 50%, rgba(18, 165, 168, 0) 100%);
}

/* ------------------------------------------------------------------ fields */

.hmis-login-field .x-form-item-label-text {
    color: var(--hmis-navy) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}

/*
 * Ext 7 classic field markup is
 *   .x-form-trigger-wrap > .x-form-text-wrap > input.x-form-text
 * The visible box (background, border, radius) belongs on the trigger wrap;
 * the input inside must stay transparent and borderless or it double-draws.
 */
/*
 * These carry the .hmis-login-vp ancestor and !important on purpose.
 * resources/css/chmis-theme.css restyles fields and buttons system-wide with
 * !important, and it loads AFTER this file - so an equally specific rule here
 * would lose the tie. The login screen keeps its own roomier treatment
 * (taller inputs, 11px radius, tinted rest state, gradient CTA).
 */
.hmis-login-vp .hmis-login-field .x-form-trigger-wrap {
    background: #F7F9FD !important;
    border: 1.5px solid var(--hmis-line) !important;
    border-radius: 11px !important;
    box-shadow: none !important;
    overflow: hidden;
}

.hmis-login-vp .hmis-login-field .x-form-text {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0;
    color: var(--hmis-ink);
    font-size: 14.5px;
    font-weight: 600;
    height: 42px;
    line-height: 42px;
    padding: 0 13px;
}

.hmis-login-vp .hmis-login-field .x-form-trigger-wrap-focus {
    background: #FFFFFF !important;
    border-color: var(--hmis-blue) !important;
    box-shadow: 0 0 0 3px rgba(30, 99, 184, 0.14) !important;
}

.hmis-login-vp .hmis-login-field .x-form-trigger-wrap-invalid {
    border-color: #DC2626 !important;
}

.hmis-login-field .x-form-trigger {
    background-color: transparent;
    border: 0;
}

/* ------------------------------------------------------------- sign-in cta */

/*
 * Both the compiled theme's `.x-btn-default-medium` and the system layer's
 * `.x-btn.x-btn-default-medium` load after this file, and the latter uses
 * !important - so the brand gradient needs three classes plus !important to
 * survive. Without the .hmis-login-vp ancestor the CTA renders as a plain
 * white secondary button.
 */
.hmis-login-vp .x-btn.hmis-login-btn {
    background: linear-gradient(135deg, var(--hmis-navy) 0%, var(--hmis-blue) 55%, var(--hmis-teal) 100%) !important;
    background-color: var(--hmis-blue) !important;
    border: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 22px rgba(30, 99, 184, 0.30) !important;
    cursor: pointer;
}

.hmis-login-vp .x-btn.hmis-login-btn .x-btn-inner,
.hmis-login-vp .x-btn.hmis-login-btn .x-btn-icon-el {
    color: #FFFFFF !important;
    font-size: 14.5px;
    font-weight: 800;
    letter-spacing: 1.1px;
}

.hmis-login-vp .x-btn.hmis-login-btn.x-btn-over {
    background-color: var(--hmis-navy-2) !important;
    filter: brightness(1.08);
}

.hmis-login-vp .x-btn.hmis-login-btn.x-btn-pressed,
.hmis-login-vp .x-btn.hmis-login-btn.x-btn-menu-active {
    background-color: var(--hmis-navy) !important;
    box-shadow: 0 4px 12px rgba(30, 99, 184, 0.30) !important;
    filter: brightness(0.94);
}

.hmis-login-vp .x-btn.hmis-login-btn.x-btn-focus {
    box-shadow: 0 10px 22px rgba(30, 99, 184, 0.30), 0 0 0 3px rgba(18, 165, 168, 0.35) !important;
}

/* ------------------------------------------------------------------ footer */

.hmis-login-footer .x-form-display-field {
    color: var(--hmis-muted);
    font-size: 11px;
    line-height: 1.6;
    text-align: center;
}

/* ------------------------------------------------------------ right column */

/*
 * White, not a gradient: in the `contain` case (see the object-fit note below)
 * the letterbox bands sit directly against the poster's own near-white top and
 * bottom edges, so a white panel makes them invisible rather than reading as
 * empty space.
 */
.hmis-login-art {
    background: #FFFFFF;
    overflow: hidden;
    position: relative;
}

/*
 * Full-bleed hero. Ext.Img renders the <img> itself - there is no wrapper
 * element to target.
 *
 * `cover` rather than `contain`: contain fits the whole poster inside the
 * column and letterboxes it, which left visible white gaps above, below and
 * beside the artwork. cover fills the column edge to edge and crops instead.
 *
 * `cover` fills the column edge to edge - no letterbox gaps, which is the point.
 * object-fit is then re-asserted at RUNTIME by syncHeroFit() in
 * app/view/Login.js, which drops to `contain` only for a portrait column (where
 * cover would crop so hard the poster is unrecognisable). No media query can
 * test an element's own aspect ratio, hence the JS.
 *
 * Filling costs some side trim, because the column is squarer than the 3:2
 * poster at ordinary resolutions - roughly 5% per side at 1920x1080 and 14% at
 * 1440x900. See the syncHeroFit comment for the numbers and the proper fix.
 */
.hmis-login-hero-img {
    height: 100%;
    object-fit: cover;
    object-position: center center;
    width: 100%;
}