/* Keycloak/PatternFly adapter. Palette and geometry come from generated
 * design-tokens.css; edit design/tokens/theme.json to change both app and login.
 * Inherits stock templates and all authentication behaviour. */

@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin.woff2") format("woff2");
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext.woff2") format("woff2");
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

html,
html.pf-v5-theme-dark {

  --pf-v5-global--BackgroundColor--100: var(--surface-0);
  --pf-v5-global--BackgroundColor--150: var(--surface-0);
  --pf-v5-global--BackgroundColor--200: var(--surface-2);
  --pf-v5-global--BackgroundColor--300: var(--surface-1);
  --pf-v5-global--BackgroundColor--400: var(--surface-2);
  --pf-v5-global--BackgroundColor--light-100: var(--surface-0);
  --pf-v5-global--BackgroundColor--dark-100: var(--surface-0);

  --pf-v5-global--Color--100: var(--ink-900);
  --pf-v5-global--Color--200: var(--ink-500);
  --pf-v5-global--Color--light-100: var(--ink-900);
  --pf-v5-global--Color--dark-100: var(--ink-900);
  --pf-v5-global--Color--light-200: var(--ink-500);
  --pf-v5-global--Color--dark-200: var(--ink-500);

  --pf-v5-global--BorderColor--100: var(--border);
  --pf-v5-global--BorderColor--200: var(--ink-400);
  --pf-v5-global--BorderColor--300: var(--surface-2);
  --pf-v5-global--BorderColor--light-100: var(--border);
  --pf-v5-global--BorderColor--dark-100: var(--border);

  --pf-v5-global--link--Color: var(--brand-600);
  --pf-v5-global--link--Color--hover: var(--brand-700);
  --pf-v5-global--primary-color--100: var(--brand-600);
}

body.login-pf-page,
.login-pf-page,
.login-pf body,
.pf-v5-c-login {
  background: var(--surface-1);
  background-image: none;
  color: var(--ink-900);
  font-family:
    "Source Sans 3",
    "Source Sans Pro",
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    sans-serif;
}

#kc-header-wrapper {
  background-image: url("../img/logo.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  height: 56px;
  margin: 12px auto 8px;
  padding: 0;
  color: transparent;
  font-size: 0;
  line-height: 0;
  white-space: nowrap;
  overflow: hidden;
}

.card-pf,
.pf-v5-c-login__main {
  --pf-v5-c-login__main--BackgroundColor: var(--surface-0);
  background: var(--surface-0);
  border: 0;
  border-radius: 1rem;
  box-shadow: 0 2px 8px rgba(15, 31, 68, 0.06);
  padding: 2rem;
  color: var(--ink-900);
}

.pf-v5-c-login__main-body,
.pf-v5-c-login__main-header,
#kc-content,
#kc-content-wrapper {
  color: var(--ink-900);
}

#kc-page-title,
.pf-v5-c-login__main-header .pf-v5-c-title {
  color: var(--brand-700);
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  text-align: center;
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0.625rem;
}

.pf-v5-c-form__label-text,
.login-pf-page label {
  color: var(--ink-700);
  font-weight: 600;
}

.pf-v5-c-form-control,
.pf-v5-c-form-control.pf-m-icon,
.login-pf-page input[type="text"],
.login-pf-page input[type="password"],
.login-pf-page input[type="email"],
.login-pf-page input[type="number"],
.login-pf-page input[type="tel"],
.login-pf-page input:not([type]),
.login-pf-page select,
.login-pf-page textarea {
  --pf-v5-c-form-control--BackgroundColor: var(--surface-0);
  --pf-v5-c-form-control--Color: var(--ink-900);

  --pf-v5-c-form-control--before--BorderTopColor: var(--border);
  --pf-v5-c-form-control--before--BorderRightColor: var(--border);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--border);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--border);
  --pf-v5-c-form-control--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);

  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--after--BorderBottomColor: transparent;
  background-color: var(--surface-0);
  border-radius: 0.5rem;
  color: var(--ink-900);
  font-family: inherit;
}

.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  background-color: transparent;
  color: var(--ink-900);
}

/* UX6 (PB-U6073): the wrapper is --control-height tall, so the input fills it;
   otherwise the focused field showed the input's edge inside a taller box. */
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
  min-height: calc(var(--control-height) - 2px);
}

.pf-v5-c-form-control > input::placeholder,
.pf-v5-c-form-control > textarea::placeholder,
.login-pf-page input::placeholder {
  color: var(--ink-500);
  opacity: 1;
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
.login-pf-page input:focus,
.login-pf-page select:focus,
.login-pf-page textarea:focus {
  --pf-v5-c-form-control--before--BorderTopColor: var(--brand-500);
  --pf-v5-c-form-control--before--BorderRightColor: var(--brand-500);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--brand-500);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--brand-500);

  --pf-v5-c-form-control--focus--before--BorderTopWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--focus--before--BorderRightWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--focus--before--BorderBottomWidth: var(--pf-v5-global--BorderWidth--sm);
  --pf-v5-c-form-control--focus--before--BorderLeftWidth: var(--pf-v5-global--BorderWidth--sm);
  /* UX6 (PB-U6073): no second, PatternFly-blue underline under the focus border. */
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomColor: transparent;
  box-shadow: 0 0 0 2px rgba(80, 131, 204, 0.25);
  outline: none;
}

