/* ============================================================
   ACS Water Billing - KEPRO-aligned login theme
   ------------------------------------------------------------
   Modernises Admin/LoginV2.aspx to match the KEPRO WMS auth screen
   (kepro-wms design-system.css .auth-wrap / .auth-hero / .auth-card)
   WITHOUT changing any markup, control IDs or page structure.

   Rules this file follows:

   1. Purely additive. Loaded LAST on the login page so it restyles the
      existing Bootstrap / fxt-* markup by selector alone. txtUserName,
      txtPassword and btnSubmit keep their IDs and their fxt-* wrappers,
      so the page's own main.js, validator.min.js and the ASP.NET postback
      contract are all untouched.

   2. TENANT THEMING IS PRESERVED. LoginV2.aspx calls getThemeSettings on
      load and then:
        - sets .fxt-bg-color background-color to the tenant's colour,
        - sets .fxt-bg-img background-image to the tenant's image,
        - runs updateTextColorBasedOnBackground(), which measures that
          background's luminance and writes an INLINE
          "color: #fff !important" (or #000) onto the panel's text nodes.
      So this file must not set a background-colour on .fxt-bg-color and
      must not fight that inline text colour - both are per-tenant data,
      not styling choices. Everything here is therefore shape, spacing,
      typography and control appearance only; text colour is left to the
      tenant script, and the form card is deliberately translucent white
      so it reads correctly on top of ANY tenant background colour.

   3. Structure already matches KEPRO. The page is a two-column split
      (form side + image side, image hidden under 767px) which is the same
      shape as KEPRO's .auth-wrap / .auth-hero / .auth-panel, so only the
      surface treatment needed aligning - no layout rewrite, no distortion.
   ============================================================ */

:root {
    --acsl-ink: #0f172a;
    --acsl-text: #334155;
    --acsl-muted: #64748b;
    --acsl-line: #e2e8f0;
    --acsl-surface: #ffffff;
    --acsl-primary: #1478be;
    --acsl-primary-dark: #0f5e97;
    --acsl-r-card: 18px;
    --acsl-r-control: 11px;
    /* Africa Cloud Space brand, sampled from the logo: deep blue behind the login
       vector, orange as the single action colour. Its own token so a future theme
       can move it without touching the panel rules. */
    --acsl-panel: #1D1C9D;
    --acsl-accent: #F17429;
    --acsl-accent-dark: #d8641d;
    --acsl-shadow: 0 18px 48px rgba(15, 23, 42, .16);
}

body {
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------- Form column ---------- */
/* No background-color here on purpose - that is tenant-owned (see note 2).
   min-height is 100% (NOT 100vh): the .fxt-bg-color COLUMN already carries
   min-height:100vh plus 50px/42px padding in the page's own style.css, so
   forcing another 100vh on this inner element stacks with that padding and
   pushes the page ~92px past the viewport, adding a pointless scrollbar.
   Filling the already-full-height parent gives the same centred result with
   no overflow. */
.fxt-template-layout1 .fxt-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 100%;
}

/* ---------- The form itself, as a KEPRO-style auth card ---------- */
.fxt-template-layout1 .fxt-form {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: rgba(255, 255, 255, .96);
    border-radius: var(--acsl-r-card);
    box-shadow: var(--acsl-shadow);
    padding: 34px 30px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* Text colour INSIDE the card must be forced to ink.
   updateTextColorBasedOnBackground() measures the tenant's .fxt-bg-color and writes an inline
   "color:#fff !important" onto every non-input descendant when that colour is dark. That was
   correct while the form sat directly on the tenant colour, but this file gives the form its own
   near-white card, so on a dark-themed tenant those labels/headings would become white-on-white.
   Inputs and the submit button are excluded by that script (:not(input):not(button)) and are safe.
   !important is required to beat the script's inline style. */
.fxt-template-layout1 .fxt-form,
.fxt-template-layout1 .fxt-form h3,
.fxt-template-layout1 .fxt-form label,
.fxt-template-layout1 .fxt-form .control-label,
.fxt-template-layout1 .fxt-form .form-group,
.fxt-template-layout1 .fxt-form .toggle-password {
    color: var(--acsl-ink) !important;
}

/* The page's own emphasis classes still win for the two headings, so the product name keeps its
   accent colour on the light card instead of being flattened to ink. */
.fxt-template-layout1 .fxt-form h3.text-danger {
    color: #b3243b !important;
}

.fxt-template-layout1 .fxt-form h3.text-primary {
    color: var(--acsl-primary) !important;
}

/* Headings: size/weight/spacing. */
.fxt-template-layout1 .fxt-form h3 {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    line-height: 1.35;
}

.fxt-template-layout1 .fxt-form hr {
    border: 0;
    border-top: 1px solid var(--acsl-line);
    margin: 16px 0 18px;
}

.fxt-template-layout1 .fxt-form .form-group {
    margin-bottom: 16px;
    position: relative;
}

.fxt-template-layout1 .fxt-form .control-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-bottom: 7px;
    opacity: .75;
}

