/* ═══════════════════════════════════════════════════
   SaaS Stack Keycloak account console theme

   The console is a compiled PatternFly 5 application. It is not restyled
   here rule by rule — that would break on every PatternFly bump. Instead it
   is repainted through the design tokens the whole application already reads:
   PatternFly's own `--pf-v5-global--*` custom properties, and specifically
   the values its dark palette assigns.

   The token block below is declared on BOTH `:root` and
   `html.pf-v5-theme-dark`, and that is not belt and braces. PatternFly
   declares its own values under `:where(:root)` and
   `:where(.pf-v5-theme-dark)`, which have zero specificity, so `:root` alone
   already wins — and it wins BEFORE any script has run, which is what stops
   the page flashing white on its way in. The dark class is then added by
   `saas-stack-account.js` for the sake of the component rules PatternFly gates
   on it, and finds the palette already correct.

   Nothing here is `!important`. Every rule either wins on specificity or on
   being loaded after the application's own stylesheet, which the parent's
   index.ftl guarantees.

   The colours are the ones already in use elsewhere in the stack: #1b1f22 is
   the login screen's and the account selector's ground, #16191c and #2a2e33
   are the admin portal's chrome and rules. A user moving between the hub and
   this page should not be able to tell they changed application.
   ═══════════════════════════════════════════════════ */

/* Self-hosted Source Sans 3 (successor to Source Sans Pro) — GDPR compliant,
   and the same faces the login theme serves. Only the upright weights are
   carried: the console sets no italics. */
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/SourceSans3-Regular-LatinExt.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Source Sans Pro";
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("../fonts/SourceSans3-Regular.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Brand custom properties ─────────────────────────
   Defaults only. `saas-stack-account.js` overwrites --brand-* from the realm's
   stored theme, so an operator who has set primaryColor / secondaryColor /
   backgroundColor through the auth-gateway's theme API gets them here too,
   exactly as they get them on the login page. */
:root {
  --brand-bg: #1b1f22;
  --brand-primary: #ffffff;
  --brand-secondary: #818cf8;

  --saas-stack-surface: #22262a;
  --saas-stack-surface-raised: #2a2e33;
  --saas-stack-chrome: #16191c;
  --saas-stack-rule: #2a2e33;
  --saas-stack-rule-strong: #3a3f44;
  --saas-stack-text: #ffffff;
  --saas-stack-text-muted: #9ca3af;
}

/* ── The palette ─────────────────────────────────────
   Every token PatternFly's dark theme defines that carries a colour a user
   can see. Anything not listed keeps PatternFly's dark value, which is
   already a dark value — this repaints, it does not re-derive. */
:root,
html.pf-v5-theme-dark {
  /* Surfaces */
  --pf-v5-global--BackgroundColor--100: var(--saas-stack-surface);
  --pf-v5-global--BackgroundColor--150: var(--saas-stack-surface-raised);
  --pf-v5-global--BackgroundColor--200: var(--brand-bg);
  --pf-v5-global--BackgroundColor--300: var(--saas-stack-surface-raised);
  --pf-v5-global--BackgroundColor--400: var(--saas-stack-rule-strong);
  --pf-v5-global--BackgroundColor--light-100: var(--saas-stack-surface);
  --pf-v5-global--BackgroundColor--light-200: var(--brand-bg);
  --pf-v5-global--BackgroundColor--light-300: var(--brand-bg);
  --pf-v5-global--BackgroundColor--dark-100: var(--saas-stack-chrome);
  --pf-v5-global--BackgroundColor--dark-200: var(--brand-bg);
  --pf-v5-global--BackgroundColor--dark-300: var(--saas-stack-chrome);
  --pf-v5-global--BackgroundColor--dark-400: var(--saas-stack-rule-strong);

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

  /* Rules and borders */
  --pf-v5-global--BorderColor--100: var(--saas-stack-rule);
  --pf-v5-global--BorderColor--200: var(--saas-stack-rule);
  --pf-v5-global--BorderColor--300: var(--saas-stack-rule-strong);
  --pf-v5-global--BorderColor--dark-100: var(--saas-stack-rule);
  --pf-v5-global--BorderColor--light-100: var(--saas-stack-rule);

  /* Accent — the one colour that is not greyscale. Every primary button,
     every link, every focus ring and the active nav item come from these. */
  --pf-v5-global--primary-color--100: var(--brand-secondary);
  --pf-v5-global--primary-color--light-100: var(--brand-secondary);
  --pf-v5-global--primary-color--dark-100: var(--brand-secondary);
  --pf-v5-global--active-color--100: var(--brand-secondary);
  --pf-v5-global--link--Color: var(--brand-secondary);
  --pf-v5-global--link--Color--light: var(--brand-secondary);
  --pf-v5-global--link--Color--dark: var(--brand-secondary);
  --pf-v5-global--link--Color--hover: var(--brand-primary);
  --pf-v5-global--link--Color--light--hover: var(--brand-primary);
  --pf-v5-global--link--Color--dark--hover: var(--brand-primary);
  --pf-v5-global--link--Color--visited: var(--brand-secondary);

  /* Icons */
  --pf-v5-global--icon--Color--dark: var(--saas-stack-text);
  --pf-v5-global--icon--Color--light: var(--saas-stack-text-muted);

  /* Type. PatternFly ships Red Hat Text; the rest of the stack is
     Source Sans Pro, and a font change is the first thing a user notices. */
  --pf-v5-global--FontFamily--text: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --pf-v5-global--FontFamily--heading: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --pf-v5-global--FontFamily--redhatfont--text: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --pf-v5-global--FontFamily--redhatfont--heading: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --pf-v5-global--FontFamily--redhatVF--text: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  --pf-v5-global--FontFamily--redhatVF--heading: "Source Sans Pro", system-ui, -apple-system, sans-serif;
}

/* ── The page ground and its texture ─────────────────
   The same overlay the login screen and the account selector carry. It is
   applied to the page body rather than to <body>, because the console's
   masthead and sidebar sit on their own solid colours above it. */
body,
.pf-v5-c-page {
  background-color: var(--brand-bg);
  font-family: "Source Sans Pro", system-ui, -apple-system, sans-serif;
  font-weight: 300;
  color: var(--saas-stack-text);
}

.pf-v5-c-page__main {
  position: relative;
  background-color: var(--brand-bg);
}

.pf-v5-c-page__main::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: linear-gradient(to top, rgba(19, 21, 25, 0.55), rgba(19, 21, 25, 0.55)),
    url("../img/overlay.png");
  background-size: auto, 256px 256px;
  background-repeat: no-repeat, repeat;
  pointer-events: none;
  z-index: 0;
}

