/* Virtual Minds Hub account console — overrides on top of keycloak.v3
 * (the React console, PatternFly 5).
 *
 * Same discipline as the login theme: no forked .ftl, no forked component. The
 * console is a compiled React bundle whose internal class names are content
 * hashes (`_brand_1gmge_1`), so every selector here is either a PatternFly
 * component class — stable across PF5 — or a PatternFly design token. Anything
 * that stops matching on an upgrade degrades to PatternFly's own dark theme,
 * which is a plain page rather than a broken one.
 *
 * The palette is the login page's, which is the app's own: a customer walks
 * vemylo.com -> sign-in -> account console without the ground changing colour.
 * ------------------------------------------------------------------------- */

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

/* ---------------------------------------------------------------------------
 * Tokens.
 *
 * PatternFly's dark set lives behind `:where(.pf-v5-theme-dark)` — specificity
 * ZERO — so a plain `:root` block outranks all 87 of its variables without a
 * single !important. That is deliberate on PatternFly's part and it is what
 * makes this file short.
 *
 * Two layers on purpose:
 *   --vmh-*  is the brand, and is what the rules below read.
 *   --pf-*   is re-pointed at the brand so every component this file never
 *            names — tables, labels, switches, popovers — follows along.
 * ------------------------------------------------------------------------ */
:root {
  --vmh-ground: #191430;
  --vmh-ground-deep: #120e24;
  --vmh-surface: rgba(255, 255, 255, 0.045);
  --vmh-surface-2: rgba(255, 255, 255, 0.035);
  --vmh-border: rgba(255, 255, 255, 0.1);
  --vmh-border-strong: rgba(255, 255, 255, 0.16);
  --vmh-text: #ede9fb;
  --vmh-muted: #a99fd0;
  --vmh-accent: #6d5ff6;
  --vmh-accent-hi: #8577ff;
  --vmh-warm: #ff6b85;
  --vmh-radius: 13px;

  /* Opaque cousins of the translucent surfaces above. PatternFly stacks
     surfaces (a card inside a section inside a page), and translucency
     compounds at each level until the innermost is milk. These stay solid. */
  --vmh-solid-1: #1e1839;
  --vmh-solid-2: #241d45;
  --vmh-solid-3: #2b2454;
  --vmh-line: #342c5e;
  --vmh-line-strong: #443a75;

  /* Surfaces */
  --pf-v5-global--BackgroundColor--100: var(--vmh-solid-1);
  --pf-v5-global--BackgroundColor--150: var(--vmh-solid-2);
  --pf-v5-global--BackgroundColor--200: var(--vmh-ground-deep);
  --pf-v5-global--BackgroundColor--300: var(--vmh-solid-3);
  --pf-v5-global--BackgroundColor--400: #322a63;
  --pf-v5-global--BackgroundColor--light-100: var(--vmh-solid-1);
  --pf-v5-global--BackgroundColor--light-200: var(--vmh-ground-deep);
  --pf-v5-global--BackgroundColor--light-300: var(--vmh-solid-3);
  --pf-v5-global--BackgroundColor--dark-100: var(--vmh-solid-1);
  --pf-v5-global--BackgroundColor--dark-200: var(--vmh-ground-deep);
  --pf-v5-global--BackgroundColor--dark-300: var(--vmh-solid-3);
  --pf-v5-global--BackgroundColor--dark-400: #322a63;

  /* Lines */
  --pf-v5-global--BorderColor--100: var(--vmh-line);
  --pf-v5-global--BorderColor--200: var(--vmh-line);
  --pf-v5-global--BorderColor--300: var(--vmh-line-strong);
  --pf-v5-global--BorderColor--dark-100: var(--vmh-line);
  --pf-v5-global--BorderColor--light-100: var(--vmh-line);

  /* Text */
  --pf-v5-global--Color--100: var(--vmh-text);
  --pf-v5-global--Color--200: var(--vmh-muted);
  --pf-v5-global--Color--light-100: var(--vmh-text);
  --pf-v5-global--Color--light-200: var(--vmh-muted);
  --pf-v5-global--Color--dark-100: var(--vmh-text);
  --pf-v5-global--Color--dark-200: var(--vmh-muted);
  --pf-v5-global--icon--Color--light: var(--vmh-muted);
  --pf-v5-global--icon--Color--dark: var(--vmh-text);

  /* Accent. PatternFly's dark theme is blue (#1fa7f8) throughout; every one of
     these has to move or the console ends up two-toned. */
  --pf-v5-global--primary-color--100: var(--vmh-accent-hi);
  --pf-v5-global--primary-color--200: var(--vmh-accent);
  --pf-v5-global--primary-color--light-100: var(--vmh-accent-hi);
  --pf-v5-global--primary-color--dark-100: var(--vmh-accent-hi);
  --pf-v5-global--active-color--100: var(--vmh-accent-hi);
  --pf-v5-global--link--Color: var(--vmh-accent-hi);
  --pf-v5-global--link--Color--hover: #a79bff;
  --pf-v5-global--link--Color--light: var(--vmh-accent-hi);
  --pf-v5-global--link--Color--light--hover: #a79bff;
  --pf-v5-global--link--Color--dark: var(--vmh-accent-hi);
  --pf-v5-global--link--Color--dark--hover: #a79bff;

  /* Status. Danger borrows the palette's warm half, exactly as on the login
     page, so a destructive confirm reads the same in both places. */
  --pf-v5-global--danger-color--100: var(--vmh-warm);
  --pf-v5-global--danger-color--200: #ff8b9f;
  --pf-v5-global--success-color--100: #4ecb8f;

  --pf-v5-global--FontFamily--text: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pf-v5-global--FontFamily--heading: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* index.ftl emits <meta name="color-scheme" content="light dark">, which is
     what makes scrollbars and native <select> popups render light. */
  color-scheme: dark;
}

