:root {
  --zonos-red: #e84449;
  --zonos-red-hover: #c9363d;
  --zonos-bg: #202020;
  --zonos-header: #151515;
  --zonos-sidebar: #24272a;
  --zonos-surface: #2c2c2c;
  --zonos-surface-raised: #3c3c3c;
  --zonos-control: #454545;
  --zonos-border: rgba(255, 255, 255, 0.13);
  --zonos-text: #ffffff;
  --zonos-muted: #b9bcc3;
}

html,
body,
#root {
  min-height: 100%;
  background: var(--zonos-bg) !important;
  color: var(--zonos-text) !important;
}

body {
  font-family: "Work Sans", "Segoe UI", Arial, sans-serif !important;
}

body::before,
body::after {
  display: none !important;
}

#root .pf-v5-c-page,
#root .pf-v5-c-page__main,
#root .pf-v5-c-page__main-container,
#root .pf-v5-c-page__main-section,
#root .pf-v5-c-page__main-body {
  background: var(--zonos-bg) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-masthead {
  min-height: 76px;
  background: var(--zonos-header) !important;
  border-bottom: 1px solid var(--zonos-border) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

#root .pf-v5-c-masthead__brand,
#root [class*="masthead__brand"] {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 218px;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-masthead__brand::after,
#root [class*="masthead__brand"]::after {
  content: "EagleEye";
  color: var(--zonos-text);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

#root .pf-v5-c-masthead__brand img,
#root .pf-v5-c-masthead__brand svg,
#root [class*="masthead__brand"] img,
#root [class*="masthead__brand"] svg,
#root img[alt*="Keycloak" i] {
  width: 126px !important;
  height: 38px !important;
  max-width: 126px !important;
  object-fit: contain;
  background: #ffffff !important;
  border-radius: 4px;
  padding: 5px 9px;
  box-sizing: border-box;
  content: url("../img/zonos-primary.png") !important;
}

#root .pf-v5-c-masthead__content,
#root .pf-v5-c-masthead__main {
  background: transparent !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-page__sidebar,
#root .pf-v5-c-page__sidebar-body,
#root .pf-v5-c-nav {
  background: var(--zonos-sidebar) !important;
  border-color: var(--zonos-border) !important;
}

#root .pf-v5-c-nav__link,
#root .pf-v5-c-nav__section-title,
#root .pf-v5-c-nav__expandable-list {
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-nav__link {
  border-inline-start: 3px solid transparent;
}

#root .pf-v5-c-nav__link:hover,
#root .pf-v5-c-nav__link:focus {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-nav__link.pf-m-current,
#root .pf-v5-c-nav__link[aria-current="page"],
#root .pf-v5-c-nav__link[aria-current="true"] {
  background: rgba(232, 68, 73, 0.18) !important;
  border-inline-start-color: var(--zonos-red) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-breadcrumb__item-text,
#root .pf-v5-c-title,
#root .pf-v5-c-content,
#root h1,
#root h2,
#root h3,
#root h4,
#root h5,
#root h6,
#root p,
#root label,
#root th,
#root td,
#root span {
  color: inherit;
}

#root a {
  color: #ff8589;
}

#root a:hover,
#root a:focus {
  color: #ffffff;
}

#root .pf-v5-c-card,
#root .pf-v5-c-panel,
#root .pf-v5-c-data-list,
#root .pf-v5-c-data-list__item,
#root .pf-v5-c-modal-box,
#root .pf-v5-c-drawer__content {
  background: var(--zonos-surface-raised) !important;
  border: 1px solid var(--zonos-border) !important;
  color: var(--zonos-text) !important;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

#root .pf-v5-c-card__title,
#root .pf-v5-c-card__body,
#root .pf-v5-c-card__footer,
#root .pf-v5-c-panel__main,
#root .pf-v5-c-panel__main-body {
  background: transparent !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-table {
  background: var(--zonos-surface) !important;
  color: var(--zonos-text) !important;
  --pf-v5-c-table--BackgroundColor: var(--zonos-surface);
  --pf-v5-c-table--thead--BackgroundColor: var(--zonos-sidebar);
  --pf-v5-c-table--tbody--tr--BorderColor: var(--zonos-border);
}

