/*
 * La Case Agri — Keycloak admin console theme overrides.
 * Extends keycloak.v2 (see theme.properties: parent=keycloak.v2). The admin
 * console is a compiled React/PatternFly app, not FTL templates, so we only
 * recolor the visible chrome via the same PatternFly classes/tokens it
 * already exposes — no build step, no copied bundle.
 *
 * Same visual language as the fdsc-dashboard (Vuetify) app: white topbar,
 * dark-green text/brand, orange sidebar icons + hover/active states.
 */

:root {
  --pf-v5-global--primary-color--100: #1a4731;
  --pf-v5-global--primary-color--200: #40916c;
}

/* PatternFly wraps ALL of its dark-mode global palette reassignment in
   :where(.pf-v5-theme-dark) blocks, and :where() always contributes ZERO
   specificity, by spec. That means every component below (page sections,
   tables, menus, nav, masthead...) that reads a global BackgroundColor,
   Color or BorderColor token through its own variable ultimately resolves
   to whatever these root tokens say, so overriding them here once fixes the
   whole app instead of patching every dark-reassigned component variable
   one by one. Plain class selector, real specificity, wins outright. */
.pf-v5-theme-dark {
  /* Numbered slots (--100/150/200/300/400): general surface backgrounds. */
  --pf-v5-global--BackgroundColor--100: #ffffff !important;
  --pf-v5-global--BackgroundColor--150: #f7faf8 !important;
  --pf-v5-global--BackgroundColor--200: #f0f7f2 !important;
  --pf-v5-global--BackgroundColor--300: #ffffff !important;
  --pf-v5-global--BackgroundColor--400: #e5efe8 !important;
  /* "-light-*" slots feed .pf-m-light content areas (page__main-section,
     main-nav, main-breadcrumb, main-tabs...) — PatternFly's dark mode
     flips these to near-black (#1b1d21 etc), which is exactly what kept
     the "Realm roles" table section dark despite it having pf-m-light. */
  --pf-v5-global--BackgroundColor--light-100: #ffffff !important;
  --pf-v5-global--BackgroundColor--light-200: #f7faf8 !important;
  --pf-v5-global--BackgroundColor--light-300: #f0f7f2 !important;
  --pf-v5-global--BorderColor--100: rgba(26, 71, 49, 0.15) !important;
  --pf-v5-global--BorderColor--200: rgba(26, 71, 49, 0.15) !important;
  --pf-v5-global--BorderColor--300: rgba(26, 71, 49, 0.20) !important;
  --pf-v5-global--BorderColor--400: rgba(26, 71, 49, 0.30) !important;
  --pf-v5-global--BorderColor--light-100: rgba(26, 71, 49, 0.15) !important;
  --pf-v5-global--Color--100: #0d2b1a !important;
  --pf-v5-global--Color--200: #4a7a5e !important;
  --pf-v5-global--Color--dark-100: #0d2b1a !important;
  --pf-v5-global--Color--dark-200: #4a7a5e !important;
  /* NOTE: "-light-*" Color slots mean light-COLORED TEXT for use on dark
     surfaces (masthead etc), the opposite axis from BackgroundColor above —
     left untouched so text on intentionally-dark chrome stays legible. */
  --pf-v5-global--active-color--100: #e07a20 !important;
  --pf-v5-global--primary-color--100: #1a4731 !important;
  --pf-v5-global--primary-color--200: #40916c !important;
  --pf-v5-global--link--Color: #1a4731 !important;
  --pf-v5-global--link--Color--hover: #40916c !important;
  --pf-v5-global--disabled-color--100: #aaabac !important;
  --pf-v5-global--disabled-color--200: #e5efe8 !important;
  color-scheme: light !important;
}

html, body {
  height: 100% !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
}

/* --- Main content area: pale-green page background, matching the
   fdsc-dashboard's --pf-v5-c-page--BackgroundColor equivalent (Vuetify's
   "background" token) — cards/tables on top stay white by default. --- */
.pf-v5-c-page:not(#___) {
  --pf-v5-c-page--BackgroundColor: #f0f7f2 !important;
  background-color: #f0f7f2 !important;
  flex-grow: 1 !important;
  height: auto !important;
  min-height: 0 !important;
}

.pf-v5-c-page__main {
  overflow-y: auto !important;
}

/* --- Topbar: white background, dark-green brand/icons (matches the
   fdsc-dashboard topbar) --- */