/* ---------- Inputs ---------- */
.fxt-template-layout1 .fxt-form .form-control {
    height: auto;
    padding: 12px 14px;
    border-radius: var(--acsl-r-control);
    border: 1px solid var(--acsl-line);
    background: #f8fafc;
    color: var(--acsl-ink);
    font-size: 14px;
    box-shadow: none;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.fxt-template-layout1 .fxt-form .form-control:focus {
    border-color: var(--acsl-primary);
    background: var(--acsl-surface);
    box-shadow: 0 0 0 3px rgba(241, 116, 41, .22);
    outline: none;
}

/* #94a3b8 rather than a paler grey: on the #f8fafc field background a lighter placeholder
   falls well under the WCAG contrast minimum. */
.fxt-template-layout1 .fxt-form .form-control::placeholder {
    color: #94a3b8;
}

/* Password reveal icon - keep it aligned with the taller input */
.fxt-template-layout1 .fxt-form .toggle-password.field-icon {
    position: absolute;
    right: 14px;
    top: 38px;
    cursor: pointer;
    color: var(--acsl-muted);
    z-index: 2;
}

/* ---------- Submit button ---------- */
/* Targets .btn-block inside the login form rather than .btn-danger, so the
   markup's existing class list does not need to change. */
.fxt-template-layout1 .fxt-form .btn-block {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--acsl-r-control);
    /* ACS blue.
   Orange is the ACCENT, not the button. White on #F17429 measures 2.9:1, which
   fails WCAG AA for normal text (4.5:1) and even the 3:1 large-text floor; white
   on the ACS blue measures 12.4:1. So the blue takes the button and the orange
   does the work it can do safely - the vector's needle, focus rings, and hover
   detail, where contrast is not carrying meaning. */
    background: var(--acsl-panel);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    box-shadow: 0 8px 20px rgba(20, 120, 190, .28);
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    text-shadow: none;
}

.fxt-template-layout1 .fxt-form .btn-block:hover,
.fxt-template-layout1 .fxt-form .btn-block:focus {
    background: #15147a;
    color: #fff;
    box-shadow: 0 12px 26px rgba(29, 28, 157, .34);
    transform: translateY(-1px);
}

.fxt-template-layout1 .fxt-form .btn-block:active {
    transform: none;
}

/* ---------- Portal link ---------- */
.fxt-template-layout1 .fxt-form .pull-right a {
    font-size: 13px;
    font-weight: 600;
    color: var(--acsl-primary);
}

.fxt-template-layout1 .fxt-form .pull-right a:hover {
    color: var(--acsl-primary-dark);
    text-decoration: underline;
}

/* ---------- Social footer ---------- */
.fxt-template-layout1 .fxt-footer {
    margin-top: 22px;
}

.fxt-template-layout1 .fxt-socials {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.fxt-template-layout1 .fxt-socials li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .9);
    color: var(--acsl-text);
    font-size: 14px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.fxt-template-layout1 .fxt-socials li a:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, .16);
}

/* ---------- The panel ---------- */
/*
   background-image itself stays cascade-driven - the page ships the ACS vector as the
   default and getThemeSettings() replaces it with a tenant or platform image. Only the
   fit, the tint behind it and the strapline are set here.

   The tint matters: the vector is deliberately transparent, so this colour is what
   shows through it. A tenant that sets only a colour still gets a branded panel with
   the ACS artwork on top; a tenant that sets an image covers the lot.
*/
.fxt-template-layout1 .fxt-bg-img {
    position: relative;
    background-color: var(--acsl-panel, #1D1C9D);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
}

/* A headline and a description, bottom-left, the way Cloudflare sets its sign-in
   copy. Sits above the artwork rather than beside it so there is nothing to reflow
   at narrow widths. Both lines are cascade-driven the same way the panel image is:
   a default lives here in markup, and getThemeSettings() overwrites the description
   with .text() when a tenant or platform has set one. The headline is not
   customizable - only the description is, per the brief. */
.fxt-template-layout1 .fxt-bg-img .acs-panel-copy {
    width: 100%;
    padding: 0 48px 56px;
}

.fxt-template-layout1 .fxt-bg-img .acs-panel-title {
    margin: 0 0 10px;
    max-width: 22ch;
    color: #ffffff;
    font-size: 26px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    text-shadow: 0 1px 18px rgba(4, 40, 55, .35);
}

.fxt-template-layout1 .fxt-bg-img .acs-panel-desc {
    margin: 0;
    max-width: 34ch;
    color: rgba(255, 255, 255, .86);
    font-size: 14.5px;
    line-height: 1.55;
    font-weight: 400;
    text-shadow: 0 1px 12px rgba(4, 40, 55, .30);
}

/* ---------- Responsive ---------- */
@media (max-width: 767px) {
    .fxt-template-layout1 .fxt-form {
        padding: 26px 20px;
        max-width: 100%;
    }
}