:root {
  --sys-paper: #ffffff;
  --sys-paper-100: #f5f5f6;
  --sys-paper-200: #e8e8eb;
  --sys-ink-900: #111114;
  --sys-ink-800: #1c1c1f;
  --sys-ink-700: #2d2d31;
  --sys-mid-600: #52525b;
  --sys-mid-500: #71717a;
  --sys-mid-400: #a1a1aa;
  --sys-steel-700: #5a6478;
  --sys-steel-500: #8a99b3;
  --sys-focus-ring: #5a6478;
  --sys-danger: #b42318;
  --sys-success: #157f3b;
  --sys-radius-control: 6px;
  --sys-radius-surface: 8px;
  --sys-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --pf-v5-global--FontFamily--sans-serif: var(--sys-font-sans);
  --pf-v5-global--primary-color--100: var(--sys-ink-900);
  --pf-v5-global--primary-color--200: var(--sys-ink-800);
  --pf-v5-global--link--Color: var(--sys-ink-900);
  --pf-v5-global--link--Color--hover: var(--sys-steel-700);
  --pf-v5-global--BorderRadius--sm: var(--sys-radius-control);
  --pf-v5-global--BorderRadius--lg: var(--sys-radius-surface);
}

:root.pf-v5-theme-dark {
  --sys-paper: #0a0a0c;
  --sys-paper-100: #111114;
  --sys-paper-200: #202025;
  --sys-ink-900: #f5f5f7;
  --sys-ink-800: #e8e8eb;
  --sys-ink-700: #d4d4d8;
  --sys-mid-600: #a1a1aa;
  --sys-mid-500: #8a8a94;
  --sys-mid-400: #71717a;
  --sys-steel-700: #a9b4c8;
  --sys-steel-500: #8a99b3;
  --sys-focus-ring: #a9b4c8;
  --sys-danger: #ff7a70;
  --sys-success: #4bd681;
}

html,
body,
#app {
  min-height: 100%;
  background: var(--sys-paper);
  color: var(--sys-ink-900);
  font-family: var(--sys-font-sans);
}

.keycloak__loading-container {
  display: grid !important;
  min-height: 100vh;
  place-items: center;
  background: var(--sys-paper) !important;
  color: var(--sys-ink-900) !important;
}

#loading-text {
  color: var(--sys-mid-600);
  font-size: 14px !important;
  font-weight: 500 !important;
}

.pf-v5-c-spinner,
[role="progressbar"] {
  color: var(--sys-ink-900);
}

.pf-v5-c-spinner__path {
  stroke: var(--sys-ink-900);
}

.pf-v5-c-skeleton,
[class*="skeleton" i] {
  background-color: var(--sys-paper-200) !important;
  color: transparent !important;
}

.pf-v5-c-page,
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background: var(--sys-paper) !important;
}

.pf-v5-c-masthead,
.pf-v5-c-page__header,
.pf-v5-c-page__sidebar,
.pf-v5-c-nav {
  background: var(--sys-paper-100) !important;
  border-color: var(--sys-paper-200) !important;
}

.pf-v5-c-brand img,
img[src$="logo.svg"] {
  max-height: 32px;
}

.pf-v5-c-page__main-section,
.pf-v5-c-card,
.pf-v5-c-panel,
.pf-v5-c-data-list,
.pf-v5-c-table {
  border-radius: var(--sys-radius-surface);
}

.pf-v5-c-card,
.pf-v5-c-panel {
  border: 1px solid var(--sys-paper-200);
  box-shadow: none;
}

.pf-v5-c-title {
  color: var(--sys-ink-900);
  letter-spacing: 0;
}

.pf-v5-c-content,
.pf-v5-c-form,
.pf-v5-c-description-list,
.pf-v5-c-data-list {
  color: var(--sys-ink-900);
}

.pf-v5-c-form__label-text,
.pf-v5-c-menu__item,
.pf-v5-c-nav__link {
  color: var(--sys-ink-800);
}

.pf-v5-c-helper-text,
.pf-v5-c-description-list__text,
.pf-v5-c-content small {
  color: var(--sys-mid-600);
}

.pf-v5-c-helper-text__item.pf-m-error,
.pf-v5-c-helper-text__item.pf-m-error .pf-v5-c-helper-text__item-text {
  color: var(--sys-danger) !important;
}

