:root {
  --sagan-navy: #0c0b23;
  --sagan-navy-mid: #18163b;
  --sagan-panel: #12102e;
  --sagan-pink: #ff0978;
  --sagan-pink-hover: #e0086a;
  --sagan-teal: #18ffd9;
  --sagan-page: #f7f6ff;
  --sagan-input: #f4f3ff;
  --sagan-input-border: #dedaff;
  --sagan-text: #0f0d28;
  --sagan-muted: #6b6890;
  --sagan-card-shadow: 0 2px 4px rgba(12, 11, 35, 0.04), 0 8px 32px rgba(12, 11, 35, 0.08);
  --sagan-focus-ring: 0 0 0 3px rgba(255, 9, 120, 0.14);

  --pf-v5-global--FontFamily--text: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pf-v5-global--primary-color--100: var(--sagan-pink);
  --pf-v5-global--primary-color--200: var(--sagan-pink-hover);
  --pf-v5-global--active-color--100: var(--sagan-pink);
  --pf-v5-global--link--Color: var(--sagan-pink);
  --pf-v5-global--link--Color--hover: var(--sagan-pink-hover);
  --pf-v5-global--BorderRadius--sm: 0.5rem;
  --pf-v5-global--BorderRadius--lg: 0.75rem;
  --pf-v5-global--BorderColor--100: #e8e6ff;
}

html,
body,
#app {
  background: var(--sagan-page);
  color: var(--sagan-text);
  letter-spacing: 0;
}

.keycloak__loading-container {
  color: var(--sagan-text) !important;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255, 9, 120, 0.10) 0%, transparent 48%),
    radial-gradient(ellipse at 80% 85%, rgba(24, 255, 217, 0.10) 0%, transparent 46%),
    var(--sagan-page) !important;
}

.keycloak__loading-container .pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--sagan-pink);
}

#loading-text {
  color: var(--sagan-text);
  font-weight: 600;
}

.pf-v5-c-page {
  --pf-v5-c-page__main--BackgroundColor: var(--sagan-page);
  background: var(--sagan-page);
}

.pf-v5-c-page__header,
.pf-v5-c-masthead {
  --pf-v5-c-page__header--BackgroundColor: var(--sagan-navy);
  --pf-v5-c-masthead--BackgroundColor: var(--sagan-navy);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 9, 120, 0.16) 0%, transparent 48%),
    linear-gradient(120deg, var(--sagan-navy) 0%, var(--sagan-navy-mid) 100%) !important;
}

.keycloak__pageheader_brand,
.pf-v5-c-brand img {
  max-height: 2.25rem;
  object-fit: contain;
}

.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--sagan-panel);
  --pf-v5-c-nav--BackgroundColor: var(--sagan-panel);
  background: var(--sagan-panel) !important;
}

.pf-v5-c-nav__link {
  border-radius: 0.625rem;
  color: rgba(255, 255, 255, 0.68);
}

.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current .pf-v5-c-nav__link {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.06);
}

.pf-v5-c-nav__link::before,
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__item.pf-m-current .pf-v5-c-nav__link::before {
  border-color: var(--sagan-pink) !important;
}

.pf-v5-c-page__main-section,
.pf-v5-c-page__main-breadcrumb {
  background: transparent;
}

.pf-v5-c-card,
.pf-v5-c-panel,
.pf-v5-c-modal-box {
  border: 1px solid #ebe9ff;
  border-radius: 0.875rem;
  background: #ffffff;
  box-shadow: var(--sagan-card-shadow);
}

.pf-v5-c-card__title,
.pf-v5-c-title {
  color: var(--sagan-text);
  letter-spacing: 0;
}

.pf-v5-c-button {
  border-radius: 0.75rem;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--sagan-pink);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--sagan-pink-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--sagan-pink-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--sagan-pink-hover);
  border: 0;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  box-shadow: 0 4px 20px rgba(255, 9, 120, 0.28);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--sagan-text);
  --pf-v5-c-button--m-secondary--BorderColor: #e8e6ff;
  background: #ffffff;
}

.pf-v5-c-button.pf-m-secondary:hover {
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--sagan-pink);
  background: var(--sagan-input);
}

.pf-v5-c-form-control,
.pf-v5-c-menu-toggle,
.pf-v5-c-select__toggle,
.pf-v5-c-text-input-group,
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
  --pf-v5-c-form-control--BackgroundColor: var(--sagan-input);
  --pf-v5-c-form-control--BorderColor: var(--sagan-input-border);
  border-radius: 0.75rem;
  color: var(--sagan-text);
}

.pf-v5-c-form-control:focus-within,
.pf-v5-c-menu-toggle:focus,
.pf-v5-c-select__toggle:focus,
.pf-v5-c-text-input-group:focus-within,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--sagan-pink) !important;
  box-shadow: var(--sagan-focus-ring) !important;
  outline: 0;
}

.pf-v5-c-table {
  --pf-v5-c-table--BorderColor: #ebe9ff;
  --pf-v5-c-table__thead--cell--Color: #3d3a5c;
  border-radius: 0.75rem;
  overflow: hidden;
}

.pf-v5-c-table thead,
.pf-v5-c-table__thead {
  background: #fbfaff;
}

.pf-v5-c-table tr:hover td {
  background: rgba(244, 243, 255, 0.72);
}

.pf-v5-c-alert {
  border-radius: 0.75rem;
  box-shadow: none;
}

.pf-v5-c-alert.pf-m-danger {
  --pf-v5-c-alert--m-danger--BackgroundColor: #fff0f3;
  --pf-v5-c-alert--m-danger--BorderColor: #ffc5d0;
}

.pf-v5-c-alert.pf-m-success {
  --pf-v5-c-alert--m-success--BackgroundColor: #f0fff8;
  --pf-v5-c-alert--m-success--BorderColor: #9efbd3;
}

.pf-v5-c-alert.pf-m-warning {
  --pf-v5-c-alert--m-warning--BackgroundColor: #fff8ec;
  --pf-v5-c-alert--m-warning--BorderColor: #ffd88a;
}

.pf-v5-c-alert.pf-m-info {
  --pf-v5-c-alert--m-info--BackgroundColor: #f4f3ff;
  --pf-v5-c-alert--m-info--BorderColor: #bccaff;
}

a,
.pf-v5-c-button.pf-m-link {
  color: var(--sagan-pink);
}

a:hover,
.pf-v5-c-button.pf-m-link:hover {
  color: var(--sagan-pink-hover);
}

:focus-visible {
  outline: 0;
  box-shadow: var(--sagan-focus-ring) !important;
}

@media (prefers-color-scheme: dark) {
  :root {
    --sagan-page: #0c0b23;
    --sagan-text: #ffffff;
    --sagan-muted: rgba(255, 255, 255, 0.56);
    --sagan-input: #18163b;
    --sagan-input-border: rgba(255, 255, 255, 0.12);
  }

  .pf-v5-c-card,
  .pf-v5-c-panel,
  .pf-v5-c-modal-box {
    border-color: rgba(255, 255, 255, 0.08);
    background: #12102e;
  }
}