/* ─── DM Sans web font ───────────────────────────────────────────────────────
   The same font used across the post-login app (declared in LayoutFleetSAP3.css).
   Loaded here so the login page renders identical typography to the rest of the
   application and to the FleetSAP reference login. The font files live at
   wwwroot/css/layout/fonts/ — three directory levels above this CSS file.
   ─────────────────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../../css/layout/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../../../css/layout/fonts/dm-sans-v17-latin-700.woff2') format('woff2');
}

/* ─── Body / page shell ─────────────────────────────────────────────────────
   Combines the layout baseline (height/flex) with the colour fallback.
   The gradient is applied on .fs-login-bg; this is only the page-level reset.

   IMPORTANT: `font-size: 14px` belongs ONLY on `body`, NEVER on `html`.
   Putting it on `html` shifts the `rem` base for the whole document (1rem
   goes from 16px → 14px), proportionally shrinking h1/h5/button paddings
   and Bootstrap margins (mb-3, py-5, etc.). The legacy
   `_LayoutFleetSAP3.css` also declares it only on `body`. Keeping `html`
   at the browser default 16px is critical for parity.
   ─────────────────────────────────────────────────────────────────────────── */
html, body {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
}

body {
    background-color: #EBF2FF; /* gradient colour-stop fallback */
    color: #253b54;
    /* DM Sans — mirrors LayoutFleetSAP3.css body declaration exactly */
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.01em;
}

/* ─── Form controls — "filled" style ────────────────────────────────────────
   Inputs with a solid grey-blue background, rounded corners and no visible
   border. Replaces the previous bottom-border-only style.
   ─────────────────────────────────────────────────────────────────────────── */
input[type=checkbox] {
    transform: scale(1.4);
    cursor: pointer;
}

.form-control, .input-group-text {
    background-color: #FFFFFF;
    /* White inputs need a subtle border to stay visible against the
       light-blue gradient page background; otherwise they blend in. */
    border: 1px solid #DDE3EC;
    border-radius: 4px;
    color: #253b54;
}

/* Bootstrap 5 adds a halo (border-color + box-shadow) on :focus. We
   remove it so the input keeps the same look in idle and focus states. */
.form-control:focus {
    background-color: #FFFFFF;
    border: 1px solid #DDE3EC;
    border-radius: 4px;
    color: #253b54;
    box-shadow: none;
    outline: 0;
}
.input-group-text:focus {
    background-color: #FFFFFF;
    box-shadow: none;
    outline: 0;
}

/* Browser autofill override: Chrome/Edge paint a blue background
   (#E8F0FE when saved credentials are present) over any autofilled
   input. With the input now "filled" (background #FFFFFF), the correct
   trick is to paint a `box-shadow inset` with the SAME colour as the
   background — Chrome still paints its blue, but it gets fully covered
   by our shadow.

   `transition: background-color 5000s` disables the colour flash on
   page load. `caret-color` keeps the text caret visible. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    -webkit-text-fill-color: #253b54 !important;
    caret-color: #253b54;
    transition: background-color 5000s ease-in-out 0s;
    border: none !important;
    border-radius: 4px !important;
}

/* ─── Language flag sprites (legacy — not rendered in the current login UI) ── */
.sci-flag {
    width: 25px;
    height: 15px;
    background: url(/Content/sci-images/sci-sign-in/sci-flags.png) no-repeat;
    display: inline-block;
}
.sci-flag.sci-flag-es { background-position: -350px -45px; }
.sci-flag.sci-flag-en { background-position: -375px -195px; }
.sci-flag.sci-flag-he { background-position: -224px -180px; }

.sci-login-body-center {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    margin-top: 20%;
}

/* ─── Loader overlay ─────────────────────────────────────────────────────────
   position/z-index/inset use !important so they win over any inline-style
   that may exist on the element from a previous page transition.
   display starts as none; jQuery .show() / .hide() flip it via inline style
   (higher specificity than a non-!important CSS declaration).
   ─────────────────────────────────────────────────────────────────────────── */
#loaderContainer {
    display: none;
    position: fixed  !important;
    z-index: 10000   !important;
    top:    0        !important;
    bottom: 0        !important;
    right:  0        !important;
    left:   0        !important;
    background: rgba(255, 255, 255, 0.5);
}

#loader {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    margin: -20px 0 0 -50px;
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 100px;
    height: 100px;
    -webkit-animation: spin 0.7s linear infinite;
    animation: spin 0.7s linear infinite;
}

