/* =====================================================================
   Fougito sign-in pages (shared login, Supplier login, forgot password).
   Split layout from the prototypes: white form panel on the left,
   dark brand panel on the right. Loaded after fougito-ui.css.
   The Metronic hooks the login scripts use (#kt_login, .login-signin,
   .login-forgot, #kt_login_*_submit, .inputField) are kept on the markup.
   ===================================================================== */
@font-face {
  font-family: 'Satoshi';
  src: url('../../font/fonts/Satoshi-Variable.woff2') format('woff2'),
       url('../../font/fonts/Satoshi-Variable.woff') format('woff'),
       url('../../font/fonts/Satoshi-Variable.ttf') format('truetype');
  font-weight: 300 900;
  font-display: swap;
  font-style: normal;
}
html, body.fg-auth-body { height: 100%; }
body.fg-auth-body { margin: 0; background: var(--fg-white) none !important; font-family: var(--fg-font) !important; color: var(--fg-ink-700); }
body.fg-auth-body [class^="icon-"], body.fg-auth-body [class*=" icon-"] { color: inherit; line-height: 1; }

.fg-auth { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 560px) minmax(0, 1fr); }
.fg-auth__panel { display: flex; flex-direction: column; padding: 48px 64px 32px; background: var(--fg-white); border-right: 2px solid var(--fg-ink-700); min-width: 0; }
.fg-auth__logo img { height: 40px; width: auto; }
.fg-auth__body { margin: auto 0; padding: 48px 0 32px; }
.fg-auth__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-red-text); }
.fg-auth__title { margin: 14px 0 0; font-family: var(--fg-font); font-size: 44px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--fg-ink-900); }
.fg-auth__desc { margin: 14px 0 0; padding-bottom: 24px; border-bottom: 2px solid var(--fg-ink-700); font-size: 15px; line-height: 1.45; color: var(--fg-ink-500); }
.fg-auth__form { display: flex; flex-direction: column; gap: 22px; margin: 26px 0 0 !important; }
.fg-auth__field { display: flex; flex-direction: column; gap: 8px; margin: 0 !important; }
.fg-auth__label { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-ink-500); }
.fg-auth__control { position: relative; display: block; }
.fg-auth__control > i { position: absolute; left: 16px; top: 17px; font-size: 18px; color: var(--fg-ink-500); pointer-events: none; }
.fg-auth .fg-auth__control input, .fg-auth .fg-auth__control input.inputField { width: 100%; height: 52px; margin: 0; padding: 0 16px 0 46px !important; border: 1px solid var(--fg-ink-300) !important; border-radius: 0 !important; background: var(--fg-ink-100) !important; font-family: var(--fg-font); font-size: 15px; color: var(--fg-ink-900) !important; outline: none; box-shadow: none; opacity: 1; }
.fg-auth .fg-auth__control input::placeholder { color: var(--fg-ink-400) !important; }
.fg-auth .fg-auth__control input:hover { border-color: var(--fg-ink-500) !important; }
.fg-auth .fg-auth__control input:focus { border-color: var(--fg-red) !important; background: var(--fg-white) !important; box-shadow: inset 0 0 0 1px var(--fg-red); }
.fg-auth .highlight { display: none; }
.fg-auth__row { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin: -6px 0 0 !important; padding: 0 !important; }
.fg-auth .fg-auth__link, .fg-auth a.fg-auth__link { font-size: 14px; font-weight: 700; color: var(--fg-red-text) !important; text-decoration: none; }
.fg-auth a.fg-auth__link:hover { color: var(--fg-ink-900) !important; }
.fg-auth .fg-auth__submit { display: flex; align-items: center; justify-content: space-between; width: 100%; height: 56px; margin: 0 !important; padding: 0 20px !important; border: 0; border-radius: 0 !important; background: var(--fg-red) !important; color: var(--fg-white) !important; font-family: var(--fg-font); font-size: 16px; font-weight: 700; cursor: pointer; box-shadow: none !important; }
.fg-auth .fg-auth__submit:hover { background: var(--fg-red-hover) !important; }
.fg-auth .fg-auth__submit:active { background: var(--fg-red-press) !important; }
.fg-auth .fg-auth__submit i { font-size: 20px; }
.fg-auth .fg-auth__submit.spinner { padding-left: 48px !important; }
.fg-auth .fg-auth__actions { display: flex; gap: 12px; margin: 0 !important; }
.fg-auth .fg-auth__actions .fg-auth__submit { flex: 1; }
.fg-auth .fg-auth__cancel { flex: 1; height: 56px; padding: 0 20px !important; border: 1px solid var(--fg-ink-300) !important; border-radius: 0 !important; background: var(--fg-white) !important; color: var(--fg-ink-700) !important; font-family: var(--fg-font); font-size: 16px; font-weight: 700; cursor: pointer; }
.fg-auth .fg-auth__cancel:hover { background: var(--fg-ink-100) !important; }
.fg-auth .alert { margin: 0; padding: 12px 14px; border: 0; border-radius: 0; background: var(--fg-red-tint); color: var(--fg-red-text); font-size: 13px; font-weight: 600; text-align: left !important; }
.fg-auth .alert .text-danger, .fg-auth .text-danger { color: var(--fg-red-text) !important; }
.fg-auth .fv-plugins-message-container, .fg-auth .fv-help-block { font-size: 13px; font-weight: 600; color: var(--fg-red-text); }
.fg-auth__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 22px; border-top: 1px solid var(--fg-ink-200); font-size: 12px; color: var(--fg-ink-500); }
.fg-auth__foot img { height: 20px; width: auto; margin-right: 10px; vertical-align: middle; }
/* the three states the login script switches between */
.fg-auth .login-signup, .fg-auth .login-forgot { display: none; }
.fg-auth.login-forgot-on .login-signin, .fg-auth.login-signup-on .login-signin { display: none; }
.fg-auth.login-forgot-on .login-forgot { display: block; }
.fg-auth.login-signup-on .login-signup { display: block; }