/* ---------------------------------------------------------------------------
 * Ground.
 *
 * Painted on <html> as well as the page, because the console is a full-height
 * flex app and overscroll on a phone exposes whatever is behind it.
 * ------------------------------------------------------------------------ */
html,
body {
  background-color: var(--vmh-ground);
  color: var(--vmh-text);
  font-family: var(--pf-v5-global--FontFamily--text);
  -webkit-font-smoothing: antialiased;
}

.pf-v5-c-page {
  background-color: transparent;
  background-image:
    radial-gradient(1100px 620px at 50% -10%, rgba(109, 95, 246, 0.24), transparent 62%),
    radial-gradient(900px 560px at 106% 102%, rgba(255, 107, 133, 0.13), transparent 60%),
    linear-gradient(180deg, var(--vmh-ground) 0%, var(--vmh-ground-deep) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* index.ftl hard-codes the pre-React splash to #fff (and #1b1d21 under a dark
   media query) in an inline <style>. This file is linked after it, so an equal
   specificity rule here wins — otherwise the first paint of every visit is a
   full white screen before the bundle boots. */
.keycloak__loading-container {
  background-color: var(--vmh-ground) !important;
  color: var(--vmh-text) !important;
}
#loading-text {
  font-family: var(--pf-v5-global--FontFamily--text);
  color: var(--vmh-muted);
}

/* ---------------------------------------------------------------------------
 * Masthead and the brand lockup.
 *
 * The <img> the console renders carries ONLY a content-hashed CSS-module class
 * (`_brand_1gmge_1`, height: 35px), which would change on any upstream rebuild.
 * `.pf-v5-c-masthead__brand img` is the stable way to reach it.
 *
 * The wordmark is a ::after on the brand link rather than part of the image:
 * text stays crisp at any zoom, follows Inter like the rest of the page, and
 * the asset stays the single square mark that the login page already ships.
 * ------------------------------------------------------------------------ */
.pf-v5-c-masthead {
  background-color: rgba(18, 14, 36, 0.72);
  border-bottom: 1px solid var(--vmh-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding-block: 10px;
}

/* The account menu sits in a TOOLBAR nested inside the masthead, and that
 * toolbar carries a fill of its own — #030303 — set directly on
 * `.pf-v5-c-toolbar` rather than inherited from the masthead. A background on
 * the masthead alone therefore leaves the right two thirds of the bar pure
 * black (and, on a phone, a black block below the logo where it wraps). The
 * two-class selector is what it takes to outrank the component's own rule. */
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
  --pf-v5-c-toolbar--BackgroundColor: transparent;
  background-color: transparent;
}

.pf-v5-c-masthead__brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}

.pf-v5-c-masthead__brand img {
  height: 34px;
  width: auto;
  filter: drop-shadow(0 4px 12px rgba(255, 0, 128, 0.3));
}

