/* Ottu admin console branding for Keycloak 26.7.1 (PatternFly 5).
 *
 * Ported from the v24 (PatternFly 4) theme: PatternFly token/class names moved
 * from `--pf-global--*` / `.pf-c-*` to `--pf-v5-global--*` / `.pf-v5-c-*`.
 * The PatternFly stylesheet itself is NOT re-imported here — the 26.7.1 admin
 * console still loads PatternFly 5 (no PF6 migration upstream); this file only
 * layers Ottu branding on top.
 */

/* Override default font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
* {
  font-family: 'Poppins' !important;
}
.fa, .fas {
    font-family: Font Awesome\ 5 Free !important;
}

/* Overrides to PatternFly variables should be made at the :root level
 * for global variables or at the top-level component selector
 * for component variables (for example, .pf-v5-c-button), as these overrides
 * will cascade down to children elements accordingly.
*/

/* Overrides the global light-200 colour to white and blue-500 colour to black */
:root {
  --pf-v5-global--Color--light-100: var(--pf-v5-global--Color--light-200);
  --pf-v5-global--palette--black-1000: var(--pf-v5-global--palette--blue-500);
  /* Overriden Variables */
  --pf-v5-global--primary-color--100: #f77c1a !important;
  --pf-v5-global--primary-color--200: #f77c1a !important;
  --pf-v5-global--primary-color--300: #f77c1a !important;
  --pf-v5-global--primary-color--400: #f77c1a !important;
  --pf-v5-global--primary-color--dark-100: #f77c1a !important;
  --pf-v5-global--primary-color--dark-200: #f77c1a !important;
  --pf-v5-global--primary-color--dark-300: #f77c1a !important;
  --pf-v5-global--primary-color--dark-400: #f77c1a !important;
  --pf-v5-global--Color--light-100: #ffffff !important;
  --pf-v5-global--Color--light-200: #ffffff !important;
  --pf-v5-global--Color--light-300: #ffffff !important;
  --pf-v5-global--Color--light-400: #ffffff !important;
  --pf-v5-global--link--Color: #f77c1a !important;
  --pf-v5-global--active-color--100: #f77c1a !important;
  --pf-v5-global--active-color--200: #f77c1a !important;
  --pf-v5-global--active-color--300: #f77c1a !important;
  --pf-v5-global--active-color--400: #f77c1a !important;
}

/* Overrides the top-level component selectors for component variables */
.pf-v5-c-page__header,
.pf-v5-c-page__sidebar,
.pf-v5-c-dropdown__toggle.keycloak__realm_selector_dropdown__toggle {
  background-color: var(--pf-v5-global--palette--black-1000);
}

.pf-v5-c-dropdown__menu,
.pf-v5-c-table,
.pf-v5-c-data-list__item,
.pf-v5-c-card,
.pf-v5-c-wizard__nav,
.pf-v5-c-wizard__main,
.pf-v5-c-wizard__footer,
.pf-v5-c-toolbar,
.pf-v5-c-pagination.pf-m-bottom,
.pf-v5-c-input-group,
.pf-v5-c-modal-box.pf-m-md,
.pf-v5-c-modal-box.pf-m-sm,
.pf-v5-c-modal-box.pf-m-lg,
.pf-v5-c-form {
  background-color: var(--pf-v5-global--Color--light-100);
}

.pf-v5-c-page__main-breadcrumb,
.pf-v5-c-page__main-section,
.pf-v5-c-drawer__panel-main,
.pf-v5-c-drawer__content,
.pf-v5-c-toolbar.pf-u-p-0,
.pf-v5-c-form__group.pf-m-action.keycloak__form_actions {
  background-color: var(--pf-v5-global--Color--light-300);
}

.pf-v5-c-tabs {
  --pf-v5-c-tabs--before--BorderColor: var(--pf-v5-global--Color--light-200);
}

.pf-v5-c-tabs__list {
  background-color: var(--pf-v5-global--Color--light-100);
}

a {
  color: var(--pf-v5-global--link--Color--dark);
}