.fg-auth__brand { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: 1fr 2fr; background: #4B474D center / cover no-repeat; overflow: hidden; }
.fg-auth__brand::before { content: ""; grid-column: 1 / -1; grid-row: 1; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.fg-auth__pitch { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; justify-content: space-between; padding: 40px 32px 32px; background: var(--fg-red); color: var(--fg-white); }
.fg-auth__pitch-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1.5; text-transform: uppercase; }
.fg-auth__pitch-title { margin: 0; font-family: var(--fg-font); font-size: clamp(26px, 2.6vw, 36px); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--fg-white); }

@media (max-width: 900px) {
  .fg-auth { grid-template-columns: minmax(0, 1fr); }
  .fg-auth__brand { display: none; }
  .fg-auth__panel { padding: 32px 24px 24px; border-right: 0; }
  .fg-auth__title { font-size: 36px; }
}

/* forgot-password (and the unused sign-up) block keep their original markup: same look through the hooks */
.fg-auth .login-forgot h3, .fg-auth .login-signup h3 { margin: 0; font-family: var(--fg-font); font-size: 44px; font-weight: 900; line-height: 1.05; letter-spacing: -.02em; color: var(--fg-ink-900) !important; }
.fg-auth .login-forgot p, .fg-auth .login-signup p { margin: 14px 0 0; padding-bottom: 24px; border-bottom: 2px solid var(--fg-ink-700); font-size: 15px; color: var(--fg-ink-500) !important; opacity: 1; }
.fg-auth .login-forgot .form, .fg-auth .login-signup .form { margin-top: 26px; text-align: left !important; }
.fg-auth .login-forgot .form-group, .fg-auth .login-signup .form-group { margin: 0 0 22px; }
.fg-auth .login-forgot input, .fg-auth .login-signup input:not([type="checkbox"]) { width: 100% !important; height: 52px; padding: 0 16px !important; border: 1px solid var(--fg-ink-300) !important; border-radius: 0 !important; background: var(--fg-ink-100) !important; font-family: var(--fg-font); font-size: 15px; color: var(--fg-ink-900) !important; outline: none; }
.fg-auth .login-forgot input:focus { border-color: var(--fg-red) !important; background: var(--fg-white) !important; }
.fg-auth .login-forgot .form-group:has(> button), .fg-auth .login-signup .form-group:has(> button) { display: flex; gap: 12px; }
.fg-auth .login-forgot button, .fg-auth .login-signup button { float: none !important; flex: 1; width: auto !important; height: 56px; margin: 0 !important; padding: 0 20px !important; border: 1px solid var(--fg-red) !important; border-radius: 0 !important; background: var(--fg-red) !important; color: var(--fg-white) !important; font-family: var(--fg-font); font-size: 16px; font-weight: 700; }
.fg-auth .login-forgot #kt_login_forgot_cancel, .fg-auth .login-signup #kt_login_signup_cancel { border-color: var(--fg-ink-300) !important; background: var(--fg-white) !important; color: var(--fg-ink-700) !important; }