/* :not(#___) never matches a real element, but an id selector inside it
   still counts for specificity — this guarantees our rule beats whatever
   dark-mode class Keycloak's system-preference detection adds, without us
   having to know its exact name. */
.pf-v5-c-masthead:not(#___) {
  background-color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(26, 71, 49, 0.15) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 200 !important;
}

/* The masthead's actual black background is painted by the nested
   .pf-v5-c-toolbar (confirmed via devtools: --pf-v5-c-toolbar--BackgroundColor
   resolves to --pf-v5-global--palette--black-1000 in dark mode), which
   covers the masthead element entirely — our rule above alone never showed. */
.pf-v5-c-masthead .pf-v5-c-toolbar:not(#___) {
  --pf-v5-c-toolbar--BackgroundColor: #ffffff !important;
  background-color: #ffffff !important;
}

.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead svg,
.pf-v5-c-masthead .pf-v5-c-nav__link {
  color: #1a4731 !important;
}

.pf-v5-c-masthead .pf-v5-c-button:hover,
.pf-v5-c-masthead .pf-v5-c-button:hover svg {
  color: #e07a20 !important;
}

/* Brand logo in the masthead — PatternFly's standard "brand" component.
   If this selector doesn't match in devtools, inspect the logo element and
   we'll adjust it, same as we did for the login page's eye button. */
.pf-v5-c-masthead__brand img,
.pf-v5-c-brand {
  content: url('../img/lacaseagri-logo.svg') !important;
  height: 32px !important;
  width: auto !important;
}

/* --- Sidebar: white background, orange icons (always, active or not —
   same rule as the fdsc-dashboard nav drawer), dark-green text --- */
.pf-v5-c-page__sidebar-body:not(#___),
.pf-v5-c-nav:not(#___) {
  background-color: #ffffff !important;
  border-right: 1px solid rgba(26, 71, 49, 0.10) !important;
}

/* Sidebar scrolls independently from the topbar/main content. PatternFly's
   own .pf-v5-c-page__sidebar already has overflow: hidden auto and sits in
   a flex column — but its flex child (.pf-v5-c-page__sidebar-body) defaults
   to min-height: auto, the classic flexbox trap that lets a child grow past
   its parent's bounds instead of shrinking, which silently defeats overflow
   scrolling. min-height: 0 is what actually makes the scroll kick in. */
.pf-v5-c-page__sidebar-body {
  overflow-y: auto !important;
  min-height: 0 !important;
}

/* .pf-v5-c-page__sidebar is ALSO a CSS Grid item, which has the exact same
   min-height: auto default sizing trap as flex items — fixing only the
   inner flex child wasn't enough, the grid item itself needs it too so it
   actually gets bounded by its grid row instead of growing to fit content. */
.pf-v5-c-page__sidebar {
  min-height: 0 !important;
  height: 100% !important;
}

/* Realm selector dropdown ("Keycloak / master") — dark mode reassigns its
   --pf-v5-c-menu-toggle--*BackgroundColor variables to a dark gray, same
   pattern as the masthead toolbar. Override the variables directly. */
.pf-v5-c-menu-toggle:not(#___) {
  --pf-v5-c-menu-toggle--BackgroundColor: #f0f7f2 !important;
  --pf-v5-c-menu-toggle--hover--BackgroundColor: #e5efe8 !important;
  --pf-v5-c-menu-toggle--focus--BackgroundColor: #e5efe8 !important;
  --pf-v5-c-menu-toggle--active--BackgroundColor: #e5efe8 !important;
  --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: #e5efe8 !important;
  --pf-v5-c-menu-toggle--Color: #0d2b1a !important;
  --pf-v5-c-menu-toggle--m-expanded--Color: #0d2b1a !important;
  background-color: #f0f7f2 !important;
  color: #0d2b1a !important;
}

.pf-v5-c-menu-toggle:not(#___) svg {
  color: #e07a20 !important;
  fill: #e07a20 !important;
}

/* Remove PatternFly's default bottom "underline" border on all menu-toggle
   buttons (realm selector, filter dropdowns like "Name", pagination...). */
.pf-v5-c-menu-toggle::after,
.pf-v5-c-menu-toggle:hover::after,
.pf-v5-c-menu-toggle:focus::after,
.pf-v5-c-menu-toggle.pf-m-expanded::after {
  border-block-end: none !important;
}

/* Same cleanup for the :before pseudo-element's top/right/left border on
   masthead menu-toggles (help icon, user avatar dropdown...). */
.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border: none !important;
}

