/*
 * homelab-glass — account console override
 * Account Console v3 is a React SPA built on PatternFly v5; the theme
 * system only lets us add a stylesheet (see theme.properties `styles`),
 * not restructure markup.
 *
 * First attempt used PatternFly's global CSS custom properties
 * (--pf-v5-global--*) expecting them to cascade everywhere — verified
 * live against a real preview and found NOT sufficient: PatternFly's
 * `.pf-m-light` component modifier (present on the actual main content
 * section, confirmed via live DOM inspection) hardcodes a light
 * background via a component-scoped variable with a white fallback that
 * the global tokens don't reach. Switched to direct component-class
 * overrides instead, the same approach proven working on the login
 * theme, rather than fighting PatternFly's variable indirection.
 */

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

:root {
  --hg-bg: #0b0b14;
  --hg-surface: rgba(20, 20, 32, 0.55);
  --hg-surface-solid: #14141f;
  --hg-border: rgba(255, 255, 255, 0.14);
  --hg-text: #f5f5ff;
  --hg-text-muted: rgba(245, 245, 255, 0.75);
  --hg-input-bg: rgba(255, 255, 255, 0.06);
  --hg-input-border: rgba(255, 255, 255, 0.16);
  --hg-input-border-focus: #9b8cf5;
  --hg-accent-a: #ff5aaa;
  --hg-accent-b: #7b6ef5;
  --hg-danger: #ff8a9b;
}

html,
body,
#app,
.pf-v5-c-page {
  min-height: 100vh;
  font-family: "Inter", system-ui, -apple-system, sans-serif;
  color: var(--hg-text);
  background:
    radial-gradient(circle at 20% 10%, rgba(255, 90, 170, 0.28), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(110, 110, 245, 0.28), transparent 45%),
    var(--hg-bg) !important;
}

/* Top masthead / nav sidebar */
.pf-v5-c-masthead,
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
  background: var(--hg-surface) !important;
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  backdrop-filter: blur(24px) saturate(150%);
  border-color: var(--hg-border) !important;
  color: var(--hg-text);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pf-v5-c-masthead,
  .pf-v5-c-page__sidebar,
  .pf-v5-c-nav {
    background: var(--hg-surface-solid) !important;
  }
}

.pf-v5-c-nav__link {
  color: var(--hg-text-muted) !important;
}
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link:hover {
  color: var(--hg-text) !important;
}
.pf-v5-c-nav__link.pf-m-current::before {
  border-color: var(--hg-accent-b) !important;
}

/* Main content area — PatternFly's .pf-m-light modifier hardcodes a
   white background here; override it directly rather than relying on
   any variable it might not consume. */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section,
.pf-v5-c-page__main-section.pf-m-light {
  background: transparent !important;
  color: var(--hg-text);
}

.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3 {
  color: var(--hg-text) !important;
}
.pf-v5-c-content,
.pf-v5-c-content p {
  color: var(--hg-text-muted);
}

/* Content cards — profile, security, applications, etc. */
.pf-v5-c-card {
  background: var(--hg-surface) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--hg-border);
  border-radius: 16px;
  color: var(--hg-text);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pf-v5-c-card {
    background: var(--hg-surface-solid) !important;
  }
}
.pf-v5-c-card__title,
.pf-v5-c-card__body,
.pf-v5-c-card__footer {
  color: var(--hg-text);
}

/* Form labels/controls, matching the login theme */
.pf-v5-c-form__label-text,
.pf-v5-c-form__label {
  color: var(--hg-text-muted);
}
.pf-v5-c-form-control {
  background: var(--hg-input-bg) !important;
  border: 1px solid var(--hg-input-border) !important;
  border-radius: 10px;
  color: var(--hg-text) !important;
}
.pf-v5-c-form-control:focus {
  outline: none;
  border-color: var(--hg-input-border-focus) !important;
  box-shadow: 0 0 0 2px var(--hg-input-border-focus);
}

.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(135deg, var(--hg-accent-a), var(--hg-accent-b)) !important;
  border: none;
  font-weight: 600;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus {
  filter: brightness(1.08);
}
.pf-v5-c-button.pf-m-link {
  color: #ffb0d8 !important;
}

/* Data lists / description lists used throughout account security pages */
.pf-v5-c-description-list__term,
.pf-v5-c-description-list__text {
  color: var(--hg-text);
}
.pf-v5-c-description-list__description {
  color: var(--hg-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}