.pf-v5-c-button:disabled {
  border: 1px solid var(--pf-v5-global--Color--light-300);
}

.pf-v5-c-form {
  padding: var(--pf-v5-global--spacer--md);
}

input[type='text'],
input[type='password'] {
  color: var(--pf-v5-global--Color--200);
  font-size: var(--pf-v5-global--FontSize--md);
  background-color: var(--pf-v5-global--Color--light-100);
  border: 1px solid var(--pf-v5-global--Color--light-300);
  width: 296px;
}

input[type='text']:hover,
input[type='password']:hover {
  background-color: var(--pf-v5-global--Color--light-100);
}

input[type='submit'] {
  border: none;
  background-color: var(--pf-v5-global--Color--primary-300);
  color: var(--pf-v5-global--Color--light-100);
  font-size: var(--pf-v5-global--FontSize--md);
  font-weight: var(--pf-v5-global--FontWeight--bold);
  margin-top: var(--pf-v5-global--spacer--lg);
  margin-right: var(--pf-v5-global--spacer--md);
  width: 150px;
  transition: background-color 0.3s ease-in-out;
}

/* Custom CSS */

a {
  color: #9c9c9c !important;
}

.pf-v5-c-divider {
  --pf-v5-c-divider--after--BackgroundColor: unset !important;
}

.pf-v5-c-form-control {
  border: 1px solid #f0f0f0 !important;
  border-bottom-color: #8a8d90 !important;
}

.pf-v5-c-page__header {
  background: #212121 !important;
}

.keycloak__realm_selector__context_selector .pf-v5-c-context-selector__toggle-text {
  color: #f77c1a !important;
  font-weight: 400;
}

.pf-v5-c-page__sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #d1d1d1;
}

.pf-v5-c-button.pf-m-primary {
  color: white !important;
  background-color: orange !important;
}

.pf-v5-c-nav__section-title {
  color: #f77c1a !important;
  font-weight: 800;
  padding: 15px 25px;
  background-color: #212121;
  font-size: 16px;
}

.keycloak__realm_selector__dropdown > button {
  background-color: #ffffff !important;
  color: #f77c1a !important;
}

.pf-v5-c-dropdown__toggle:before,
.pf-v5-c-dropdown__toggle.pf-m-action .pf-v5-c-dropdown__toggle-button:before {
  border-color: #d1d1d1 !important;
}

.pf-m-current {
  background-color: #d1d1d1 !important;
  color: #f77c1a !important;
}

.pf-v5-c-tabs__item.pf-m-current {
  --pf-v5-c-tabs__link--after--BorderColor: #f77c1a !important;
}

.pf-v5-c-nav__list li > a:hover {
  background-color: #d1d1d1 !important;
  color: #f77c1a !important;
}

.pf-v5-c-dropdown__menu li > a:hover {
  color: #f77c1a !important;
}

table a {
  color: #f77c1a !important;
}

#userCredentials-form .pf-v5-c-form__group {
  display: flex;
}
#userCredentials-form .pf-v5-c-input-group {
  border: 1px solid #9c9c9c;
  border-radius: 3px;
}

/* Loading spinner customization - matches theme primary color */
.pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: #f77c1a;
}

.pf-v5-c-spinner__clipper {
  stroke: rgba(247, 125, 26, 0.3);
}

.pf-v5-c-spinner__lead-ball,
.pf-v5-c-spinner__tail-ball {
  stroke: #f77c1a;
}

/* Initial loading container spinner */
.keycloak__loading-container .pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: #f77c1a;
}

.keycloak__loading-container .pf-v5-c-spinner__clipper {
  stroke: rgba(247, 125, 26, 0.3);
}

.keycloak__loading-container .pf-v5-c-spinner__lead-ball,
.keycloak__loading-container .pf-v5-c-spinner__tail-ball {
  stroke: #f77c1a;
}