/* the old login stylesheets size and float these; hold them to the panel */
.fg-auth, .fg-auth * { box-sizing: border-box; }
.fg-auth .fg-auth__control input, .fg-auth .fg-auth__control input.inputField, .fg-auth .login-forgot input { width: 100% !important; max-width: none !important; float: none !important; display: block; }
.fg-auth .fg-auth__form, .fg-auth .fg-auth__field, .fg-auth .fg-auth__row { width: 100%; max-width: none; }
.fg-auth .fg-auth__row a { float: none !important; }
.fg-auth .fg-auth__label { font-weight: 700 !important; color: var(--fg-ink-500) !important; }
.fg-auth__logo img { height: 36px; }
.fg-auth .login-forgot h3, .fg-auth .login-signup h3 { font-size: 36px; }
.fg-auth .login-forgot, .fg-auth .login-forgot .form, .fg-auth .login-forgot .form-group, .fg-auth .login-forgot > div { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; }
.fg-auth .login-forgot input::placeholder { color: var(--fg-ink-400) !important; opacity: 1; }
.fg-auth .login-forgot .form-group:has(> button) { display: flex !important; gap: 12px; margin-top: 0 !important; }
.fg-auth .login-forgot button { flex: 1 1 0 !important; min-width: 0; }
.fg-auth #kt_login_forgot { margin: 0 !important; }
.fg-auth .login-forgot .form, .fg-auth .login-signin .form, .fg-auth .login-signup .form, .fg-auth .login-forgot, .fg-auth .login-signin { transform: none !important; animation: none !important; zoom: 1; }

