/* =====================================================================
   login-custom.css  —  WiSDoM5 login page skin
   ---------------------------------------------------------------------
   Dedicated, maintainable visual layer for login.aspx. Layered on top of
   the DevExpress theme — purely cosmetic. No control IDs, markup structure
   or server-side logic depend on this file.

   Scoping: most rules are scoped to #login (the <table id="login"> card) so
   they cannot leak to other pages. Editor / button rules target DevExpress
   class names + id-ends-with selectors so the asp:Login naming-container
   prefix (Login1_*) is irrelevant and no markup IDs change.

   !important is used deliberately to override the baked-in DevExpress theme
   and inline width attributes; kept to the minimum needed to win.

   url() paths are relative to this file (web root) — same as login.aspx,
   so 'i/flags/...' and 'App_Themes/...' resolve identically to the page.
   ===================================================================== */

/* ---- Page background -------------------------------------------------- */
html, body {
    height: 100%;
    margin: 0;
}
body {
    background: linear-gradient(135deg, #eef2fb 0%, #e4ecf7 40%, #dde9f5 100%) !important;
    background-attachment: fixed !important;
    font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif !important;
}
/* The outer layout table carries an inline background-color:#DBDBDB — clear it
   so the body gradient shows through. */
#aspnetForm > table {
    background-color: transparent !important;
}

/* ---- Card ------------------------------------------------------------- */
table#login {
    /* 440 (not 430): logo cell 150px + field column 199px = 349px, which must
       fit inside the 42px side padding of .tdLoginMiddleCenter without the
       card's overflow:hidden clipping the fields' right edge. */
    width: 440px !important;
    border-collapse: separate !important;
    background: #ffffff !important;
    border: 1px solid rgba(20, 40, 80, 0.06) !important;
    border-radius: 18px !important;
    box-shadow: 0 24px 60px -18px rgba(25, 55, 110, 0.28),
                0 6px 18px -8px rgba(25, 55, 110, 0.18) !important;
    overflow: hidden !important;
    position: relative !important;
}
/* 6px blue->teal accent bar across the very top of the card. */
table#login::before {
    content: "" !important;
    position: absolute !important;
    top: 0; left: 0; right: 0;
    height: 6px !important;
    background: linear-gradient(90deg, #1e4fd6, #2a73e8 55%, #18b07b) !important;
    z-index: 1;
}

/* Kill the legacy 9-slice corner / edge image cells of the old skin. */
#login .tdLoginUpperLeft, #login .tdLoginUpperMiddle, #login .tdLoginUpperRight,
#login .tdLoginMiddleLeft, #login .tdLoginMiddleRight,
#login .tdLoginBottomLeft, #login .tdLoginBottomMiddle, #login .tdLoginBottomRight {
    background: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    font-size: 0 !important;
    border: 0 !important;
}
/* Card interior padding (clears the accent bar at the top). */
#login .tdLoginMiddleCenter {
    background: none !important;
    padding: 40px 42px 34px !important;
    text-align: left !important;
}

/* ---- Logo ------------------------------------------------------------- */
/* Full logo (incl. the coloured triangle over the "M" and the (TM) mark)
   was clipped because the cell was narrow with background-size:auto.
   Set the image explicitly here so it is independent of theme load order. */
#login td.w5LoginLogo {
    width: 150px !important;
    min-width: 150px !important;
    height: 60px !important;
    background-image: url('App_Themes/W5_Default/Images/wisdom5.png') !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-size: contain !important;
    overflow: visible !important;
    padding-bottom: 16px !important;
}

/* ---- Title ------------------------------------------------------------ */
#login .loginTitle {
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #16203a !important;
}

/* ---- Labels ----------------------------------------------------------- */
#login td.tdLoginLeft {
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #2a3550 !important;
    letter-spacing: .2px !important;
    padding: 8px 12px 8px 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}
#login td.tdLoginRight {
    /* No horizontal padding: keeps each field's right edge flush with the
       column's right edge, which the button row aligns to below. */
    padding: 8px 0 !important;
    vertical-align: middle !important;
}

/* ---- Editors: fill, border, radius, focus ring ------------------------ */
/* Editor text inside the boxes. */
#login .dxeEditArea_DevEx,
#login input[type=text],
#login input[type=password] {
    font-size: 14px !important;
    color: #1c2536 !important;
    background-color: transparent !important;
    padding: 4px 2px !important;
}
/* Apply the light fill to the EDITOR TABLES ONLY (text box + button edit /
   combo). Use background-color (not the `background` shorthand) so we never
   wipe a background-image — important for the Language combo, whose flag is
   injected as an inline background-image on this same table by the control's
   SetComboBoxImage() script. */
#login table.dxeTextBox_DevEx,
#login table.dxeButtonEdit_DevEx {
    background-color: #f7f9fc !important;
    border: 1.5px solid #d4dcec !important;
    border-radius: 10px !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s !important;
}
#login table.dxeTextBox_DevEx:focus-within,
#login table.dxeButtonEdit_DevEx:focus-within {
    border-color: #2a73e8 !important;
    background-color: #ffffff !important;
    box-shadow: 0 0 0 3px rgba(42, 115, 232, 0.15) !important;
}