/* The open dropdown panel (realm selector, and menus generally). PatternFly
   keeps reassigning text/background via different CSS custom properties per
   state (default, hover, selected...) — rather than chase each one, force
   the actual rendered elements directly so every state is covered. */
.pf-v5-c-menu:not(#___) {
  background-color: #ffffff !important;
  border: 1px solid rgba(26, 71, 49, 0.12) !important;
  box-shadow: 0 4px 16px rgba(26, 71, 49, 0.12) !important;
  border-radius: 10px !important;
}

.pf-v5-c-menu:not(#___) .pf-v5-c-menu__list-item,
.pf-v5-c-menu:not(#___) .pf-v5-c-menu__item,
.pf-v5-c-menu:not(#___) .pf-v5-c-menu__item-text {
  background-color: transparent !important;
  color: #0d2b1a !important;
}

.pf-v5-c-menu:not(#___) .pf-v5-c-menu__list-item:hover,
.pf-v5-c-menu:not(#___) .pf-v5-c-menu__item:hover,
.pf-v5-c-menu:not(#___) .pf-v5-c-menu__list-item:focus-within {
  background-color: rgba(224, 122, 32, 0.10) !important;
  color: #1a4731 !important;
}

.pf-v5-c-menu:not(#___) svg {
  color: #e07a20 !important;
  fill: #e07a20 !important;
}

.pf-v5-c-nav__link {
  color: #1a4731 !important;
}

.pf-v5-c-nav__link svg,
.pf-v5-c-nav__link .pf-v5-c-nav__link-icon,
.pf-v5-c-nav__item svg {
  color: #e07a20 !important;
  fill: #e07a20 !important;
}

/* Icons before each sidebar nav link. The admin console gives every link a
   stable id (#nav-item-clients, #nav-item-users...), so we inject a per-item
   orange SVG icon as a ::before background — self-contained, no icon-font
   dependency. The shared rule reserves space; each id sets its own glyph. */
#nav-item-clients::before,
#nav-item-client-scopes::before,
#nav-item-roles::before,
#nav-item-users::before,
#nav-item-groups::before,
#nav-item-sessions::before,
#nav-item-events::before,
#nav-item-realm-settings::before,
#nav-item-authentication::before,
#nav-item-identity-providers::before,
#nav-item-user-federation::before {
  /* !important is required: an earlier rule sets .pf-v5-c-nav__link::before
     { content: none !important } to kill the pill's default indicator, and
     that !important would otherwise suppress this pseudo-element too. */
  content: '' !important;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-left: 8px !important;
  margin-right: 14px !important;
  margin-bottom: 9px !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* Clients — grid of app tiles */
#nav-item-clients::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7'/%3E%3Crect x='14' y='3' width='7' height='7'/%3E%3Crect x='14' y='14' width='7' height='7'/%3E%3Crect x='3' y='14' width='7' height='7'/%3E%3C/svg%3E");
}

/* Client scopes — key */
#nav-item-client-scopes::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7.5' cy='15.5' r='4.5'/%3E%3Cpath d='M10.7 12.3 21 2m-4 0 3 3-3 3'/%3E%3C/svg%3E");
}

/* Realm roles — shield */
#nav-item-roles::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E");
}

/* Users — single person */
#nav-item-users::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E");
}

/* Groups — multiple people */
#nav-item-groups::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}

/* Sessions — clock */
#nav-item-sessions::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
}

/* Events — bell */
#nav-item-events::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E");
}

/* Realm settings — gear */
#nav-item-realm-settings::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z'/%3E%3C/svg%3E");
}

/* Authentication — lock */
#nav-item-authentication::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}

/* Identity providers — fingerprint-ish id */
#nav-item-identity-providers::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Ccircle cx='8' cy='11' r='2.5'/%3E%3Cpath d='M14 9h4M14 13h4M4.5 17c.7-1.6 2-2.5 3.5-2.5s2.8.9 3.5 2.5'/%3E%3C/svg%3E");
}

/* User federation — database link */
#nav-item-user-federation::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e07a20' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5'/%3E%3Cpath d='M3 12c0 1.66 4 3 9 3s9-1.34 9-3'/%3E%3C/svg%3E");
}

