@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans Arabic";
  src: url("../fonts/IBMPlexSansArabic-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}

/* Brand tokens only. The official Keycloak/PatternFly layout is intentionally
   preserved; this theme changes typography and colors, not component geometry. */
:root {
  --pf-v5-global--FontFamily--text: "IBM Plex Sans Arabic", sans-serif;
  --pf-v5-global--FontFamily--heading: "IBM Plex Sans Arabic", sans-serif;
  --pf-v5-global--primary-color--100: #1b8354;
  --pf-v5-global--primary-color--200: #166a45;
  --pf-v5-global--link--Color: #1b8354;
  --pf-v5-global--link--Color--hover: #145c3d;
  --pf-v6-global--FontFamily--text: "IBM Plex Sans Arabic", sans-serif;
  --pf-v6-global--FontFamily--heading: "IBM Plex Sans Arabic", sans-serif;
  --pf-v6-global--primary-color--100: #1b8354;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "IBM Plex Sans Arabic", sans-serif !important;
}

/* Keep the official masthead structure while replacing its dark color scheme. */
.pf-v5-c-masthead,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content,
.pf-v6-c-masthead,
.pf-v6-c-masthead__main,
.pf-v6-c-masthead__content {
  background-color: #ffffff !important;
  color: #1f2a37 !important;
}

.pf-v5-c-masthead,
.pf-v6-c-masthead {
  --pf-v5-global--Color--100: #1f2a37;
  --pf-v5-global--Color--200: #384250;
  --pf-v5-global--BackgroundColor--100: #ffffff;
  --pf-v5-global--BackgroundColor--200: #f3f4f6;
  --pf-v5-global--link--Color: #166a45;
  --pf-v5-c-masthead--BackgroundColor: #ffffff;
  --pf-v5-c-toolbar--BackgroundColor: #ffffff;
  --pf-v5-c-toolbar__content--BackgroundColor: #ffffff;
  --pf-v5-c-button--m-plain--Color: #1f2a37;
}

.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section,
.pf-v5-c-masthead .pf-v5-c-toolbar__group,
.pf-v6-c-masthead .pf-v6-c-toolbar,
.pf-v6-c-masthead .pf-v6-c-toolbar__content,
.pf-v6-c-masthead .pf-v6-c-toolbar__content-section,
.pf-v6-c-masthead .pf-v6-c-toolbar__group {
  background-color: #ffffff !important;
}

.pf-v5-c-masthead,
.pf-v6-c-masthead {
  border-bottom-color: #d2d6db !important;
}

.pf-v5-c-masthead button,
.pf-v5-c-masthead a,
.pf-v5-c-masthead svg,
.pf-v5-c-masthead span,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle-text,
.pf-v6-c-masthead button,
.pf-v6-c-masthead a,
.pf-v6-c-masthead svg,
.pf-v6-c-masthead span,
.pf-v6-c-masthead .pf-v6-c-menu-toggle,
.pf-v6-c-masthead .pf-v6-c-menu-toggle__text {
  color: #1f2a37 !important;
}

/* Color-only treatment for the official navigation. */
.pf-v5-c-page__sidebar,
.pf-v6-c-page__sidebar {
  background-color: #ffffff !important;
}

.pf-v5-c-nav__link,
.pf-v6-c-nav__link {
  color: #384250 !important;
}

.mysign-home-nav-link {
  align-items: center;
  display: flex !important;
  gap: .65rem;
}

.mysign-home-nav-icon {
  display: inline-flex;
  height: 1.1rem;
  width: 1.1rem;
}

.mysign-home-nav-icon svg {
  height: 100%;
  width: 100%;
}

.pf-v5-c-nav__link:hover,
.pf-v6-c-nav__link:hover {
  background-color: #f3fcf6 !important;
  color: #166a45 !important;
}

.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__item.pf-m-expanded > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current,
.pf-v6-c-nav__item.pf-m-current > .pf-v6-c-nav__link,
.pf-v6-c-nav__item.pf-m-expanded > .pf-v6-c-nav__link,
.pf-v6-c-nav__link.pf-m-current {
  background-color: #ecfdf3 !important;
  color: #166a45 !important;
}

.pf-v5-c-nav__item.pf-m-expanded > .pf-v5-c-nav__link *,
.pf-v6-c-nav__item.pf-m-expanded > .pf-v6-c-nav__link * {
  color: #166a45 !important;
}

.pf-v5-c-button.pf-m-primary,
.pf-v6-c-button.pf-m-primary {
  background-color: #1b8354 !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v6-c-button.pf-m-primary:hover {
  background-color: #166a45 !important;
}