.pf-v5-c-button {
  border-radius: var(--sys-radius-control);
}

.pf-v5-c-button.pf-m-primary {
  background: var(--sys-ink-900);
  color: var(--sys-paper);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  background: var(--sys-ink-800);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-control {
  border-color: var(--sys-paper-200);
  color: var(--sys-ink-900);
}

.pf-v5-c-form-control,
.pf-v5-c-text-input-group {
  border-radius: var(--sys-radius-control);
}

.pf-v5-c-form-control,
.pf-v5-c-menu-toggle,
.pf-v5-c-select__toggle {
  background: var(--sys-paper) !important;
  border-color: var(--sys-paper-200) !important;
  color: var(--sys-ink-900) !important;
}

input[aria-invalid="true"]:not(:disabled),
textarea[aria-invalid="true"]:not(:disabled),
select[aria-invalid="true"]:not(:disabled),
.pf-v5-c-form__group:has(.pf-v5-c-helper-text__item.pf-m-error) .pf-v5-c-form-control,
.pf-v5-c-form__group:has(.pf-v5-c-helper-text__item.pf-m-error) .pf-v5-c-text-input-group {
  border-color: var(--sys-danger) !important;
  box-shadow: inset 0 0 0 1px var(--sys-danger) !important;
}

input[type="checkbox"],
input[type="radio"] {
  min-width: 24px;
  min-height: 24px;
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-menu-toggle:focus,
.pf-v5-c-button:focus-visible,
.pf-v5-c-nav__link:focus-visible {
  outline: 2px solid var(--sys-focus-ring);
  outline-offset: 2px;
}

.pf-v5-c-alert.pf-m-danger {
  border-color: color-mix(in srgb, var(--sys-danger), transparent 70%);
}

.pf-v5-c-alert.pf-m-success {
  border-color: color-mix(in srgb, var(--sys-success), transparent 70%);
}

@media (max-width: 768px) {
  .pf-v5-c-page__main-section {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* Admin Console polish layer. Keep this on PatternFly primitives so Keycloak
   upgrades can replace the React app without a template fork. */
.pf-v5-c-masthead,
.pf-v5-c-page__header {
  min-height: 64px;
  border-bottom: 1px solid var(--sys-paper-200);
  box-shadow: none !important;
}

.pf-v5-c-page__sidebar {
  border-right: 1px solid var(--sys-paper-200);
}

.pf-v5-c-nav__section-title {
  color: var(--sys-mid-600);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}

.pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link.pf-m-current:hover,
.pf-v5-c-nav__link.pf-m-current:focus {
  border-radius: 0;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"],
.pf-v5-c-nav__link:hover {
  background: var(--sys-paper) !important;
  color: var(--sys-ink-900) !important;
}

.pf-v5-c-page__main {
  min-width: 0;
  overflow-x: clip;
}

.pf-v5-c-page__main-section {
  min-width: 0;
  padding: 16px 24px !important;
}

.pf-v5-c-page__main-section > * {
  max-width: 100%;
}

.pf-v5-c-page__main-section h1,
.pf-v5-c-page__main-section .pf-v5-c-title.pf-m-2xl,
.pf-v5-c-page__main-section .pf-v5-c-title.pf-m-3xl {
  font-size: 26px !important;
  line-height: 1.2 !important;
  font-weight: 650 !important;
}

.pf-v5-c-page__main-section h2,
.pf-v5-c-page__main-section .pf-v5-c-title.pf-m-xl {
  font-size: 20px !important;
  line-height: 1.25 !important;
  font-weight: 650 !important;
}

.pf-v5-c-page__main-section h3,
.pf-v5-c-page__main-section .pf-v5-c-title.pf-m-lg {
  font-size: 15px !important;
  line-height: 1.35 !important;
  font-weight: 650 !important;
}

.pf-v5-c-page__main-section p,
.pf-v5-c-content p {
  color: var(--sys-mid-600);
}

.pf-v5-c-alert,
.pf-v5-c-banner {
  border-radius: 0;
}

.pf-v5-c-tabs {
  max-width: 100%;
  overflow: hidden;
}

.pf-v5-c-tabs__list,
.pf-v5-c-tabs__scroll-button {
  min-width: 0;
}

.pf-v5-c-tab-content,
.pf-v5-c-tab-content__body,
[role="tabpanel"] {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

main .pf-v5-c-tab-content,
main .pf-v5-c-tab-content__body,
main [role="tabpanel"] {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow-x: auto !important;
}

.pf-v5-c-table,
[role="grid"] {
  max-width: 100%;
}

main [role="grid"] {
  max-width: none !important;
}

[role="grid"] {
  border-top: 1px solid var(--sys-paper-200);
  border-bottom: 1px solid var(--sys-paper-200);
}

[role="row"],
.pf-v5-c-table tr {
  border-color: var(--sys-paper-200) !important;
}

[role="columnheader"],
[role="gridcell"],
.pf-v5-c-table th,
.pf-v5-c-table td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

[role="columnheader"],
.pf-v5-c-table th {
  color: var(--sys-mid-600) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
}

.pf-v5-c-toolbar,
.pf-v5-c-toolbar__content,
.pf-v5-c-toolbar__content-section {
  min-width: 0;
}

.pf-v5-c-toolbar__content-section {
  align-items: center;
  row-gap: 12px;
}

.pf-v5-c-empty-state,
.pf-v5-c-empty-state__content {
  align-items: flex-start !important;
  justify-content: flex-start !important;
  max-width: none !important;
  text-align: left !important;
}

.pf-v5-c-empty-state__body {
  color: var(--sys-mid-600) !important;
}

.pf-v5-c-form {
  max-width: 1040px;
}

.pf-v5-c-form__group {
  row-gap: 8px;
}

main .pf-v5-c-form__group.pf-m-action,
main .pf-v5-c-form__group-control,
main .pf-v5-c-form__actions {
  max-width: 100% !important;
}

main .pf-v5-c-form__group.pf-m-action {
  width: 100% !important;
  overflow-x: clip !important;
}

.pf-v5-c-form-control[disabled],
.pf-v5-c-form-control.pf-m-disabled,
input:disabled,
textarea:disabled,
select:disabled {
  background: var(--sys-paper-100) !important;
  color: var(--sys-mid-600) !important;
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .pf-v5-c-masthead,
  .pf-v5-c-page__header {
    min-height: 56px;
  }

  .pf-v5-c-page__main-section {
    padding: 16px !important;
  }

  .pf-v5-c-page__main-section h1,
  .pf-v5-c-page__main-section .pf-v5-c-title.pf-m-2xl,
  .pf-v5-c-page__main-section .pf-v5-c-title.pf-m-3xl {
    font-size: 24px !important;
  }

  .pf-v5-c-page__sidebar.pf-m-collapsed,
  .pf-v5-c-page__sidebar.pf-m-collapsed .pf-v5-c-page__sidebar-body,
  .pf-v5-c-page__sidebar.pf-m-collapsed .pf-v5-c-nav,
  .pf-v5-c-page__sidebar.pf-m-collapsed .pf-v5-c-nav__section-title,
  .pf-v5-c-page__sidebar.pf-m-collapsed .pf-v5-c-nav__link {
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow: hidden !important;
    border-right: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .pf-v5-c-page__sidebar.pf-m-expanded,
  .pf-v5-c-page__sidebar.pf-m-expanded .pf-v5-c-nav {
    z-index: 220;
    width: min(290px, calc(100vw - 48px)) !important;
    max-width: calc(100vw - 48px) !important;
    border-right: 1px solid var(--sys-paper-200) !important;
    box-shadow: 18px 0 36px rgba(17, 17, 20, 0.14);
    pointer-events: auto !important;
    visibility: visible !important;
  }

  [role="columnheader"],
  [role="gridcell"],
  .pf-v5-c-table th,
  .pf-v5-c-table td {
    padding-top: 9px !important;
    padding-bottom: 9px !important;
  }

  .pf-v5-c-form {
    max-width: 100%;
  }

  main .pf-v5-c-form__group.pf-m-action {
    box-sizing: border-box !important;
    width: calc(100% - 16px) !important;
  }

  main .pf-v5-c-form__group.pf-m-action .pf-v5-c-form__group-control {
    width: auto !important;
  }
}