/* Keep the WIDER wrapper cells transparent — filling them would draw a grey
   strip past the right edge of each (narrower) field. */
#login td[id$='_CC'],
#login td.dxic,
#login table.dxeValidDynEditorTable,
#login td.tdLoginRight {
    background-color: transparent !important;
}

/* Field widths: Company, User Name, Password, Language all 199px. */
table#Login1_ddlCompany,
table#Login1_txtTempUser,
table#Login1_Password,
table#Login1_CultureList1_aspxCultures {
    width: 199px !important;
}

/* ---- Language flag in the closed box ---------------------------------- */
/* The control's SetComboBoxImage() sets the SELECTED culture's flag as an
   inline background-image on this combo table (s.mainElement) — that is the
   same image source the dropdown list items use (ImageUrlField). We make it
   visible in the closed state by: sizing/repeat here, keeping the inner cells
   transparent (rule above), and the control's PaddingLeft=30px clears the
   text off the flag. A UK flag is set as a NON-!important fallback so a flag
   still shows if the script has not run yet; the inline image (live culture)
   overrides it. */
table#Login1_CultureList1_aspxCultures {
    background-image: url('i/flags/en-GB.gif');   /* fallback only — JS sets the live culture flag */
    background-repeat: no-repeat !important;
    background-position: 8px center !important;
    background-size: 20px 13px !important;
}

/* ---- Buttons: side by side, Log In first, right-aligned to the fields -- */
/* Flex row wraps both DevExpress button DIVs (added in login.aspx markup).
   Width 199px = field column width; margin-left:auto pushes the row's right
   edge to the field column's right edge. The buttons are wider than 199px in
   total and do not shrink (flex-shrink:0), so they overflow to the LEFT while
   their right edge stays pinned to the field right edge. The fixed width keeps
   the layout table from widening, so the alignment holds. */
.login-btn-row {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    width: 199px !important;
    margin-left: auto !important;
}

/* Shared button frame (id-ends-with → theme/naming-container agnostic). */
#login [id$='_LoginButton'],
#login [id$='_ASPxbtnForgotPassword'],
#login [id$='_btnChangePassword'] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 46px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    border-radius: 11px !important;
    background-image: none !important;
    overflow: hidden !important;
    cursor: pointer !important;
    transition: transform .08s, box-shadow .15s, background-color .15s !important;
}
#login [id$='_LoginButton'] .dxb,
#login [id$='_ASPxbtnForgotPassword'] .dxb,
#login [id$='_btnChangePassword'] .dxb {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 14px !important;
}
#login [id$='_LoginButton'] .dx-vam,
#login [id$='_ASPxbtnForgotPassword'] .dx-vam,
#login [id$='_btnChangePassword'] .dx-vam {
    white-space: nowrap !important;
    letter-spacing: .3px !important;
}

/* Primary: Log In — blue gradient, white text. */
#login [id$='_LoginButton'] {
    width: 170px !important;
    min-width: 170px !important;
    border: none !important;
    background-color: #1e4fd6 !important;
    background-image: linear-gradient(135deg, #2a73e8, #1e4fd6) !important;
    box-shadow: 0 8px 18px -6px rgba(30, 79, 214, 0.55) !important;
}
#login [id$='_LoginButton'] .dx-vam {
    color: #ffffff !important;
    font: 700 15px/1 'Segoe UI', system-ui, sans-serif !important;
}
#login [id$='_LoginButton']:hover {
    background-image: linear-gradient(135deg, #2f7cf2, #2150e0) !important;
    box-shadow: 0 11px 24px -6px rgba(30, 79, 214, 0.72) !important;
    transform: translateY(-1px) !important;
}

/* Secondary: Forgot Password / Change Password — outlined, narrower. */
#login [id$='_ASPxbtnForgotPassword'],
#login [id$='_btnChangePassword'] {
    width: 150px !important;
    min-width: 150px !important;
    background-color: #ffffff !important;
    border: 1.5px solid #cdd8ee !important;
    box-shadow: none !important;
}
#login [id$='_ASPxbtnForgotPassword'] .dx-vam,
#login [id$='_btnChangePassword'] .dx-vam {
    color: #2a4a8e !important;
    font: 700 13.5px/1 'Segoe UI', system-ui, sans-serif !important;
}
#login [id$='_ASPxbtnForgotPassword']:hover,
#login [id$='_btnChangePassword']:hover {
    background-color: #f3f7ff !important;
    border-color: #2a73e8 !important;
    transform: translateY(-1px) !important;
}

/* ---- Remember-me, footer, error -------------------------------------- */
#login .w5LoginDevelopedby {
    font-family: 'Segoe UI', system-ui, sans-serif !important;
    font-size: 11px !important;
    color: #6b7280 !important;
    text-align: left !important;
    padding-top: 16px !important;
}
#login .errorMessage {
    padding-top: 6px !important;
}