/* ---------------------------------------------------------------------------
 * Keycloak 26 / PatternFly 5 component-class fixes.
 *
 * The rules above were ported from the v24 (PatternFly 4) theme and target a
 * few class names/structures that changed in the 26 admin console. Without
 * these fixes the masthead renders half-white and the realm selector shows
 * white text on the (branded) white sidebar, so both look empty. The rules
 * below re-apply the Ottu branding to the 26 DOM:
 *   - masthead is now `.pf-v5-c-masthead` (was `.pf-c-page__header`)
 *   - the realm selector + masthead actions are `.pf-v5-c-menu-toggle`
 * ------------------------------------------------------------------------- */

/* Masthead: one solid Ottu-dark bar with light content, in both colour schemes.
 * (The generic light-100 rule above forces the masthead toolbar white, which is
 * overridden back to dark here.) */
.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__item {
  background-color: #212121 !important;
}
.pf-v5-c-masthead,
.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text {
  color: #ffffff !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before,
.pf-v5-c-masthead .pf-v5-c-menu-toggle::after {
  border-color: transparent !important;
}
/* The white-link rule above is meant for links on the dark masthead BAR, but it
 * also hits links inside the masthead's dropdown menus (e.g. the "Realm info"
 * item in the user menu, which is an <a>, not a button) — white-on-white makes
 * it invisible. Restore dark text for links inside those dropdown popups. */
.pf-v5-c-masthead .pf-v5-c-menu a {
  color: #151515 !important;
}

/* Realm selector: a full-width menu-toggle at the top of the (white) sidebar.
 * Force readable dark text with an Ottu-orange caret so it no longer looks empty. */
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle,
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle__text {
  color: #212121 !important;
}
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle .pf-v5-c-menu-toggle__controls,
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle svg {
  color: #f77c1a !important;
  fill: #f77c1a !important;
}
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle {
  border: 1px solid #d1d1d1 !important;
}

/* Realm selector: the OPEN dropdown menu (the realm list).
 *
 * The menu is a PF5 `.pf-v5-c-menu` that Keycloak renders INSIDE the sidebar
 * `.pf-v5-c-nav`, so PatternFly paints it with the vertical nav's dark flyout
 * tokens: the background resolves to ~#212427 and the item text to white (via
 * `--pf-v5-global--Color--100`). The v24 branding above targeted the old PF4
 * `.pf-v5-c-dropdown__menu`, which no longer matches, so the menu stayed dark
 * with invisible (dark-on-dark / white-on-white) text and the realm list
 * looked empty even when the API returned realms. Force it back to a readable
 * light popup. */
.pf-v5-c-nav .pf-v5-c-menu.keycloak__realm_selector__dropdown {
  --pf-v5-c-menu--BackgroundColor: #ffffff;
  --pf-v5-global--BackgroundColor--100: #ffffff;
  --pf-v5-global--Color--100: #151515;
  --pf-v5-global--Color--200: #151515;
  --pf-v5-c-menu__item--Color: #151515;
  background-color: #ffffff !important;
}
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__list-item,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item-main,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item-text {
  color: #151515 !important;
}

/* The generic `input[type='text'] { width: 296px }` rule above overflows the
 * menu's fixed 15.125rem (242px) width. Let the realm-selector search box fit
 * its container so the input no longer spills past the menu. */
.pf-v5-c-menu.keycloak__realm_selector__dropdown input[type="text"] {
  width: 100%;
}

/* Hover/focus: PatternFly points the hovered item at
 * `--pf-v5-c-menu__header--c-menu__item--hover--BackgroundColor`, which resolves
 * to a dark grey (~#3f4245) in the nav context and makes the hovered realm
 * illegible. Match the Ottu nav hover instead (light grey + orange text). */
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:hover,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:focus {
  --pf-v5-c-menu__item--BackgroundColor: #d1d1d1;
  --pf-v5-c-menu__item--hover--BackgroundColor: #d1d1d1;
  background-color: #d1d1d1 !important;
}
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:hover,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:focus,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:hover .pf-v5-c-menu__item-main,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:hover .pf-v5-c-menu__item-text,
.pf-v5-c-menu.keycloak__realm_selector__dropdown .pf-v5-c-menu__item:hover .pf-v5-c-menu__item-text * {
  color: #f77c1a !important;
}