.pf-v5-c-form-control > input:-webkit-autofill,
.pf-v5-c-form-control > input:-webkit-autofill:hover,
.pf-v5-c-form-control > input:-webkit-autofill:focus,
.pf-v5-c-form-control > input:-webkit-autofill:active,
.login-pf-page input:-webkit-autofill,
.login-pf-page input:-webkit-autofill:hover,
.login-pf-page input:-webkit-autofill:focus,
.login-pf-page input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px var(--surface-0) inset;
  box-shadow: 0 0 0 1000px var(--surface-0) inset;
  -webkit-text-fill-color: var(--ink-900);
  caret-color: var(--ink-900);
  transition: background-color 5000s ease-in-out 0s;
}

.pf-v5-c-button.pf-m-primary,
input.pf-v5-c-button.pf-m-primary,
#kc-login {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
  color: var(--surface-0);
  border-radius: var(--control-radius);
  font-family: inherit;
  font-weight: 600;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  transition: background-color 0.15s ease-in-out;
}
.pf-v5-c-button.pf-m-primary:hover,
input.pf-v5-c-button.pf-m-primary:hover,
#kc-login:hover {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
}
.pf-v5-c-button.pf-m-primary:focus,
#kc-login:focus {
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-link {
  color: var(--brand-600);
  border-color: var(--brand-600);
  background-color: transparent;
  font-family: inherit;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-secondary {
  border-radius: var(--control-radius);
}

.pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--BackgroundColor: var(--surface-0);
  --pf-v5-c-button--m-control--Color: var(--ink-700);
  --pf-v5-c-button--m-control--after--BorderColor: var(--border);
  --pf-v5-c-button--m-control--after--BorderWidth: 1px;
  background-color: var(--surface-0);
  color: var(--ink-700);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-control:focus {
  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--surface-1);
  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--surface-1);
  background-color: var(--surface-1);
  color: var(--ink-900);
}
.pf-v5-c-button.pf-m-control::after {
  border-color: var(--border);
}

.login-pf-page a,
#kc-content a {
  color: var(--brand-600);
}
.login-pf-page a:hover,
#kc-content a:hover {
  color: var(--brand-700);
}

.pf-v5-c-alert.pf-m-danger,
.alert-error {
  background-color: var(--danger-100);
  border: 0;
  border-radius: 0.5rem;
  color: var(--danger-600);
}
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__icon {
  color: var(--danger-600);
}
.pf-v5-c-alert.pf-m-success {
  background-color: var(--success-100);
  border: 0;
  border-radius: 0.5rem;
  color: var(--success-600);
}
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-success .pf-v5-c-alert__icon {
  color: var(--success-600);
}
.pf-v5-c-alert.pf-m-warning {
  background-color: var(--warning-100);
  border: 0;
  border-radius: 0.5rem;
  color: var(--warning-600);
}
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__title,
.pf-v5-c-alert.pf-m-warning .pf-v5-c-alert__icon {
  color: var(--warning-600);
}
.pf-v5-c-alert.pf-m-info {
  background-color: var(--brand-100);
  border: 0;
  border-radius: 0.5rem;
  color: var(--ink-700);
}

.login-pf-page .login-pf-signup,
#kc-info,
#kc-info-wrapper {
  color: var(--ink-500);
  font-family: inherit;
}

.login-pf-page > *:not(.card-pf) > a,
#kc-current-locale-link,
.pf-v5-c-login__main-footer-band {
  color: var(--ink-500);
}

.pf-v5-c-login__main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.pf-v5-c-login__main-header-utilities {
  display: flex;
  justify-content: center;
}
.pf-v5-c-login__main-header-utilities .pf-v5-c-form-control {
  --pf-v5-c-form-control--FontSize: 0.8125rem;
  --pf-v5-c-form-control--before--BorderTopColor: transparent;
  --pf-v5-c-form-control--before--BorderRightColor: transparent;
  --pf-v5-c-form-control--before--BorderBottomColor: transparent;
  --pf-v5-c-form-control--before--BorderLeftColor: transparent;
  font-size: 0.8125rem;
}
.pf-v5-c-login__main-header-utilities select {
  color: var(--ink-500);
  font-family: inherit;
}

.pf-v5-c-login__main-footer:empty {
  display: none;
}

.pf-v5-c-tile {
  --pf-v5-c-tile--BackgroundColor: var(--surface-0);
  --pf-v5-c-tile--Color: var(--ink-900);
  background-color: var(--surface-0);
  color: var(--ink-900);
  border: 1px solid var(--border);
  border-radius: 0.5rem;
}
.pf-v5-c-tile.pf-m-selected {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 1px var(--brand-600);
}
.pf-v5-c-tile__title {
  color: var(--ink-900);
  font-family: inherit;
  font-weight: 600;
}