#root .pf-v5-c-table thead,
#root .pf-v5-c-table th {
  background: var(--zonos-sidebar) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-table tbody tr,
#root .pf-v5-c-table tbody td {
  background: var(--zonos-surface) !important;
  border-color: var(--zonos-border) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-table tbody tr:hover,
#root .pf-v5-c-table tbody tr:focus-within {
  background: var(--zonos-surface-raised) !important;
}

#root .pf-v5-c-tabs,
#root .pf-v5-c-tabs__list,
#root .pf-v5-c-tabs__item {
  background: var(--zonos-surface) !important;
  border-color: var(--zonos-border) !important;
}

#root .pf-v5-c-tabs__link {
  color: var(--zonos-muted) !important;
}

#root .pf-v5-c-tabs__item.pf-m-current,
#root .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  color: var(--zonos-text) !important;
  border-bottom-color: var(--zonos-red) !important;
}

#root input,
#root textarea,
#root select,
#root .pf-v5-c-form-control,
#root .pf-v5-c-select__toggle {
  background: var(--zonos-control) !important;
  border-color: var(--zonos-border) !important;
  color: var(--zonos-text) !important;
}

#root input::placeholder,
#root textarea::placeholder {
  color: var(--zonos-muted) !important;
}

#root input:focus,
#root textarea:focus,
#root select:focus,
#root .pf-v5-c-form-control:focus,
#root .pf-v5-c-select__toggle:focus {
  border-color: var(--zonos-red) !important;
  box-shadow: 0 0 0 2px rgba(232, 68, 73, 0.25) !important;
}

#root .pf-v5-c-button.pf-m-primary,
#root button[type="submit"],
#root .pf-v5-c-button.pf-m-danger {
  background: var(--zonos-red) !important;
  border-color: var(--zonos-red) !important;
  color: #ffffff !important;
}

#root .pf-v5-c-button.pf-m-primary:hover,
#root .pf-v5-c-button.pf-m-primary:focus,
#root button[type="submit"]:hover,
#root button[type="submit"]:focus {
  background: var(--zonos-red-hover) !important;
  border-color: var(--zonos-red-hover) !important;
}

#root .pf-v5-c-button.pf-m-secondary,
#root .pf-v5-c-button.pf-m-tertiary {
  background: transparent !important;
  border-color: var(--zonos-border) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-dropdown__menu,
#root .pf-v5-c-menu,
#root .pf-v5-c-menu__list,
#root .pf-v5-c-menu__item,
#root .pf-v5-c-popover,
#root .pf-v5-c-tooltip {
  background: var(--zonos-surface-raised) !important;
  border-color: var(--zonos-border) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-menu__item:hover,
#root .pf-v5-c-menu__item:focus,
#root .pf-v5-c-dropdown__menu-item:hover,
#root .pf-v5-c-dropdown__menu-item:focus {
  background: rgba(232, 68, 73, 0.18) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-alert {
  background: var(--zonos-surface-raised) !important;
  border-color: var(--zonos-red) !important;
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-alert__title,
#root .pf-v5-c-alert__description {
  color: var(--zonos-text) !important;
}

#root .pf-v5-c-pagination,
#root .pf-v5-c-toolbar,
#root .pf-v5-c-toolbar__content,
#root .pf-v5-c-toolbar__group {
  background: transparent !important;
  color: var(--zonos-text) !important;
  border-color: var(--zonos-border) !important;
}

#root .pf-v5-c-switch__toggle,
#root .pf-v5-c-check__input:checked + .pf-v5-c-check__label::before {
  background: var(--zonos-red) !important;
  border-color: var(--zonos-red) !important;
}