.pf-v5-c-masthead__brand::after {
  content: 'Vem-Portal';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vmh-text);
  white-space: nowrap;
}

/* Phone.
 *
 * The wordmark is the one thing in the bar that repeats what the tab title
 * already says, so it is what gives way.
 *
 * PatternFly's small-screen masthead is a STACK: the brand takes a full-width
 * row of its own and the account menu drops to a second row beneath it, where
 * the kebab ends up stranded mid-bar. Re-point the stack variant at the values
 * PatternFly already defines for the inline one and the header is a single row
 * again — no new layout of ours, just the other one it already ships. */
@media (max-width: 600px) {
  .pf-v5-c-masthead__brand::after {
    display: none;
  }
  .pf-v5-c-masthead {
    --pf-v5-c-masthead--m-display-stack--GridTemplateColumns: var(
      --pf-v5-c-masthead--m-display-inline--GridTemplateColumns
    );
    --pf-v5-c-masthead--m-display-stack__main--GridColumn: 2;
    --pf-v5-c-masthead--m-display-stack__main--Order: 0;
    --pf-v5-c-masthead--m-display-stack__main--FlexBasis: auto;
    --pf-v5-c-masthead--m-display-stack__main--before--BorderBottom: 0;
    --pf-v5-c-masthead--m-display-stack__content--GridColumn: 3;
    --pf-v5-c-masthead--m-display-stack__content--Order: 0;
  }
  /* With the header on one row the kebab keeps PatternFly's `align-left` and
     ends up stranded mid-bar. The cause is that THREE toolbar items each carry
     `margin-left: auto`, so the free space is split three ways instead of
     collecting in front of them — moving one item alone changes almost nothing.
     Collapse the others and let the kebab take the whole gap, so it and the
     avatar sit together where they belong.

     Scoped to the phone: at md and up the kebab is hidden and the full account
     menu takes its place, and that layout is already right. */
  .pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-align-right {
    margin-left: 0;
  }
  .pf-v5-c-masthead .pf-v5-c-toolbar__item.pf-m-align-left {
    margin-left: auto;
    margin-right: 12px;
  }
}

/* The default avatar is a near-white disc — the brightest thing on the page by
   some margin, and it is a placeholder, not a control. */
.pf-v5-c-avatar {
  border: 1px solid var(--vmh-border);
  filter: brightness(0.86) saturate(0.9);
}

/* Menu toggles — the account menu at the far right AND the locale picker in the
 * Personal info form, which is a MenuToggle rather than a <select> and so is
 * missed entirely by the .pf-v5-c-form-control rules further down. PatternFly's
 * dark theme fills it from BackgroundColor--300, which this file re-points at
 * the brand violet, so leaving it alone painted the field as a solid violet
 * slab in the middle of a column of dark ones. One rule covers both. */
.pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: var(--vmh-surface-2);
  border: 1px solid var(--vmh-border);
  border-radius: 11px;
  color: var(--vmh-text);
  min-height: 46px;
  padding-inline: 12px;
  transition:
    border-color 0.15s ease,
    background-color 0.15s ease;
}
.pf-v5-c-menu-toggle:hover {
  border-color: var(--vmh-border-strong);
  --pf-v5-c-menu-toggle--BackgroundColor: rgba(255, 255, 255, 0.06);
}
/* PatternFly draws the toggle's own outline through these; the border above is
   the whole control now, so they read as a second one. */
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
  border: none !important;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
  font-weight: 600;
  min-height: 40px;
}

.pf-v5-c-menu,
.pf-v5-c-dropdown__menu {
  background: var(--vmh-solid-2);
  border: 1px solid var(--vmh-border);
  border-radius: var(--vmh-radius);
  box-shadow: 0 24px 60px rgba(8, 5, 20, 0.6);
  overflow: hidden;
}
.pf-v5-c-menu__item,
.pf-v5-c-dropdown__menu-item {
  background: transparent;
  color: var(--vmh-text);
}
.pf-v5-c-menu__item:hover,
.pf-v5-c-dropdown__menu-item:hover {
  background: rgba(109, 95, 246, 0.16);
  color: var(--vmh-text);
}

/* ---------------------------------------------------------------------------
 * Sidebar navigation.
 *
 * The active item becomes a filled pill in the brand violet. PatternFly marks
 * it with a 3px left rule instead, which on this ground is nearly invisible.
 * ------------------------------------------------------------------------ */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v5-c-nav {
  background-color: transparent;
}

