/* VanillyNeko — shared dark pastel PatternFly tokens */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");

html,
html.pf-v5-theme-dark {
  color-scheme: dark;
  --vn-font: "Nunito", "Segoe UI", system-ui, sans-serif;
  --vn-bg: #14101c;
  --vn-bg-elevated: #221a30;
  --vn-surface: #2a2038;
  --vn-surface-soft: rgba(48, 36, 66, 0.92);
  --vn-text: #f1e6ff;
  --vn-text-muted: #b9a8cc;
  --vn-primary: #c4a7e7;
  --vn-primary-dark: #a78bda;
  --vn-accent: #e8a4c8;
  --vn-accent-hover: #f3c4de;
  --vn-border: rgba(196, 167, 231, 0.22);
  --vn-input-bg: rgba(24, 18, 34, 0.92);
  --vn-input-border: rgba(196, 167, 231, 0.28);
  --vn-radius: 20px;
  --vn-radius-sm: 14px;
  --vn-radius-pill: 999px;
  --vn-glow: 0 0 48px rgba(196, 167, 231, 0.18);
  --vn-gradient-btn: linear-gradient(135deg, #d4b8f0 0%, #a78bda 48%, #e8a4c8 100%);

  --pf-v5-global--FontFamily--text: var(--vn-font);
  --pf-v5-global--FontFamily--heading: var(--vn-font);
  --pf-v5-global--BackgroundColor--100: var(--vn-bg);
  --pf-v5-global--BackgroundColor--150: #1a1224;
  --pf-v5-global--BackgroundColor--200: var(--vn-bg-elevated);
  --pf-v5-global--BackgroundColor--300: var(--vn-surface);
  --pf-v5-global--Color--100: var(--vn-text);
  --pf-v5-global--Color--200: var(--vn-text-muted);
  --pf-v5-global--primary-color--100: var(--vn-primary);
  --pf-v5-global--link--Color: var(--vn-accent);
  --pf-v5-global--link--hover--Color: var(--vn-accent-hover);
  --pf-v5-global--BorderColor--100: var(--vn-border);
  --pf-v5-global--BorderColor--200: var(--vn-border);
}

body {
  background-color: var(--vn-bg);
  color: var(--vn-text);
  font-family: var(--vn-font);
}

/* Login pages: transparent body so the background image layer shows through */
body#keycloak-bg {
  background: transparent !important;
  background-color: transparent !important;
}

a {
  color: var(--vn-accent);
}

a:hover {
  color: var(--vn-accent-hover);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--BackgroundColor: var(--vn-primary-dark);
  --pf-v5-c-button--hover--BackgroundColor: var(--vn-primary);
  --pf-v5-c-button--Color: #1a1224;
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--BackgroundColor: var(--vn-surface);
  --pf-v5-c-button--BorderColor: var(--vn-border);
  --pf-v5-c-button--Color: var(--vn-text);
}

.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--vn-accent);
}

.pf-v5-c-form-control,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
select,
textarea {
  background-color: var(--vn-input-bg) !important;
  border-color: var(--vn-input-border) !important;
  color: var(--vn-text) !important;
}

.pf-v5-c-card,
.pf-v5-c-panel,
.pf-v5-c-data-list,
.pf-v5-c-table,
.pf-v5-c-tile,
.pf-v5-c-alert,
.pf-v5-c-menu,
.pf-v5-c-menu__content,
.pf-v5-c-dropdown__menu,
.pf-v5-c-modal-box,
.pf-v5-c-drawer__panel {
  --pf-v5-c-card--BackgroundColor: var(--vn-surface);
  --pf-v5-c-panel--BackgroundColor: var(--vn-surface);
  background-color: var(--vn-surface) !important;
  color: var(--vn-text);
  border-color: var(--vn-border);
}

.pf-v5-c-title,
.pf-v5-c-content,
.pf-v5-c-label,
.pf-v5-c-form__label-text,
.pf-v5-c-table td,
.pf-v5-c-table th,
.pf-v5-c-data-list__cell,
.pf-v5-c-description-list__term,
.pf-v5-c-description-list__description {
  color: var(--vn-text) !important;
}

.pf-v5-u-color-200,
.pf-v5-c-login__main-header-desc {
  color: var(--vn-text-muted) !important;
}

.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #1a1224;
  --pf-v5-c-masthead--Color: var(--vn-text);
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--vn-bg-elevated);
}

.pf-v5-c-nav__link {
  --pf-v5-c-nav__link--Color: var(--vn-text-muted);
  --pf-v5-c-nav__link--m-current--Color: var(--vn-accent);
  --pf-v5-c-nav__link--hover--Color: var(--vn-text);
}

.pf-v5-c-masthead img[src*="logo" i],
.pf-v5-c-masthead img[src*="keycloak" i],
.kc-brand[src*="logo.svg" i] {
  content: url("../img/logo.png") !important;
  opacity: 1 !important;
  width: auto !important;
  height: 48px !important;
  max-width: 220px !important;
  object-fit: contain;
}

.pf-v5-c-masthead__brand svg,
.pf-v5-c-brand svg[src*="keycloak" i] {
  display: none !important;
}

.keycloak__loading-container {
  background-color: var(--vn-bg) !important;
  color: var(--vn-text) !important;
}

.pf-v5-c-spinner__path {
  stroke: var(--vn-primary) !important;
}

code,
pre {
  background: var(--vn-bg-elevated) !important;
  color: var(--vn-text) !important;
  border-color: var(--vn-border) !important;
}