@media (max-width: 768px) {
  #root .pf-v5-c-masthead__brand,
  #root [class*="masthead__brand"] {
    min-width: 0;
  }

  #root .pf-v5-c-masthead__brand::after,
  #root [class*="masthead__brand"]::after {
    display: none;
  }
}

/* Keycloak's React console does not use #root as its application mount.
 * Keep these PatternFly overrides unscoped so all blue primary states use the
 * EagleEye red accent in the actual Admin Console DOM. */
:root,
:where(.pf-v5-theme-dark) {
  --pf-v5-global--primary-color--100: var(--zonos-red) !important;
  --pf-v5-global--primary-color--200: var(--zonos-red-hover) !important;
  --pf-v5-global--primary-color--300: #a92e34 !important;
  --pf-v5-global--primary-color--dark-100: var(--zonos-red) !important;
  --pf-v5-global--primary-color--dark-200: var(--zonos-red-hover) !important;
  --pf-v5-global--active-color--100: var(--zonos-red) !important;
  --pf-v5-global--link--Color: #ff8589 !important;
  --pf-v5-global--link--Color--hover: #ffffff !important;
}

.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-v5-c-button.pf-m-primary:active,
.pf-v5-c-button.pf-m-primary.pf-m-active,
.pf-v5-c-button.pf-m-danger,
button[type="submit"] {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--zonos-red) !important;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--zonos-red-hover) !important;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--zonos-red-hover) !important;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #a92e34 !important;
  background-color: var(--zonos-red) !important;
  border-color: var(--zonos-red) !important;
  color: #ffffff !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
button[type="submit"]:hover,
button[type="submit"]:focus {
  background-color: var(--zonos-red-hover) !important;
  border-color: var(--zonos-red-hover) !important;
}

.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-link:hover,
.pf-v5-c-button.pf-m-link:focus,
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-secondary:focus,
.pf-v5-c-breadcrumb__link,
.pf-v5-c-pagination__nav,
.pf-v5-c-table__sort,
.pf-v5-c-form-control__utilities button {
  color: #ff8589 !important;
}

.pf-v5-c-tabs__item.pf-m-current,
.pf-v5-c-tabs__item.pf-m-current::after,
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link,
.pf-v5-c-tabs__item.pf-m-active,
.pf-v5-c-tabs__item.pf-m-active::after {
  border-color: var(--zonos-red) !important;
  border-bottom-color: var(--zonos-red) !important;
  color: #ffffff !important;
}

.pf-v5-c-tabs__item.pf-m-current::after,
.pf-v5-c-tabs__item.pf-m-active::after {
  background-color: var(--zonos-red) !important;
}

.pf-v5-c-check__input:checked + .pf-v5-c-check__label::before,
.pf-v5-c-check__input:checked + label::before,
.pf-v5-c-switch__input:checked + .pf-v5-c-switch__toggle,
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background-color: var(--zonos-red) !important;
  border-color: var(--zonos-red) !important;
}

.pf-v5-c-check__input:focus + .pf-v5-c-check__label::before,
.pf-v5-c-form-control:hover,
.pf-v5-c-form-control:focus,
.pf-v5-c-select__toggle:hover,
.pf-v5-c-select__toggle:focus,
.pf-v5-c-form-control input:hover,
.pf-v5-c-form-control input:focus,
.pf-v5-c-form-control textarea:hover,
.pf-v5-c-form-control textarea:focus,
.pf-v5-c-form-control select:hover,
.pf-v5-c-form-control select:focus,
.pf-v5-c-button:hover::after,
.pf-v5-c-button:focus::after {
  border-color: var(--zonos-red) !important;
  border-bottom-color: var(--zonos-red) !important;
  box-shadow: 0 0 0 2px rgba(232, 68, 73, 0.28) !important;
}

.pf-v5-c-select__toggle-arrow,
.pf-v5-c-spinner__path,
.pf-v5-c-progress__bar,
.pf-v5-c-progress__status {
  color: var(--zonos-red) !important;
  border-color: var(--zonos-red) !important;
  stroke: var(--zonos-red) !important;
  background-color: var(--zonos-red) !important;
}