.pf-v5-c-page__sidebar {
  border-right: 1px solid var(--vmh-border);
  box-shadow: none;
}

.pf-v5-c-nav__list {
  padding: 10px 10px 0;
}

.pf-v5-c-nav__link {
  border-radius: 10px;
  color: var(--vmh-muted);
  font-size: 14px;
  font-weight: 500;
  padding: 10px 14px;
  transition:
    color 0.15s ease,
    background-color 0.15s ease;
}
.pf-v5-c-nav__link:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: var(--vmh-text);
}

/* PatternFly's own current-page rule paints a ::before bar; drop it and let the
   fill carry the state. */
.pf-v5-c-nav__link::before,
.pf-v5-c-nav__link::after {
  border: none !important;
  display: none;
}

.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current='page'] {
  background-color: color-mix(in srgb, var(--vmh-accent) 26%, transparent);
  color: var(--vmh-text);
  font-weight: 600;
}

/* ---------------------------------------------------------------------------
 * Content: sections, cards, headings.
 *
 * One lifted surface per section, matching the sign-in card — border, radius
 * and a soft shadow, nothing else competing.
 * ------------------------------------------------------------------------ */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section {
  background-color: transparent;
}

.pf-v5-c-page__main-section {
  padding-inline: clamp(20px, 4vw, 40px);
}

.pf-v5-c-card,
.pf-v5-c-panel {
  background: var(--vmh-surface);
  border: 1px solid var(--vmh-border);
  border-radius: 20px;
  box-shadow:
    0 22px 56px rgba(8, 5, 20, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.pf-v5-c-title,
h1,
h2,
h3 {
  color: var(--vmh-text);
  letter-spacing: -0.02em;
  font-weight: 700;
  text-wrap: balance;
}

.pf-v5-c-content p,
.pf-v5-c-content small,
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item-text,
.pf-v5-c-description-list__term {
  color: var(--vmh-muted);
}

/* The "Jump to section" rail. */
.pf-v5-c-jump-links__link {
  color: var(--vmh-muted);
  border-radius: 8px;
  font-size: 13.5px;
}
.pf-v5-c-jump-links__link:hover {
  color: var(--vmh-text);
}
.pf-v5-c-jump-links__link.pf-m-current,
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link {
  color: var(--vmh-text);
  font-weight: 600;
}
/* The rail's rule and its current-item marker are drawn by ::before elements
 * that PatternFly positions `inset: 0` — the full size of the list — and tints
 * with a BORDER, not a fill. A background-color on them therefore does not
 * draw a 2px line; it drops an opaque slab over the whole rail. Move both to
 * the tokens PatternFly exposes for exactly this. */
.pf-v5-c-jump-links {
  --pf-v5-c-jump-links__list--before--BorderColor: var(--vmh-border);
  --pf-v5-c-jump-links__item--m-current__link--before--BorderColor: var(--vmh-accent-hi);
  --pf-v5-c-jump-links__item--m-current__link-text--Color: var(--vmh-text);
  --pf-v5-c-jump-links__link-text--Color: var(--vmh-muted);
  --pf-v5-c-jump-links__link--hover__link-text--Color: var(--vmh-text);
}

/* ---------------------------------------------------------------------------
 * Fields.
 *
 * Identical treatment to the login page. Same trap too: the markup is
 *     <span class="pf-v5-c-form-control"><input …></span>
 * — a wrapper around a class-less input. Style exactly one of the two, or every
 * field grows a second border inside its first.
 * ------------------------------------------------------------------------ */
.pf-v5-c-form__label-text {
  font-size: 13px;
  font-weight: 500;
  color: var(--vmh-muted);
}

.pf-v5-c-form-control {
  background: var(--vmh-surface-2);
  border: 1px solid var(--vmh-border);
  border-radius: var(--vmh-radius);
  color: var(--vmh-text);
  min-height: 46px;
  display: flex;
  align-items: center;
  padding-inline: 14px;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease;
}
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border: none !important;
  display: none;
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea {
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  color: inherit;
  width: 100%;
  padding: 0;
  font-size: 14.5px;
  font-family: inherit;
}
.pf-v5-c-form-control:hover {
  border-color: var(--vmh-border-strong);
}
.pf-v5-c-form-control:focus-within {
  border-color: var(--vmh-accent);
  background: rgba(255, 255, 255, 0.055);
  box-shadow: 0 0 0 3px rgba(109, 95, 246, 0.22);
}

/* A readonly field (username, when the realm does not allow editing it) must
   look inert rather than merely unfocused, or people type into it and wonder
   why nothing happens. */
.pf-v5-c-form-control.pf-m-disabled,
.pf-v5-c-form-control > input:read-only {
  color: var(--vmh-muted);
  cursor: not-allowed;
}

/* Chrome repaints autofilled inputs near-white — invisible text on this ground.
   The inset shadow is the only reliable repaint. */
.pf-v5-c-form-control > input:-webkit-autofill,
.pf-v5-c-form-control > input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--vmh-text);
  -webkit-box-shadow: 0 0 0 1000px var(--vmh-solid-2) inset;
  caret-color: var(--vmh-text);
}

