/* ===========================================================================
   DataSense.LogonForm - the login dialog (design: "Option 2 - DataSense Blue").
   Linked from Views/Logon/Logon.cshtml only. Every rule is scoped to the
   dialog (.form-login-dialog / .ds-logon-form) or to the login page body
   (.ds-logon-page, added by LogonForm), so no other screen is affected.
   =========================================================================== */

/* ---- page background and the modal mask behind the dialog ---- */
.ds-logon-page {
    background-color: #eef3f9;
}
.ds-logon-page > .x-mask {
    background-color: #eef3f9;
    opacity: .6;
    filter: alpha(opacity=60);
}

/* ---- the window is a frameless modal host; the form draws the dialog ---- */
.x-window.form-login-dialog,
.form-login-dialog .x-window-body {
    background: transparent;
    border: 0;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

/* The prototype's border and shadow go on the window: the form fills it
   exactly and the window clips its content, so a shadow on the form is lost. */
.x-window.form-login-dialog {
    border-radius: 7px;
    box-shadow: 0 0 0 1px #c8d5e3, 0 10px 32px rgba(24, 49, 75, .08);
}

.ds-logon-form {
    background: #fff;
    border-radius: 7px;
    overflow: hidden;
}
.ds-logon-form,
.ds-logon-form .x-panel-body,
.ds-logon-form .x-form-item-label,
.ds-logon-form .x-form-text,
.ds-logon-form .x-btn-inner,
.ds-logon-form .x-header-text {
    font-family: "Segoe UI", Arial, sans-serif;
}
.ds-logon-form .x-panel-body {
    background: #fff;
    border: 0;
    color: #263747;
    font-size: 14px;
}

/* ---- title bar ---- */
.ds-logon-form .x-panel-header {
    background: #0a2d68;  /* dashboard2's --ds-navy (sidebar) */
    background-image: none;
    border: 0;
    border-bottom: 1px solid #c8d5e3;
    padding: 14px 20px;
}
.ds-logon-form .x-header-draggable,
.ds-logon-form .x-header-draggable .x-header-text {
    cursor: move;
}
.ds-logon-form .x-panel-header .x-header-text {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    line-height: 22px;
}
.ds-logon-form .ds-logon-brand {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 22px;
    opacity: .85;
}

/* ---- message line (Logon.setMessage) - takes no room while empty ---- */
.ds-logon-form .form-login-header {
    padding: 0;
    font-size: 12px;
    color: #a32929;
}

/* ---- labels and inputs (logon.css forces normal/black labels: override) ---- */
.ds-logon-form .x-form-item-label {
    color: #263747 !important;
    font-size: 13px;
    font-weight: 600 !important;
}
.ds-logon-form .x-form-field.x-form-text {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 38px;
    padding: 8px 10px;
    border: 1px solid #c8d5e3;
    border-radius: 3px;
    background: #fff none;
    color: #243648;
    font-size: 14px;
    line-height: 20px;
}
.ds-logon-form .x-form-field.x-form-text.x-form-focus {
    border-color: #164b80;
    outline: 2px solid #164b80;
    outline-offset: 2px;
}
.ds-logon-form .x-form-field.x-form-text.x-form-invalid-field {
    border-color: #a32929;
    background: #fff none;
}

/* ---- password show/hide toggle, inside the input's right end ---- */
.ds-logon-form .ds-logon-password .x-form-field.x-form-text {
    padding-right: 40px;
}
.ds-logon-form .ds-logon-eye.x-btn,
.ds-logon-form .ds-logon-eye.x-btn-over,
.ds-logon-form .ds-logon-eye.x-btn-focus,
.ds-logon-form .ds-logon-eye.x-btn-pressed {
    background: transparent none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.ds-logon-form .ds-logon-eye.x-btn-over {
    opacity: .75;
}

/* ---- Forgot Password link ---- */
.ds-logon-form .ds-logon-links .form-hyperlink {
    font-size: 12px;
    color: #164b80 !important;
    text-decoration: underline;
}
.ds-logon-form .ds-logon-links .form-hyperlink:focus {
    outline: 2px solid #164b80;
    outline-offset: 3px;
}

/* ---- footer and buttons ---- */
.ds-logon-form .ds-logon-footer {
    background: #f5f8fc;
    background-image: none;
    border: 0;
    border-top: 1px solid #c8d5e3;
}
.ds-logon-form .ds-logon-btn.x-btn {
    background: #fff none;
    border: 1px solid #c8d5e3;
    border-radius: 7px;
    box-shadow: none;
}
.ds-logon-form .ds-logon-btn .x-btn-inner {
    color: #314355;
    font-size: 14px;
    line-height: 34px;
    height: 34px;
    padding: 0 20px;
}
.ds-logon-form .ds-logon-btn-primary.x-btn {
    background: #0a2d68 none;  /* same navy as the title bar */
    border-color: #0a2d68;
}
.ds-logon-form .ds-logon-btn-primary .x-btn-inner {
    color: #fff;
}
.ds-logon-form .ds-logon-btn.x-btn-over {
    filter: brightness(.96);
}
.ds-logon-form .ds-logon-btn.x-btn-focus {
    outline: 2px solid #164b80;
    outline-offset: 3px;
}

/* ===========================================================================
   Dialogs after the login - authentication code (LogonTFA), change password
   (LogonChangePassword), software terms (LoginSoftwareTerms). They are drawn
   by DataSense.LogonDialogForm, which also carries .ds-logon-form, so every
   rule above applies; these add what only those dialogs need.
   =========================================================================== */

/* ---- explanatory text (TFA notice, password rules) ---- */
.ds-logon-dialog .ds-logon-notice .x-form-display-field {
    font: 14px/1.6 "Segoe UI", Arial, sans-serif;
    color: #263747;
}
.ds-logon-dialog .ds-logon-help .x-form-display-field {
    font: 12px/1.6 "Segoe UI", Arial, sans-serif;
    color: #596c7c;
}

/* ---- Send Authentication Code: a text button, like "Resend code" ---- */
.ds-logon-dialog .ds-logon-linkbtn.x-btn,
.ds-logon-dialog .ds-logon-linkbtn.x-btn-over,
.ds-logon-dialog .ds-logon-linkbtn.x-btn-pressed,
.ds-logon-dialog .ds-logon-linkbtn.x-btn-focus {
    background: transparent none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.ds-logon-dialog .ds-logon-linkbtn .x-btn-inner {
    font: 12px "Segoe UI", Arial, sans-serif;
    color: #164b80;
    text-decoration: underline;
    padding: 0;
}
.ds-logon-dialog .ds-logon-linkbtn.x-btn-focus .x-btn-inner {
    outline: 2px solid #164b80;
    outline-offset: 3px;
}

/* ---- Email / Sms choice next to it ---- */
.ds-logon-dialog .ds-logon-method .x-form-cb-label {
    font: 12px "Segoe UI", Arial, sans-serif;
    color: #263747;
}

/* ---- Hebrew: the show/hide toggle sits inside the input's left end ---- */
.ds-logon-dialog .ds-logon-password-rtl .x-form-field.x-form-text {
    padding-left: 40px;
    padding-right: 10px;
}
.ds-logon-dialog .ds-logon-password-rtl .ds-logon-eye {
    z-index: 1;
}

/* LogonChangePassword sets direction: rtl on its form for Hebrew; the title
   bar (now inside the form) keeps its left-to-right layout, as before */
.ds-logon-dialog .x-panel-header {
    direction: ltr;
}

/* ---- Software terms: the dialog has a fixed height; the document's card fills
   it, its list (#scrollbox, 32vh in the document) takes the height that is left,
   and its checkbox row sits in its own strip above the buttons (LoginSoftwareTerms
   moves it there) ---- */
.ds-logon-terms .ds-logon-terms-document .card {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: auto;
    height: 100%;
    max-height: none;
}
.ds-logon-terms .ds-logon-terms-document .scrollbox {
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
}
.ds-logon-terms .ds-logon-terms-ack .controls {
    margin: 0;
    padding: 0 18px;
}