.pf-v5-c-data-list,
.pf-v5-c-data-list__item {
  background-color: var(--surface-0);
  color: var(--ink-900);
  border-color: var(--border);
}
.select-auth-box-headline {
  color: var(--ink-900);
  font-family: inherit;
}
.select-auth-box-desc {
  color: var(--ink-500);
  font-family: inherit;
}

.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control:has(> input[aria-invalid="true"]) {
  --pf-v5-c-form-control--before--BorderTopColor: var(--danger-600);
  --pf-v5-c-form-control--before--BorderRightColor: var(--danger-600);
  --pf-v5-c-form-control--before--BorderBottomColor: var(--danger-600);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--danger-600);
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--m-error--after--BorderBottomColor: transparent;
}
.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-helper-text__item-text.pf-m-error,
.kc-feedback-text.pf-m-error,
#input-error,
[id$="-error"].pf-v5-c-helper-text__item-text {
  color: var(--danger-600);
  font-family: inherit;
}
.pf-v5-c-form-control__icon.pf-m-status,
.pf-v5-c-form-control__icon.pf-m-status .fa-exclamation-circle {
  color: var(--danger-600);
}

#kc-error-message .instruction,
#kc-error-message p,
.login-pf-page .instruction {
  color: var(--ink-900);
  font-family: inherit;
  font-size: 0.9375rem;
  line-height: 1.5;
  text-align: center;
}
#kc-error-message a,
.login-pf-page .instruction a {
  color: var(--brand-600);
  font-weight: 600;
}
/* FIX-1 item 1: "Prijavi se ponovno" is the expired sign-in page's button,
   so the link colour above must not paint its label in the button colour. */
#kc-error-message a.pf-v5-c-button.pf-m-primary,
#kc-error-message a.pf-v5-c-button.pf-m-primary:hover {
  color: var(--primary-foreground);
  margin-top: 0.5rem;
  text-decoration: none;
}

/* Neutral, compact authentication frame shared across all hosted login steps. */
.pf-v5-c-login__container {
  width: 100%;
  max-width: var(--auth-card-width);
  margin-inline: auto;
}
.pf-v5-c-login {
  min-height: 100dvh;
  padding: 2rem 1rem;
}
.card-pf,
.pf-v5-c-login__main {
  border: 1px solid var(--border);
  border-radius: var(--auth-radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem;
}
#kc-header-wrapper {
  height: 40px;
  max-width: 190px;
  margin: 0 auto 1.5rem;
  background-image: url("../img/logo-light.svg");
}
html.pf-v5-theme-dark #kc-header-wrapper {
  background-image: url("../img/logo-dark.svg");
}
#kc-page-title,
.pf-v5-c-login__main-header .pf-v5-c-title {
  color: var(--ink-900);
  text-align: left;
  margin: 0;
  padding: 0;
  width: 100%;
}
.pf-v5-c-login__main-header {
  align-items: stretch;
}
.pf-v5-c-login__main-header-utilities {
  justify-content: flex-end;
}
.pf-v5-c-form-control {
  border-radius: var(--control-radius);
  min-height: var(--control-height);
}
.pf-v5-c-button.pf-m-primary,
#kc-login {
  min-height: var(--control-height);
  border-radius: var(--control-radius);
  color: var(--primary-foreground);
}
.login-pf-page a,
#kc-content a,
.pf-v5-c-button.pf-m-link {
  color: var(--brand-link);
}
.pf-v5-c-login::after {
  content: "";
  display: block;
  width: 60px;
  height: 36px;
  margin: 1.25rem auto 0;
  background: transparent url("../img/quattro5-solutions-white.svg") center / auto 28px no-repeat;
  filter: brightness(0);
}
html.pf-v5-theme-dark .pf-v5-c-login::after {
  filter: none;
}
@media (max-width: 480px) {
  .pf-v5-c-login {
    padding: 1.25rem 0.75rem;
  }
  .pf-v5-c-login__main {
    padding: 1.25rem;
  }
}
/* Override the parent grid so the signature stays below the single form. */
.pf-v5-c-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.pf-v5-c-login__container {
  min-width: 0;
  grid-template-columns: minmax(0, 1fr);
}
.pf-v5-c-login__main {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  gap: 1.5rem;
}
.pf-v5-c-login__main-header,
.pf-v5-c-login__main-body,
.pf-v5-c-login__main-footer {
  padding: 0;
}
html,
html.pf-v5-theme-dark {
  --pf-v5-global--link--Color: var(--brand-link);
  --pf-v5-global--link--Color--hover: var(--brand-link);
}
.pf-v5-c-login__container {
  padding: 0;
  box-sizing: border-box;
}

/* FIX-1 item 3: the step-up's way back to the application, under its button. */
#stepUpCancel {
  margin-top: 0.75rem;
  text-align: center;
}