/* reset password / verify code pages */
.fg-auth a.fg-auth__cancel { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.fg-auth .fg-auth__actions > * { flex: 1 1 0; min-width: 0; }
.fg-auth .digit-group { display: flex; flex-direction: column; gap: 10px; }
.fg-auth .fg-auth__digits { display: flex; justify-content: flex-start; gap: 12px; margin: 0 !important; }
.fg-auth .fg-auth__digits .digits { width: 64px; height: 64px; margin: 0; padding: 0; border: 1px solid var(--fg-ink-300); border-radius: 0; background: var(--fg-ink-100); font-family: var(--fg-font); font-size: 26px; font-weight: 900; line-height: 62px; text-align: center; color: var(--fg-ink-900); outline: none; }
.fg-auth .fg-auth__digits .digits:focus { border-color: var(--fg-red); background: var(--fg-white); box-shadow: inset 0 0 0 1px var(--fg-red); }
.fg-auth__timer { min-height: 18px; font-size: 13px; color: var(--fg-ink-500); }
.fg-auth__resend:empty, .fg-auth__timer:empty { display: none; }
.fg-auth__back { margin-top: 22px; }
.fg-auth__back .fg-auth__link { display: inline-flex; align-items: center; gap: 8px; }
.fg-auth .alert.alert-success { background: var(--fg-green-bg); color: var(--fg-green); }
.fg-auth .alert .close { float: right; width: auto !important; height: auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; opacity: 1; font-size: 16px; line-height: 1; }
.fg-auth .alert .fa { display: none; }
.fg-auth .alert .text-white { color: inherit !important; }
.fg-auth .fg-auth__digits .digits { border: 1px solid var(--fg-ink-300) !important; border-radius: 0 !important; }
.fg-auth .fg-auth__digits .digits:focus { border-color: var(--fg-red) !important; }

/* error pages (401 / 403 / 404 / 500) */
body.fg-error-body { margin: 0; background: var(--fg-ink-100) !important; font-family: var(--fg-font) !important; color: var(--fg-ink-700); }
.fg-error-body #view { background: none !important; padding: 24px; }
.fg-error-body #loader > div:first-child { width: 100%; max-width: 520px; padding: 40px 48px 44px; background: var(--fg-white); border-top: 4px solid var(--fg-ink-700); }
.fg-error-body #imgs { height: 180px; margin-bottom: 20px; }
.fg-error-body h1 { margin: 0 0 12px; font-family: var(--fg-font); font-size: 36px; font-weight: 900 !important; line-height: 1.05; letter-spacing: -.02em; color: var(--fg-ink-900); }
.fg-error-body p { margin: 0 0 24px; font-size: 15px; line-height: 1.5; color: var(--fg-ink-500); }
.fg-error-body .btn, .fg-error-body .btn.btn-danger { display: inline-flex; align-items: center; justify-content: center; width: auto; height: 48px; padding: 0 24px; border: 0; border-radius: 0; background: var(--fg-red) !important; color: var(--fg-white) !important; font-family: var(--fg-font); font-size: 14px; font-weight: 700; letter-spacing: .04em; box-shadow: none !important; }
.fg-error-body .btn:hover { background: var(--fg-red-hover) !important; }

/* =====================================================================================================================
   NEW ISSUES REPORT, 09 Oct 2026
   ===================================================================================================================== */
/* #4 the sign-in pages fit the window. The page is exactly one window tall; its spacing, type and control heights follow
   the window height, so nothing scrolls on laptop windows or at browser zoom. Only when the window is smaller than the
   form can possibly be does the form column itself scroll. */
html:has(> body.fg-auth-body) { height: 100%; overflow: hidden; }
body.fg-auth-body { height: 100%; min-height: 0; overflow: hidden; }
.fg-auth { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; }
.fg-auth__panel { min-height: 0; overflow-x: hidden; overflow-y: auto; padding-top: clamp(14px, 5vh, 48px); padding-bottom: clamp(10px, 3.2vh, 32px); }
.fg-auth__brand { min-height: 0; }
.fg-auth__body { padding: clamp(10px, 4.6vh, 48px) 0 clamp(8px, 3vh, 32px); }
.fg-auth__logo img { height: clamp(26px, 4.4vh, 36px); }
.fg-auth__title { margin-top: clamp(6px, 1.6vh, 14px); font-size: clamp(26px, 5.2vh, 44px); }
.fg-auth .login-forgot h3, .fg-auth .login-signup h3 { font-size: clamp(24px, 4.4vh, 36px); }
.fg-auth__desc, .fg-auth .login-forgot p, .fg-auth .login-signup p { margin-top: clamp(6px, 1.6vh, 14px); padding-bottom: clamp(10px, 2.8vh, 24px); }
.fg-auth__form { gap: clamp(10px, 2.6vh, 22px); margin-top: clamp(12px, 3vh, 26px) !important; }
.fg-auth .login-forgot .form, .fg-auth .login-signup .form { margin-top: clamp(12px, 3vh, 26px); }
.fg-auth .login-forgot .form-group, .fg-auth .login-signup .form-group { margin-bottom: clamp(10px, 2.6vh, 22px); }
.fg-auth__field { gap: clamp(4px, 1vh, 8px); }
.fg-auth .fg-auth__control input, .fg-auth .fg-auth__control input.inputField, .fg-auth .login-forgot input, .fg-auth .login-signup input:not([type="checkbox"]) { height: clamp(42px, 6.4vh, 52px); }
.fg-auth__control > i { top: calc((clamp(42px, 6.4vh, 52px) - 18px) / 2); }
.fg-auth .fg-auth__submit, .fg-auth .fg-auth__cancel, .fg-auth .login-forgot button, .fg-auth .login-signup button { height: clamp(44px, 6.8vh, 56px); }
.fg-auth__foot { padding-top: clamp(8px, 2.6vh, 22px); }
.fg-auth__back { margin-top: clamp(10px, 2.6vh, 22px); }
.fg-auth .fg-auth__digits .digits { width: clamp(44px, 7.6vh, 64px); height: clamp(44px, 7.6vh, 64px); }
@media (max-width: 900px) {
  .fg-auth__title { font-size: clamp(26px, 4.6vh, 36px); }
}

/* #5 messages on the sign-in pages (wrong password, forgotten-password failure, success): a full-width bar with square
   corners like the field and the buttons, text left, close button at the right, both centred on the bar's height.
   The heading block is anchored from the top of the column instead of being centred on the free space, so a message
   that appears moves only what comes after it (and "Sign in" / "Forgotten password" do not jump when switching). */
.fg-auth__body { margin: clamp(8px, calc(50vh - 354px), 30vh) 0 auto; }
.fg-auth .alert, .fg-auth .kt-alert.alert { display: flex !important; align-items: center; gap: 10px; float: none !important; width: 100% !important; max-width: none !important; min-height: 44px; height: auto !important; margin: 0 0 clamp(10px, 2.6vh, 22px) !important; padding: 9px 12px 9px 14px !important; border: 1px solid var(--fg-red-line) !important; border-radius: 0 !important; background: var(--fg-red-tint) !important; box-shadow: none !important; color: var(--fg-red-text) !important; font-size: 13px; font-weight: 600; line-height: 1.4; text-align: left !important; opacity: 1 !important; animation: none !important; }
.fg-auth .fg-auth__form > .alert { margin-bottom: 0 !important; }
.fg-auth .alert > span { order: 1; flex: 1 1 auto; min-width: 0; text-align: left; }
.fg-auth .alert .close { order: 2; flex: none; display: flex; align-items: center; justify-content: center; position: static !important; float: none !important; width: 24px !important; height: 24px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: inherit !important; opacity: .85; text-shadow: none; font-size: 16px; line-height: 1; cursor: pointer; }
.fg-auth .alert .close:hover { opacity: 1; }
.fg-auth .alert .close i { font-size: 16px; line-height: 1; color: inherit; }
.fg-auth .alert.alert-success { border-color: var(--fg-green-line) !important; background: var(--fg-green-bg) !important; color: var(--fg-green) !important; }
/* fields on these pages take the dark focus border, like every field in the consoles (red reads as an error) */
.fg-auth .fg-auth__control input:focus, .fg-auth .login-forgot input:focus, .fg-auth .login-signup input:focus { border-color: var(--fg-ink-700) !important; box-shadow: inset 0 0 0 1px var(--fg-ink-700) !important; outline: 0 !important; }
.fg-auth .fg-auth__digits .digits:focus { border-color: var(--fg-ink-700) !important; box-shadow: inset 0 0 0 1px var(--fg-ink-700); outline: 0; }
.fg-auth .alert .close, .fg-auth .alert .close i, .fg-auth .alert .close span { color: var(--fg-red-text) !important; -webkit-text-fill-color: currentColor; }
.fg-auth .alert.alert-success .close, .fg-auth .alert.alert-success .close i { color: var(--fg-green) !important; }
.fg-auth .alert .close { margin-left: auto !important; right: auto !important; top: auto !important; }
.fg-auth .alert .close i { display: block; margin: 0 !important; padding: 0 !important; position: static !important; }