/* Robto account console — brand layer over the stock keycloak.v3 theme.
 *
 * Same palette and same technique as the login theme, so the two surfaces match:
 * a user who signs in on a Robto-branded page lands on a Robto-branded console
 * instead of crossing a seam into stock Keycloak blue.
 *
 * This file overrides ONLY design tokens plus a handful of PatternFly public
 * component classes (.pf-v5-c-*). It contains no hashed bundle classnames — the
 * account console's CSS ships as main-<hash>.css and that hash changes on every
 * Keycloak build, so anything keyed to it would break silently on upgrade.
 *
 * Why plain :root is enough: PatternFly v5 defines its tokens inside
 * `:where(:root)`, which has specificity 0,0,0. A normal `:root` block beats it
 * unconditionally, independent of load order — and this sheet loads after the
 * bundle anyway (theme.properties explains that).
 */

:root {
  --robto-green: #54af87;
  --robto-green-600: #479a76;
  --robto-green-700: #3a8462;
  /* The raw brand green is only ~2.2:1 on white, under the 4.5:1 WCAG AA floor
     for text. Links use this darker step (~4.6:1) and still read as the same
     colour. Identical reasoning to the login sheet. */
  --robto-link: #2f7a58;
  --robto-link-hover: #24614a;
  --robto-ink: #212421;
  --robto-muted: #606360;

  /* One override, everything downstream follows: buttons, focus rings, links,
     spinners, active nav items and switches all resolve through these. */
  --pf-v5-global--primary-color--100: var(--robto-green);
  --pf-v5-global--primary-color--200: var(--robto-green-700);
  --pf-v5-global--active-color--100: var(--robto-green);
  --pf-v5-global--link--Color: var(--robto-link);
  --pf-v5-global--link--Color--hover: var(--robto-link-hover);
  --pf-v5-global--BorderRadius--sm: 6px;
}

/* ── Masthead ─────────────────────────────────────────────────────────────── */

/* The masthead is wired to a NEUTRAL token (--pf-v5-global--BackgroundColor--dark-100),
   not to the primary colour, so recolouring primary alone leaves it stock grey.
   Scope the component's own token instead of redefining that global: the global
   neutral is shared with dropdowns, tooltips and other dark surfaces, and
   changing it there would repaint all of them.

   Light theme runs a WHITE bar. The logo carries its own near-black wordmark, so
   a dark bar in light mode erased the word entirely — measured on this host, the
   green ring showed and the name did not. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #ffffff;
  border-bottom: 3px solid var(--robto-green);
  box-shadow: 0 1px 3px rgba(33, 36, 33, 0.06);
}

/* The stock brand slot is 35px, set by a HASHED class (._brand_<hash>). Target
   the PatternFly public wrapper instead — same result, but nothing here breaks
   when the bundle is rebuilt and that hash changes.

   52px, not 40: the mark's inner wordmark only becomes legible around this size,
   and the 76px bar still leaves air. 60px reads better but crowds the edges. */
.pf-v5-c-masthead img {
  height: 52px;
  width: auto;
}

/* ── Page ─────────────────────────────────────────────────────────────────── */

/* Softer than stock flat grey, and a quiet echo of the login page's gradient so
   the two surfaces feel continuous. Kept very low-contrast: this is a working
   console, not a landing page, and content has to stay the loudest thing on it. */
.pf-v5-c-page__main,
.pf-v5-c-page {
  background: linear-gradient(178deg, #f7faf8 0%, #eef5f1 100%);
}

.pf-v5-c-card {
  border-radius: 10px;
  border: 1px solid rgba(33, 36, 33, 0.07);
  box-shadow:
    0 1px 2px rgba(33, 36, 33, 0.04),
    0 8px 20px -12px rgba(33, 36, 33, 0.12);
}

/* ── Controls ─────────────────────────────────────────────────────────────── */

.pf-v5-c-button {
  border-radius: var(--pf-v5-global--BorderRadius--sm);
  font-weight: 600;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--robto-green);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--robto-green-600);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--robto-green-600);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--robto-green-700);
}

.pf-v5-c-form-control {
  border-radius: var(--pf-v5-global--BorderRadius--sm);
}

/* :focus-within, not :focus — PatternFly v5 wraps the real <input> in a styled
   container, so the visible border belongs to the wrapper while focus lands on
   the input inside it. */
.pf-v5-c-form-control:focus-within {
  box-shadow: 0 0 0 3px rgba(84, 175, 135, 0.28);
  border-color: var(--robto-green);
}

.pf-v5-c-check__input,
.pf-v5-c-radio__input {
  accent-color: var(--robto-green);
}

/* Selected tab / active nav underline. */
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: var(--robto-green);
}

/* ── Dark mode ────────────────────────────────────────────────────────────── */

/* Everything dark is keyed on the CLASS alone. Keycloak's own script mirrors
   prefers-color-scheme onto that class, so the system default still works — and
   because nothing here reads the media query directly, js/robto-theme-toggle.js
   can override it. A leftover media-query block would quietly win over a manual
   "light" choice on a dark OS and make the toggle look broken. */
.pf-v5-theme-dark,
.pf-v5-theme-dark:root {
  --robto-link: #7fcaa5;
  --robto-link-hover: #9bd8b9;
  --pf-v5-global--link--Color: var(--robto-link);
  --pf-v5-global--link--Color--hover: var(--robto-link-hover);
}

.pf-v5-theme-dark .pf-v5-c-page__main,
.pf-v5-theme-dark .pf-v5-c-page {
  background: linear-gradient(178deg, #101513 0%, #16211c 100%);
}

/* Dark theme: the bar takes the page gradient's own tone, and the brand image is
   swapped for the on-dark variant — same artwork, wordmark recoloured white,
   brush ring left at true brand green.
   `content:` on an <img> is what makes a per-theme swap possible at all: the
   account console renders the logo from theme.properties as a real <img>, and
   that property holds ONE value with no light/dark form. Height above still
   applies to the replaced image. */
.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #16211c;
  box-shadow: none;
}

.pf-v5-theme-dark .pf-v5-c-masthead img {
  content: url("../img/robto-logo-ondark.webp");
}


.pf-v5-theme-dark .pf-v5-c-card {
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.7);
}

/* ── Theme toggle ─────────────────────────────────────────────────────────── */

/* Injected by js/robto-theme-toggle.js. Pinned bottom-right here, not top-right
   as on the login page: the console masthead already puts the user menu in that
   corner and the two would sit on top of each other. */
.robto-theme-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 100;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(33, 36, 33, 0.12);
  background: rgba(255, 255, 255, 0.9);
  color: var(--robto-ink);
  box-shadow: 0 4px 14px -6px rgba(33, 36, 33, 0.3);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.robto-theme-toggle:hover {
  background: #ffffff;
  border-color: var(--robto-green);
}

.robto-theme-toggle:focus-visible {
  outline: 2px solid var(--robto-green);
  outline-offset: 2px;
}

.robto-theme-toggle svg {
  width: 20px;
  height: 20px;
  display: block;
}

.pf-v5-theme-dark .robto-theme-toggle {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(25, 32, 29, 0.92);
  color: #e8edea;
  box-shadow: 0 4px 14px -6px rgba(0, 0, 0, 0.6);
}

.pf-v5-theme-dark .robto-theme-toggle:hover {
  background: #19201d;
  border-color: var(--robto-green);
}