/* Section headers ("Manage", "Configure") — uppercase, bold, letter-spaced,
   muted color: reads clearly as a group label instead of blending into the
   nav links below it, same convention as the marketplace sidebar. */
.pf-v5-c-nav__section-title {
  color: #ffffff !important;
  text-transform: uppercase !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  /* Negative margin cancels out .pf-v5-c-page__sidebar-body's own inline
     padding, so the green fill reaches the sidebar's true edge instead of
     stopping at the padded content area. */
  margin: 0 calc(-1 * var(--pf-v5-c-page__sidebar-body--PaddingRight, 0px)) 0 calc(-1 * var(--pf-v5-c-page__sidebar-body--PaddingLeft, 0px)) !important;
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  border-radius: 0 !important;
  background-color: #1a4731 !important;
  border: none !important;
  border-block-end: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}

.pf-v5-c-nav__section:first-of-type .pf-v5-c-nav__section-title {
  padding-top: 0.5rem !important;
}

/* Nav links: rounded pill background instead of PatternFly's hard square
   left-border indicator (which was still rendering blue, not our orange —
   easier to drop it entirely and mark state with a soft rounded fill,
   consistent with the rounded look used everywhere else in this theme). */
.pf-v5-c-nav__link {
  border-radius: 8px !important;
  margin: 0 0.5rem !important;
  width: calc(100% - 1rem) !important;
  padding-left: 35px !important;
  /* Flex so the injected ::before icon and the text label stay vertically
     centered on one line, instead of the icon sinking below the baseline. */
  display: flex !important;
  align-items: center !important;
  font-weight: 500 !important;
}

.pf-v5-c-nav__link::before,
.pf-v5-c-nav__link::after {
  border: none !important;
  content: none !important;
}

.pf-v5-c-nav__list-item .pf-v5-c-nav__item::before {
  border: none !important;
}

.pf-v5-c-nav__link:hover {
  background-color: rgba(224, 122, 32, 0.10) !important;
  color: #e07a20 !important;
}

.pf-v5-c-nav__link:hover svg {
  color: #c96a10 !important;
  fill: #c96a10 !important;
}

/* Active/selected nav item: soft rounded orange fill, no border line */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current='page'] {
  color: #e07a20 !important;
  background-color: rgba(224, 122, 32, 0.12) !important;
  font-weight: 600 !important;
}

.pf-v5-c-nav__link.pf-m-current svg,
.pf-v5-c-nav__link[aria-current='page'] svg {
  color: #e07a20 !important;
  fill: #e07a20 !important;
}

/* Every divider in the sidebar (below the realm selector, between
   "Manage"/"Configure"...) — soft green tint instead of a hard black line.
   Broadened to the whole sidebar, not just .pf-v5-c-nav, since the one
   right under the realm selector sits in a slightly different spot. */
.pf-v5-c-page__sidebar hr,
.pf-v5-c-page__sidebar .pf-v5-c-divider,
.pf-v5-c-nav .pf-v5-c-divider,
.pf-v5-c-menu hr,
.pf-v5-c-menu .pf-v5-c-divider {
  border: none !important;
  background-color: rgba(26, 71, 49, 0.10) !important;
  height: 1px !important;
}

/* Active tab underline (e.g. "Welcome" tab) */
.pf-v5-c-tabs__link[aria-selected='true'],
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  color: #1a4731 !important;
  --pf-v5-c-tabs__item--m-current--BorderColor: #e07a20 !important;
}

/* Primary buttons (e.g. "Refer to documentation") */
.pf-v5-c-button.pf-m-primary {
  background-color: #e07a20 !important;
  border-color: #e07a20 !important;
  color: #0d2b1a !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: #c96a10 !important;
  border-color: #c96a10 !important;
}

/* --- Rounded corners everywhere, matching the login page's soft look
   instead of PatternFly's default square admin-console chrome --- */
.pf-v5-c-button {
  border-radius: 8px !important;
}

.pf-v5-c-menu-toggle,
.pf-v5-c-menu,
.pf-v5-c-form-control,
.pf-v5-c-text-input-group,
.pf-v5-c-card {
  border-radius: 10px !important;
}

/* Cards (e.g. the admin dashboard's Server info / Memory / Profile) — flat,
   no drop shadow, just a soft border, consistent with the theme's look. */
.pf-v5-c-card {
  --pf-v5-c-card--BoxShadow: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(224, 122, 32, 0.45) !important;
}

