/* atrial-account.css — Atrial AI dark-glass treatment for the v3 account console. * * Critical context for future maintainers: * 1. Keycloak 26 ships a built-in PatternFly 5 dark mode triggered by adding * `.pf-v5-theme-dark` to based on the user's OS color scheme. * Our overrides must beat both default (light) and dark variants. * 2. Our :root design-token overrides also target `.pf-v5-theme-dark` so * they apply regardless of OS color scheme. * 3. PF5 component styles use compound selectors like * `.pf-v5-theme-dark .pf-v5-c-foo` (specificity 0,2,0). Each of our * component rules below pairs the bare selector with the * `.pf-v5-theme-dark` ancestor variant + !important to beat both modes. * 4. Vite-emitted CSS-module hash classes (_brand_, _title_, etc.) * are matched via [class*="..."] partial selectors so the rule survives * Keycloak rebuilds that change the hashes. */ /* ── Page chrome — html, body, gradient backdrop ─────────────────────── */ html, html.pf-v5-theme-dark, body, body[data-page-id] { background: var(--atrial-bg-fallback) !important; background-image: var(--atrial-bg-gradient) !important; background-attachment: fixed !important; color: var(--atrial-text-primary) !important; font-family: var(--atrial-font) !important; margin: 0; padding: 0; min-height: 100vh; -webkit-font-smoothing: antialiased; } /* ── PatternFly 5 design tokens — override for both modes ────────────── */ :root, :root.pf-v5-theme-dark, .pf-v5-theme-dark { --pf-v5-global--BackgroundColor--100: transparent !important; --pf-v5-global--BackgroundColor--150: transparent !important; --pf-v5-global--BackgroundColor--200: rgba(247, 245, 251, 0.04) !important; /* IMPORTANT: light-100 must stay transparent so the .pf-m-light modifier * inherits transparency rather than the Atrial Charcoal we used to set * here. PF5 wires the modifier's component-scoped variable from this. */ --pf-v5-global--BackgroundColor--light-100: transparent !important; --pf-v5-global--BackgroundColor--dark-100: var(--atrial-dark) !important; --pf-v5-global--BackgroundColor--dark-200: var(--atrial-dark) !important; /* PF5 component-scoped variables — pin these to transparent so the * .pf-v5-c-page__main-section default never injects an opaque color. */ --pf-v5-c-page__main-section--BackgroundColor: transparent !important; --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent !important; --pf-v5-global--Color--100: var(--atrial-text-primary) !important; --pf-v5-global--Color--200: var(--atrial-text-secondary) !important; --pf-v5-global--Color--light-100: var(--atrial-text-primary) !important; --pf-v5-global--Color--light-200: var(--atrial-text-secondary) !important; --pf-v5-global--BorderColor--100: var(--atrial-glass-border) !important; --pf-v5-global--BorderColor--200: var(--atrial-glass-border) !important; --pf-v5-global--primary-color--100: var(--atrial-accent) !important; --pf-v5-global--primary-color--200: var(--atrial-accent-hover) !important; --pf-v5-global--active-color--100: var(--atrial-accent) !important; --pf-v5-global--link--Color: var(--atrial-text-primary) !important; --pf-v5-global--link--Color--hover: var(--atrial-accent) !important; --pf-v5-global--FontFamily--text: var(--atrial-font) !important; --pf-v5-global--FontFamily--heading: var(--atrial-font) !important; } /* ── Brand mark — masthead logo override ─────────────────────────────── */ /* The v3 SPA hardcodes * for the masthead logo. The `keycloak-account-ui` JAR ships its own * logo.svg as a classpath resource that shadows ANY filesystem logo.svg * we place in our theme. Empirically, `content: url()` overrides on * also don't take in this layout, and pseudo-elements that reference * external SVG files via background-image still depend on Keycloak's * resource resolver path-walking quirks. * * The bulletproof approach is to embed the SVG inline as a base64 data URL * INSIDE this CSS file. The image ships in the same HTTP response as the * stylesheet — no separate fetch, no path resolution, no inheritance. * Whatever Keycloak does with /logo.svg is irrelevant. */ /* Hide the SPA's hardcoded regardless of class hash or selector path */ html .pf-v5-c-masthead__brand img, html.pf-v5-theme-dark .pf-v5-c-masthead__brand img, .pf-v5-c-masthead__brand img, img[class*="_brand_"], img[src*="/account/atrialai/logo.svg"] { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; opacity: 0 !important; } /* Ensure the parent renders as a layout container with room for our mark */ html .pf-v5-c-masthead__brand, html.pf-v5-theme-dark .pf-v5-c-masthead__brand { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; min-width: 40px !important; min-height: 40px !important; padding: 4px 8px !important; } /* Render the Atrial AI hex shield as a pseudo-element with the SVG inlined * as a data URL. The base64 payload below is the contents of * resources/logo.svg — keep them in sync if you re-export the brand mark. */ html .pf-v5-c-masthead__brand::after, html.pf-v5-theme-dark .pf-v5-c-masthead__brand::after { content: '' !important; display: inline-block !important; width: 36px !important; height: 36px !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiByb2xlPSJpbWciIGFyaWEtbGFiZWw9IkF0cmlhbCBBSSI+CiAgPHRpdGxlPkF0cmlhbCBBSTwvdGl0bGU+CiAgPHBhdGggZD0iTTEwMCAxNSBMMTcyIDU3IEwxNzIgMTQzIEwxMDAgMTg1IEwyOCAxNDMgTDI4IDU3IFoiCiAgICAgICAgZmlsbD0iIzA0MTEyMiIgc3Ryb2tlPSIjRjdGNUZCIiBzdHJva2Utd2lkdGg9IjYiCiAgICAgICAgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+CiAgPHBhdGggZD0iTTEwMCA1NSBDIDg5IDY3LCA3OCA5MCwgNjUgMTI0IEMgNjAgMTM4LCA2NCAxNTIsIDc4IDE1MiBDIDkwIDE1MCwgOTQgMTM4LCA5NiAxMTYgQyA5OCA5NiwgOTkgNzYsIDEwMCA1NSBaIgogICAgICAgIGZpbGw9IiMwQjAwQ0YiLz4KICA8cGF0aCBkPSJNMTAwIDU1IEMgMTExIDY3LCAxMjIgOTAsIDEzNSAxMjQgQyAxNDAgMTM4LCAxMzYgMTUyLCAxMjIgMTUyIEMgMTEwIDE1MCwgMTA2IDEzOCwgMTA0IDExNiBDIDEwMiA5NiwgMTAxIDc2LCAxMDAgNTUgWiIKICAgICAgICBmaWxsPSIjMEIwMENGIi8+Cjwvc3ZnPgo=") !important; } /* ── Masthead — sticky top bar with logo + user dropdown ─────────────── */ html .pf-v5-c-masthead, html.pf-v5-theme-dark .pf-v5-c-masthead, html header.pf-v5-c-masthead, html.pf-v5-theme-dark header.pf-v5-c-masthead, html .pf-v5-c-page__header { background: rgba(4, 17, 34, 0.85) !important; background-color: rgba(4, 17, 34, 0.85) !important; border-bottom: 1px solid var(--atrial-glass-border) !important; backdrop-filter: blur(20px) saturate(140%) !important; -webkit-backdrop-filter: blur(20px) saturate(140%) !important; color: var(--atrial-text-primary) !important; } .pf-v5-c-masthead__brand, .pf-v5-theme-dark .pf-v5-c-masthead__brand { color: var(--atrial-text-primary) !important; } /* Toolbar (username dropdown, kebab, avatar inside masthead) */ .pf-v5-c-toolbar, .pf-v5-c-toolbar__content, .pf-v5-c-toolbar__content-section, .pf-v5-theme-dark .pf-v5-c-toolbar { background: transparent !important; } .pf-v5-c-menu-toggle, .pf-v5-c-menu-toggle__text, .pf-v5-c-button.pf-m-plain, .pf-v5-theme-dark .pf-v5-c-menu-toggle { color: var(--atrial-text-primary) !important; background: transparent !important; } /* ── Sidebar + nav ───────────────────────────────────────────────────── */ .pf-v5-c-page__sidebar, .pf-v5-c-page__sidebar-body, .pf-v5-c-nav, .pf-v5-theme-dark .pf-v5-c-page__sidebar, .pf-v5-theme-dark .pf-v5-c-nav { background: rgba(4, 17, 34, 0.4) !important; border-right: 1px solid var(--atrial-glass-border) !important; color: var(--atrial-text-primary) !important; } .pf-v5-c-nav__link, .pf-v5-theme-dark .pf-v5-c-nav__link { color: var(--atrial-text-secondary) !important; } .pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link[aria-current="page"], .pf-v5-theme-dark .pf-v5-c-nav__link.pf-m-current { color: var(--atrial-text-primary) !important; background: rgba(11, 0, 207, 0.10) !important; border-left: 3px solid var(--atrial-accent) !important; } .pf-v5-c-nav__subnav { background: transparent !important; } /* ── Page main area + sections — the v3 "card" pattern ───────────────── */ /* Higher-specificity selectors with `html` and `section` element prefixes * so we beat any `.pf-v5-theme-dark .pf-v5-c-foo.pf-m-bar` rule PF5 ships, * AND we set the component-scoped CSS variable inline on the element so * PF5's internal "background-color: var(--component-bg)" pattern resolves * to transparent regardless of which side of the cascade it lives on. */ html section.pf-v5-c-page__main-section, html section.pf-v5-c-page__main-section.pf-m-light, html.pf-v5-theme-dark section.pf-v5-c-page__main-section, html.pf-v5-theme-dark section.pf-v5-c-page__main-section.pf-m-light, .pf-v5-c-page__main { background: transparent !important; background-color: transparent !important; background-image: none !important; color: var(--atrial-text-primary) !important; --pf-v5-c-page__main-section--BackgroundColor: transparent !important; --pf-v5-c-page__main-section--m-light--BackgroundColor: transparent !important; } /* ── Forms — glass card treatment ────────────────────────────────────── */ .pf-v5-c-form, .pf-v5-c-form.pf-m-horizontal, .pf-v5-theme-dark .pf-v5-c-form { background: var(--atrial-glass-fill) !important; border: 1px solid var(--atrial-glass-border) !important; border-radius: var(--atrial-radius-lg) !important; box-shadow: var(--atrial-glass-shadow) !important; padding: 24px !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .pf-v5-c-form .pf-v5-c-form, .pf-v5-theme-dark .pf-v5-c-form .pf-v5-c-form { background: transparent !important; border: none !important; box-shadow: none !important; backdrop-filter: none; padding: 0 !important; } /* ── Titles + body copy ──────────────────────────────────────────────── */ .pf-v5-c-title, [class*="_title_"], .pf-v5-theme-dark .pf-v5-c-title { color: var(--atrial-text-primary) !important; } [data-pf-content="true"], .pf-v5-c-content p, .pf-v5-c-content, .pf-v5-theme-dark .pf-v5-c-content { color: var(--atrial-text-secondary) !important; } /* ── Buttons ─────────────────────────────────────────────────────────── */ .pf-v5-c-button.pf-m-primary, .pf-v5-theme-dark .pf-v5-c-button.pf-m-primary { background: var(--atrial-accent) !important; border-color: var(--atrial-accent) !important; color: #ffffff !important; border-radius: var(--atrial-radius-md) !important; font-weight: 600 !important; } .pf-v5-c-button.pf-m-primary:hover { background: var(--atrial-accent-hover) !important; } .pf-v5-c-button.pf-m-primary:focus { box-shadow: 0 0 0 3px var(--atrial-focus-ring) !important; } .pf-v5-c-button.pf-m-secondary, .pf-v5-theme-dark .pf-v5-c-button.pf-m-secondary { background: transparent !important; border: 1px solid var(--atrial-glass-border) !important; color: var(--atrial-text-primary) !important; border-radius: var(--atrial-radius-md) !important; } .pf-v5-c-button.pf-m-secondary:hover { background: rgba(247, 245, 251, 0.06) !important; } /* ── Form controls — inputs, selects, textareas ──────────────────────── */ .pf-v5-c-form-control, .pf-v5-c-form-control input, .pf-v5-c-form-control select, .pf-v5-c-form-control textarea, .pf-v5-c-form__group input, .pf-v5-c-form__group select, .pf-v5-c-form__group textarea, .pf-v5-theme-dark .pf-v5-c-form-control { background: rgba(4, 17, 34, 0.6) !important; border: 1px solid var(--atrial-glass-border) !important; border-radius: var(--atrial-radius-md) !important; color: var(--atrial-text-primary) !important; } .pf-v5-c-form-control.pf-m-disabled { opacity: 0.7 !important; } .pf-v5-c-form-control.pf-m-disabled input { color: var(--atrial-text-secondary) !important; } .pf-v5-c-form-control:focus, .pf-v5-c-form-control input:focus { border-color: var(--atrial-accent) !important; box-shadow: 0 0 0 3px var(--atrial-focus-ring) !important; outline: none !important; } /* Form labels */ .pf-v5-c-form__label, .pf-v5-c-form__label-text, .pf-v5-theme-dark .pf-v5-c-form__label-text { color: var(--atrial-text-secondary) !important; } /* ── Tables ──────────────────────────────────────────────────────────── */ .pf-v5-c-table, .pf-v5-theme-dark .pf-v5-c-table { background: transparent !important; color: var(--atrial-text-primary) !important; } .pf-v5-c-table thead { background: rgba(247, 245, 251, 0.04) !important; } .pf-v5-c-table tbody tr { border-bottom: 1px solid var(--atrial-glass-border); } /* ── Tabs ────────────────────────────────────────────────────────────── */ .pf-v5-c-tabs__link, .pf-v5-theme-dark .pf-v5-c-tabs__link { color: var(--atrial-text-secondary) !important; } .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link, .pf-v5-theme-dark .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link { color: var(--atrial-accent) !important; border-bottom-color: var(--atrial-accent) !important; } /* ── Jump-links sidebar (Personal Info "Jump to section") ────────────── */ .pf-v5-c-jump-links__link, .pf-v5-theme-dark .pf-v5-c-jump-links__link { color: var(--atrial-text-secondary) !important; } .pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link { color: var(--atrial-accent) !important; } .pf-v5-c-jump-links__label, .pf-v5-c-jump-links__header { color: var(--atrial-text-secondary) !important; } /* ── Alerts ──────────────────────────────────────────────────────────── */ .pf-v5-c-alert, .pf-v5-theme-dark .pf-v5-c-alert { background: var(--atrial-glass-fill) !important; border: 1px solid var(--atrial-glass-border) !important; border-radius: var(--atrial-radius-md) !important; color: var(--atrial-text-primary) !important; } .pf-v5-c-alert.pf-m-danger { border-color: rgba(239, 68, 68, 0.45) !important; } .pf-v5-c-alert.pf-m-warning { border-color: rgba(245, 158, 11, 0.45) !important; } .pf-v5-c-alert.pf-m-success { border-color: rgba(34, 197, 94, 0.45) !important; } .pf-v5-c-alert.pf-m-info { border-color: rgba(11, 0, 207, 0.45) !important; } /* ── Scrollbar — subtle on dark ──────────────────────────────────────── */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: rgba(247, 245, 251, 0.10); border-radius: 6px; } *::-webkit-scrollbar-thumb:hover { background: rgba(247, 245, 251, 0.18); } /* ── Legacy v1 selectors retained as no-ops ──────────────────────────── */ [class*="-c-card"], [class*="-c-panel"] { background: var(--atrial-glass-fill) !important; border: 1px solid var(--atrial-glass-border) !important; border-radius: var(--atrial-radius-lg) !important; box-shadow: var(--atrial-glass-shadow) !important; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); color: var(--atrial-text-primary) !important; }