.pf-v5-c-form-control > select option {
  background: var(--vmh-solid-2);
  color: var(--vmh-text);
}

/* ---------------------------------------------------------------------------
 * Buttons.
 * ------------------------------------------------------------------------ */
.pf-v5-c-button {
  border-radius: 11px;
  font-weight: 600;
}

.pf-v5-c-button.pf-m-primary {
  background: linear-gradient(180deg, var(--vmh-accent-hi) 0%, var(--vmh-accent) 100%);
  border: none;
  color: #ffffff;
  box-shadow: 0 8px 22px rgba(109, 95, 246, 0.34);
  transition:
    filter 0.15s ease,
    transform 0.15s ease;
}
.pf-v5-c-button.pf-m-primary:hover {
  filter: brightness(1.07);
}
.pf-v5-c-button.pf-m-primary:active {
  transform: scale(0.985);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
  background: var(--vmh-surface-2);
  border: 1px solid var(--vmh-border);
  color: var(--vmh-text);
}
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-tertiary:hover {
  border-color: color-mix(in srgb, var(--vmh-accent) 55%, var(--vmh-border));
  background: rgba(109, 95, 246, 0.1);
}

.pf-v5-c-button.pf-m-link {
  color: var(--vmh-accent-hi);
}
.pf-v5-c-button.pf-m-link:hover {
  color: #a79bff;
}

.pf-v5-c-button.pf-m-danger {
  background: var(--vmh-warm);
  border: none;
  color: #2a0713;
}

/* ---------------------------------------------------------------------------
 * Lists, tabs, alerts, labels — the parts of the console that are not the
 * Personal info form: linked accounts, devices, applications, groups.
 * ------------------------------------------------------------------------ */
.pf-v5-c-data-list,
.pf-v5-c-table {
  border: 1px solid var(--vmh-border);
  border-radius: 16px;
  overflow: hidden;
  background: var(--vmh-surface);
}
.pf-v5-c-data-list__item,
.pf-v5-c-table tbody tr,
.pf-v5-c-table thead tr {
  background: transparent;
  border-color: var(--vmh-border);
  color: var(--vmh-text);
}
.pf-v5-c-data-list__item:hover,
.pf-v5-c-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03);
}
.pf-v5-c-table thead th {
  color: var(--vmh-muted);
  font-weight: 600;
}

.pf-v5-c-tabs__link {
  color: var(--vmh-muted);
  font-weight: 500;
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  color: var(--vmh-text);
  font-weight: 600;
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  background-color: var(--vmh-accent-hi);
}

.pf-v5-c-alert {
  border-radius: var(--vmh-radius);
  background: var(--vmh-surface);
  border: 1px solid var(--vmh-border);
}
.pf-v5-c-alert.pf-m-danger {
  background: rgba(255, 107, 133, 0.1);
  border-color: rgba(255, 107, 133, 0.28);
}
.pf-v5-c-alert.pf-m-success {
  background: rgba(78, 203, 143, 0.1);
  border-color: rgba(78, 203, 143, 0.28);
}

.pf-v5-c-label {
  border-radius: 999px;
}

.pf-v5-c-divider,
hr {
  border-color: var(--vmh-border);
}

/* ---------------------------------------------------------------------------
 * Accessibility and motion.
 * ------------------------------------------------------------------------ */
:focus-visible {
  outline: 2px solid var(--vmh-accent-hi);
  outline-offset: 2px;
}

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