.pf-v5-c-page__main-section {
  position: relative;
  z-index: 1;
  background-color: transparent;
}

/* The loading screen the parent's index.ftl paints inline before React
   mounts. Without this the first frame of every visit is white. */
.keycloak__loading-container {
  background-color: #1b1f22 !important;
  color: #ffffff !important;
}

/* ── Chrome ──────────────────────────────────────────
   Masthead and sidebar match the admin portal's nav bar, which is the page a
   user reaches this one from. */
.pf-v5-c-masthead,
.pf-v5-c-page__header,
.pf-v5-c-page__sidebar {
  background-color: var(--saas-stack-chrome);
  border-bottom: 0;
}

.pf-v5-c-masthead {
  border-bottom: 1px solid var(--saas-stack-rule);
}

.pf-v5-c-page__sidebar {
  border-right: 1px solid var(--saas-stack-rule);
}

/* The masthead's toolbar carries a background of its own — PatternFly derives
   it from a token that is not part of the dark palette, so it comes out
   near-black and paints a strip across an otherwise even bar. It sits on the
   masthead and has nothing of its own to say, so it is simply cleared. */
.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 {
  background-color: transparent;
}

/* The masthead logo, given the login screen's bordered circle so the two
   pages are recognisably the same product. */
.pf-v5-c-brand,
.pf-v5-c-masthead__brand img {
  width: 2.5rem;
  height: 2.5rem;
  max-height: 2.5rem;
  border: solid 1px var(--brand-primary);
  border-radius: 100%;
  padding: 0.45rem;
  box-sizing: border-box;
  object-fit: contain;
}

/* ── Cards, lists and forms ──────────────────────────
   Flat surfaces with a single hairline rule, as everywhere else in the
   stack; PatternFly's default is a drop shadow, which reads as a different
   design language. */
.pf-v5-c-card,
.pf-v5-c-panel {
  background-color: var(--saas-stack-surface);
  border: 1px solid var(--saas-stack-rule);
  border-radius: 8px;
  box-shadow: none;
}

.pf-v5-c-data-list__item {
  background-color: var(--saas-stack-surface);
  border-block-end-color: var(--saas-stack-rule);
}

.pf-v5-c-form-control,
.pf-v5-c-form-control input,
.pf-v5-c-form-control select,
.pf-v5-c-form-control textarea {
  background-color: rgba(255, 255, 255, 0.04);
  color: var(--saas-stack-text);
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--BorderColor: var(--saas-stack-rule-strong);
  --pf-v5-c-form-control--BackgroundColor: rgba(255, 255, 255, 0.04);
  --pf-v5-c-form-control--hover--BorderBottomColor: var(--brand-primary);
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--brand-secondary);
  border-radius: 4px;
}

/* Primary buttons take the accent; the text on them has to stay readable
   against whatever colour the operator chose, so it is pinned to the ground
   colour rather than left to PatternFly's white. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--brand-secondary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--brand-primary);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--brand-primary);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--brand-primary);
  --pf-v5-c-button--m-primary--Color: var(--brand-bg);
  --pf-v5-c-button--m-primary--hover--Color: var(--brand-bg);
  --pf-v5-c-button--m-primary--focus--Color: var(--brand-bg);
  --pf-v5-c-button--m-primary--active--Color: var(--brand-bg);
}

.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--Color: var(--brand-primary);
  --pf-v5-c-button--m-secondary--BorderColor: var(--brand-primary);
}

/* Deleting your account is not an ordinary action and must not look like
   one. PatternFly's danger red is kept — it is the one place in this theme
   where a colour carries meaning rather than identity. */
.pf-v5-c-button.pf-m-danger {
  --pf-v5-c-button--m-danger--BackgroundColor: #c9190b;
  --pf-v5-c-button--m-danger--Color: #ffffff;
}

/* ── The marker the branding test looks for ──────────
   A single custom property that only this theme sets. An end-to-end test can
   read it off the live page and know it is looking at the stack's theme and
   not at stock PatternFly, without having to assert on a colour that a
   redesign is allowed to change. */
:root {
  --saas-stack-account-theme: "saas-stack";
}