@-webkit-keyframes spin {
    0%   { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ─── Login layout ───────────────────────────────────────────────────────────
   All fs-* classes mirror the FleetSAP v01SigIn_FleetSAP.cshtml inline styles
   verbatim so the visual output is pixel-identical between the two products.
   ─────────────────────────────────────────────────────────────────────────── */
.fs-login-bg {
    background: linear-gradient(180deg, #F6F9FE 0%, #EBF2FF 100%);
    overflow: auto;
}

/* Password input-group (input + eye-toggle span). The input has its
   corners rounded only on the left and the toggle span only on the
   right. They share one continuous border: the input drops its right
   border and the span drops its left border so the seam between them
   shows a single 1px line, not a doubled-up one. */
#ShowOrHidePassword .form-control {
    border-radius: 4px 0 0 4px;
    border: 1px solid #DDE3EC;
    border-right: none;
    background-color: #FFFFFF;
}
#ShowOrHidePassword .input-group-text {
    border-radius: 0 4px 4px 0;
    background-color: #FFFFFF;
    border: 1px solid #DDE3EC;
    border-left: none;
    color: #253b54;
}

.fs-flavor-logo    { width: 176.111px; height: 50px; }
.fs-flavor-logo-lg { width: 100%; }
.fs-title          { color: #20408C; }
.fs-subtitle       { color: #02A3F4; }
.fs-lang-container { border-radius: 4px; }

/* Language POST-form wrappers: strip the default <form> margin so the
   visual layout matches the previous anchor-based implementation exactly. */
.fs-lang-form          { margin: 0; }
.fs-lang-form > button { width: 100%; }

.fs-no-decoration { text-decoration: none; }

/* ─── Colour utilities ───────────────────────────────────────────────────── */
.fs-or-text    { color: #8A8E99; }
.fs-btn-white  { background-color: #FFFFFF; }
.fs-text-color { color: #4B77A7; }

/* `.fs-link-color` is split from `.fs-text-color` to carry link
   behaviour: no underline in the normal state (BS5 adds one by default,
   BS4 does not) and blue `#007BFF` on hover/focus (mirrors the
   `a:hover` rule from the legacy _LayoutFleetSAP3.css). The browser
   transitions the colour instantaneously on hover — the legacy does not
   animate either. */
.fs-link-color {
    color: #4B77A7;
    text-decoration: none;
}
.fs-link-color:hover,
.fs-link-color:focus {
    color: #007BFF;
    text-decoration: none;
}

/* ─── Visibility utilities ───────────────────────────────────────────────── */
.fs-hidden-vis { display: none; visibility: hidden; }
.fs-hidden     { display: none; }

/* ─── Redirect overlay (company migration banner) ───────────────────────── */
.fs-redirect-overlay {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background-color: #ffffffb8;
    padding-top: 25vh;
    text-align: center;
}
.fs-redirect-msg { max-width: 30%; margin: auto; }

/* ─── RTL alert helper (Hebrew locale) ──────────────────────────────────── */
.fs-alert-rtl { text-align: right; padding-right: 5%; }

/* ─── Bootstrap 4 → 5 colour parity ──────────────────────────────────────
   Legacy FleetSAPWeb uses Bootstrap 4.6.2; FuelB4Web uses 5.3.8. BS5
   shifted the hex values of --bs-primary (#007bff → #0d6efd) and
   --bs-info (#17a2b8 → #0dcaf0), and added opacity 0.25 to <hr>. We
   restore the BS4 tokens only inside the sign-in view to keep visual
   parity with the legacy v01SigIn_FleetSAP.cshtml.
   ─────────────────────────────────────────────────────────────────────── */
.btn-primary {
    --bs-btn-bg: #007bff;
    --bs-btn-border-color: #007bff;
    --bs-btn-hover-bg: #0069d9;
    --bs-btn-hover-border-color: #0062cc;
    --bs-btn-active-bg: #0062cc;
    --bs-btn-active-border-color: #005cbf;
    --bs-btn-disabled-bg: #007bff;
    --bs-btn-disabled-border-color: #007bff;
}

.btn-outline-info {
    --bs-btn-color: #17a2b8;
    --bs-btn-border-color: #17a2b8;
    --bs-btn-hover-bg: #17a2b8;
    --bs-btn-hover-border-color: #17a2b8;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #17a2b8;
    --bs-btn-active-border-color: #17a2b8;
    --bs-btn-active-color: #fff;
}

/* jQuery adds `.active` to the selected language button; the override
   guarantees the same solid teal as BS4 (not the brighter BS5 cyan). */
.btn-outline-info.active {
    background-color: #17a2b8;
    border-color: #17a2b8;
    color: #fff;
}

.text-primary {
    --bs-link-color: #007bff;
    --bs-link-hover-color: #0056b3;
    color: #007bff !important;
}

/* BS5 adds `text-decoration: underline` by default to any <a>. We
   remove it for every link carrying `.text-primary` (in this form the
   case is "Forgot your password?"). Hover: switches to a darker blue
   #0056b3 without re-enabling the underline. */
a.text-primary,
a.text-primary:hover,
a.text-primary:focus {
    text-decoration: none;
}
a.text-primary:hover,
a.text-primary:focus {
    color: #0056b3 !important;
}

/* BS5 changed <hr> to `border:0; opacity:0.25`. We revert to the BS4
   look (solid line, no opacity) so the "or" separator is visually
   identical to the legacy. */
hr {
    opacity: 1;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}