/* Clickable/selectable cards (e.g. the Identity providers picker) — replace
   the harsh default dark drop shadow on hover with a soft green-tinted lift
   and a green accent border, and mark the selected one in accent orange. */
.pf-v5-c-card.pf-m-clickable,
.pf-v5-c-card.pf-m-selectable {
  --pf-v5-c-card--m-selectable--hover--BoxShadow: 0 6px 16px rgba(26, 71, 49, 0.14) !important;
  --pf-v5-c-card--m-selectable--m-selected--BoxShadow: 0 6px 16px rgba(26, 71, 49, 0.14) !important;
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.pf-v5-c-card.pf-m-clickable:hover,
.pf-v5-c-card.pf-m-selectable:hover {
  box-shadow: 0 6px 16px rgba(26, 71, 49, 0.14) !important;
  border-color: #40916c !important;
  transform: translateY(-2px);
}

.pf-v5-c-card.pf-m-selectable.pf-m-selected,
.pf-v5-c-card.pf-m-current {
  border-color: #e07a20 !important;
  box-shadow: 0 4px 12px rgba(224, 122, 32, 0.20) !important;
}

/* Table row action kebab only — not pagination or other plain toggles
   elsewhere. Needs equal width/height or border-radius:50% renders an
   ellipse/cut-corner shape instead of a true circle (that's what looked
   "badly rounded"). */
.pf-v5-c-table .pf-v5-c-menu-toggle.pf-m-plain {
  border-radius: 50% !important;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Vertically center every table cell's content — action buttons (kebab),
   and in-cell dropdown filters like the "Default"/"Optional" assigned-type
   toggle — instead of sitting at the cell's default top/baseline alignment. */
.pf-v5-c-table td,
.pf-v5-c-table .pf-v5-c-table__td {
  vertical-align: middle !important;
}

/* Same for the filter/search toolbar above tables (Name dropdown, search
   pill, Create button, Change type to, kebab, Refresh, pagination) — align
   them all on their vertical center instead of each sitting at its own
   natural height. */
.pf-v5-c-toolbar__content-section,
.pf-v5-c-toolbar__group,
.pf-v5-c-toolbar__item {
  align-items: center !important;
}

.pf-v5-c-page__main-section {
  border-radius: 0 !important;
}

.pf-v5-c-table {
  border-radius: 12px !important;
  overflow: hidden;
  /* Row border color/width — soften the default dark-gray line to match
     the rest of the theme's soft green-tinted borders. */
  --pf-v5-c-table--BorderColor: rgba(26, 71, 49, 0.12) !important;
  --pf-v5-c-table--border-width--base: 1px !important;
}

/* .pf-v5-c-input-group (search-with-button, password-with-eye, etc.) must
   be ONE pill: the container carries the radius + clips overflow, while
   its children stay square — rounding the field AND the button separately
   is exactly what created the mismatched/deformed seam reported here. */
.pf-v5-c-input-group {
  border-radius: 8px !important;
  overflow: hidden;
}

.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-text-input-group,
.pf-v5-c-input-group .pf-v5-c-button {
  border-radius: 0 !important;
}

.pf-v5-c-input-group__item {
  border: none !important;
  box-shadow: none !important;
}

/* Utility buttons glued to a field (copy, eye-toggle...) share the field's
   pale-green background instead of defaulting to white, so the pill reads
   as one uniform piece instead of two mismatched halves. The search bar's
   own [aria-label='Search'] rule is more specific and still wins there. */
.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  background-color: #f0f7f2 !important;
  color: #0d2b1a !important;
}

/* PatternFly's separate "ClipboardCopy" component (Realm name field with
   the copy button) uses .pf-v5-c-clipboard-copy, not .pf-v5-c-input-group —
   same uneven-pill problem, same fix. */
.pf-v5-c-clipboard-copy__group {
  border-radius: 8px !important;
  overflow: hidden;
  background-color: #f0f7f2 !important;
}

.pf-v5-c-clipboard-copy__group .pf-v5-c-form-control {
  border-radius: 0 !important;
  background-color: #f0f7f2 !important;
  color: #0d2b1a !important;
  border: none !important;
  box-shadow: none !important;
}

/* Slightly darker than the field so the copy button reads as its own
   clickable segment instead of blending into the input. */
.pf-v5-c-clipboard-copy__group .pf-v5-c-button.pf-m-control {
  border-radius: 0 !important;
  background-color: #d9e8de !important;
  color: #0d2b1a !important;
  border: none !important;
  box-shadow: none !important;
}

/* Focus should ring the whole pill, not just the inner <input>'s own box —
   and darken the background slightly so the state is easy to notice. */
.pf-v5-c-clipboard-copy__group:focus-within {
  border: 1px solid #1a4731 !important;
  background-color: #e0ece3 !important;
}

.pf-v5-c-clipboard-copy__group:focus-within .pf-v5-c-form-control,
.pf-v5-c-clipboard-copy__group .pf-v5-c-form-control input:focus {
  background-color: #e0ece3 !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Same CSS-variable-on-:hover/:focus/:active reassignment bug as the search
   button, generalized to every .pf-m-control button (copy, eye-toggle...):
   PatternFly's own rule swaps --pf-v5-c-button--m-control--Color/
   BackgroundColor/after--BorderBottomColor to its default (blue-ish) hover
   tokens on these states, which plain background-color/border overrides
   don't reach since it's the variable itself being reassigned. */
.pf-v5-c-button.pf-m-control:hover,
.pf-v5-c-button.pf-m-control:focus,
.pf-v5-c-button.pf-m-control:active {
  --pf-v5-c-button--m-control--Color: #0d2b1a !important;
  --pf-v5-c-button--m-control--BackgroundColor: #e5efe8 !important;
  --pf-v5-c-button--m-control--after--BorderBottomColor: transparent !important;
  background-color: #e5efe8 !important;
  color: #0d2b1a !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

.pf-v5-c-button.pf-m-control::after {
  border: none !important;
}

/* Remove PatternFly's default bottom "underline" border on every text
   input/field across the whole console, not just the search bar. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-text-input-group::before,
.pf-v5-c-text-input-group::after,
.pf-v5-c-text-input-group__main::before,
.pf-v5-c-text-input-group__main::after,
.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after,
.pf-v5-c-text-input-group:focus-within,
.pf-v5-c-text-input-group__text:focus-within {
  border: none !important;
}

/* Checkboxes ("Exact search", table row checks...) — keep the native widget
   (accent-color fill + native checkmark, default behavior everywhere), and
   just replace the faint native border with our own green one. */
input[type='checkbox'] {
  accent-color: #1a4731;
  border: 1px solid #1a4731 !important;
  border-radius: 3px;
  vertical-align: baseline;
  width: 17px;
  height: 17px;
}

/* Just remove the focus ring — don't replace it with a new shape. */
input[type='checkbox']:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Wizard step circles (Create client: General settings / Capability config /
   Login settings). The number badge is the nav-link's ::before, colored via
   --pf-v5-c-wizard__nav-link--before--BackgroundColor. The current step keeps
   its accent-orange fill; not-yet-reached steps (no .pf-m-current) get a white
   circle with a green outline and dark number so they read as "pending". */
.pf-v5-c-wizard__nav-link:not(.pf-m-current)::before {
  background-color: #ffffff !important;
  color: #1a4731 !important;
  box-shadow: inset 0 0 0 1px #40916c !important;
}

/* Text inputs on focus: thin 1px dark-green border instead of the default
   black focus outline/border. The border lives on the WRAPPER (which owns
   the 10px radius) so it follows the rounded shape; radius is restated here
   because a border alone doesn't inherit it visually if the wrapper's
   default radius got overridden anywhere. */
.pf-v5-c-form-control:focus,
input.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  border: 1px solid #1a4731 !important;
  border-radius: 10px !important;
  outline: none !important;
  box-shadow: none !important;
}

/* .pf-v5-c-form-control is often a <span> wrapper around the real <input>
   (confirmed earlier on the login page) — cover that case too. */
/* The inner input must NOT draw its own square border — the rounded focus
   border is on the .pf-v5-c-form-control wrapper (rule above), and a border
   on the input renders square corners inside the rounded field. */
.pf-v5-c-form-control input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Universal fallback: whatever field/textarea/select our more specific
   rules above miss (this was the browser's own native black focus ring,
   not a PatternFly style) — outline doesn't affect layout, so it's safe
   to apply everywhere without needing to match the exact wrapper markup. */
input:focus,
textarea:focus,
select:focus {
  outline: 1px solid #1a4731 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.pf-v5-c-label,
.pf-v5-c-badge,
.pf-v5-c-chip {
  border-radius: 9999px !important;
}

/* --- Search bar: same look as the marketplace search (white pill, soft
   green-tinted border/shadow, green glow on focus instead of a hard
   rectangle outline, circular dark-green submit button). --- */
.pf-v5-c-input-group[data-testid='table-search-input'] {
  border-radius: 8px !important;
  border: 1px solid rgba(26, 71, 49, 0.18) !important;
  box-shadow: 0 2px 12px rgba(26, 71, 49, 0.06) !important;
  background-color: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  margin-left: 0.75rem;
  overflow: hidden;
}

/* Inner pieces (icon+input span, item wrappers) must not carry their own
   box-shadow — the outer pill above already owns the only shadow/glow, and
   an inner one wasn't fully clipped, poking out past the rounded corner. */
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-input-group__item,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__text {
  box-shadow: none !important;
}

.pf-v5-c-input-group[data-testid='table-search-input']:focus-within {
  /* A ring (inset or spread) crosses both the white field and the dark-green
     button and looks inconsistent between the two. Just a solid border
     color/weight change on the one shared outer edge reads cleanly on both. */
  border: 1px solid #1a4731 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Remove the default underline (::before/::after border) on the search
   field itself — the pill's own border/glow above already shows focus. */
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-form-control::before,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-form-control::after,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group::before,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group::after,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__main::before,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__main::after,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__text::before,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__text::after {
  border: none !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__main {
  box-shadow: none !important;
  outline: none !important;
}

/* Same CSS-variable-on-state-change pattern as the button above:
   --pf-v5-c-text-input-group__text--focus-within--after--Border* only
   reassigns when the field is focused, feeding a ::after we'd already
   neutralized statically but not for this specific state — plus its
   own BackgroundColor, which is the overflowing "fond" reported here. */
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group:focus-within,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__text:focus-within {
  --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomWidth: 0 !important;
  --pf-v5-c-text-input-group__text--focus-within--after--BorderBottomColor: transparent !important;
  --pf-v5-c-text-input-group--BackgroundColor: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Typing a value reveals a "clear" (×) button inside the field, via
   .pf-v5-c-text-input-group__utilities — that button (and its own focus
   state) still carried PatternFly's default black border/outline since we
   had only styled the Search submit button so far. */
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__utilities,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__utilities .pf-v5-c-button {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  background: transparent !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__utilities .pf-v5-c-button svg {
  color: #1a4731 !important;
  fill: #1a4731 !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] input:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* The magnifying-glass icon was invisible — force its color explicitly
   instead of relying on currentColor, which was resolving to a near-white
   value in this context. */
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__icon,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-text-input-group__icon svg {
  color: #1a4731 !important;
  fill: #1a4731 !important;
  opacity: 1 !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-button.pf-m-control[aria-label='Search'] {
  background-color: #1a4731 !important;
  color: #ffffff !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-button.pf-m-control[aria-label='Search'] svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-button.pf-m-control[aria-label='Search']:hover,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-button.pf-m-control[aria-label='Search']:focus,
.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-button.pf-m-control[aria-label='Search']:active {
  background-color: #40916c !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  /* PatternFly reassigns these on hover/focus (same mechanism as the login
     page's eye-button bug) — the ::after border they feed isn't touched by
     the plain border/box-shadow resets above, since it's a separate box. */
  --pf-v5-c-button--m-control--Color: #ffffff !important;
  --pf-v5-c-button--m-control--BackgroundColor: #40916c !important;
  --pf-v5-c-button--m-control--after--BorderBottomColor: transparent !important;
}

.pf-v5-c-input-group[data-testid='table-search-input'] .pf-v5-c-button.pf-m-control[aria-label='Search']::after {
  border: none !important;
}

/* Toast alerts (e.g. "Scope mapping updated") — swap the default
   PatternFly accent-color top border for our own palette, drop the
   drop-shadow, keep everything else (layout, icon, spacing) as-is. */
.pf-v5-c-alert {
  --pf-v5-c-alert--BoxShadow: 0 2px 8px rgba(26, 71, 49, 0.08) !important;
  box-shadow: 0 2px 8px rgba(26, 71, 49, 0.08) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

.pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--m-success--BorderTopColor: #40916c !important;
  --pf-v5-c-alert--m-success__icon--Color: #40916c !important;
}

.pf-v5-c-alert.pf-m-danger {
  --pf-v5-c-alert--m-danger--BorderTopColor: #e07a20 !important;
  --pf-v5-c-alert--m-danger__icon--Color: #e07a20 !important;
}