/*
 * Expertiza account console.
 *
 * The page itself is a React application inside Keycloak — its markup is not
 * ours. What this file does is retune PatternFly's own variables so the shell
 * matches the sign-in page and the applications behind it.
 *
 * Only variables and a few targeted rules: anything relying on PatternFly's
 * generated class names (`_brand_1gmge_1` and the like) would break on the next
 * Keycloak upgrade.
 */

:root {
  --ex-bg: hsl(222, 40%, 97%);
  --ex-fg: hsl(222, 25%, 12%);
  --ex-card: hsl(0, 0%, 100%);
  --ex-muted: hsl(222, 12%, 46%);
  --ex-border: hsl(220, 20%, 90%);
  /* One step darker than --ex-bg, so a hovered row is distinguishable from
     the current one rather than matching it. */
  --ex-hover: hsl(222, 30%, 94%);
  --ex-primary: hsl(212, 78%, 42%);
  --ex-primary-hover: hsl(212, 78%, 36%);
  --ex-primary-fg: hsl(0, 0%, 100%);
  --ex-ring: hsl(212, 90%, 55%);
  --ex-danger: hsl(0, 65%, 45%);

  /* PatternFly builds its blues from these; setting them here reaches every
     button, link and accent at once rather than rule by rule. */
  --pf-v5-global--primary-color--100: var(--ex-primary);
  --pf-v5-global--primary-color--200: var(--ex-primary-hover);
  --pf-v5-global--link--Color: var(--ex-primary);
  --pf-v5-global--link--Color--hover: var(--ex-primary-hover);
  --pf-v5-global--active-color--100: var(--ex-primary);
  --pf-v5-global--danger-color--100: var(--ex-danger);

  --pf-v5-global--BackgroundColor--100: var(--ex-card);
  --pf-v5-global--BackgroundColor--200: var(--ex-bg);
  --pf-v5-global--Color--100: var(--ex-fg);
  --pf-v5-global--Color--200: var(--ex-muted);
  --pf-v5-global--BorderColor--100: var(--ex-border);
  --pf-v5-global--BorderRadius--sm: 0.375rem;

  --pf-v5-global--FontFamily--text:
    ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
}

body {
  background: var(--ex-bg);
  color: var(--ex-fg);
  font-family: var(--pf-v5-global--FontFamily--text);
}

/* The bar across the top carries the organisation's mark. Dark on the stock
   theme; here it belongs to the same page as everything under it. */
.pf-v5-c-masthead {
  background: var(--ex-card);
  border-bottom: 1px solid var(--ex-border);
  color: var(--ex-fg);
}

/* The toolbar inside the bar carries its own dark background, which the
   masthead rule does not reach. */
.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__item {
  background: transparent;
  color: var(--ex-fg);
}

/* The account menu: the stock toggle is drawn for a dark bar, so on a light one
   it came out as an empty white box. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle {
  background: transparent;
  border: 1px solid var(--ex-border);
  border-radius: 0.375rem;
  color: var(--ex-fg);
  padding: 0.25rem 0.625rem;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle:hover {
  background: var(--ex-bg);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle-text {
  color: var(--ex-fg);
}

/* The sidebar toggle. PatternFly draws its icon at #f0f0f0 for a dark bar,
   which on this white one left it at a contrast of 1.14 — technically present,
   practically invisible. It is also given a square hit area: the stock 56x48
   is neither square nor optically centred against the mark beside it. */
.pf-v5-c-masthead #nav-toggle,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
  color: var(--ex-muted);
  background: transparent;
  border: 0;
  border-radius: 0.5rem;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}

.pf-v5-c-masthead #nav-toggle svg,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain svg {
  fill: currentColor;
  width: 1.125rem;
  height: 1.125rem;
}

/* Full strength on hover, so the control answers the pointer rather than
   staying the same weight it had at rest. */
.pf-v5-c-masthead #nav-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
  background: var(--ex-hover);
  color: var(--ex-fg);
}

.pf-v5-c-masthead #nav-toggle:focus-visible,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:focus-visible {
  outline: 2px solid var(--ex-ring);
  outline-offset: 2px;
}

.pf-v5-c-masthead img {
  /* The mark is square and finely drawn — it needs a set height or the bar
     stretches it. */
  height: 2.25rem;
  width: auto;
  object-fit: contain;
}

.pf-v5-c-page__sidebar {
  background: var(--ex-card);
  border-right: 1px solid var(--ex-border);
}

/* PatternFly ships this nav for a DARK sidebar: every state — hover, focus,
   active, current — is white text on #3c3f42. On a light sidebar that reads as
   invisible text, so the states are retuned at the variable level rather than
   rule by rule, which also survives a Keycloak upgrade. */
.pf-v5-c-nav,
.pf-v5-c-nav__link,
.pf-v5-c-nav__subnav {
  --pf-v5-c-nav__link--Color: var(--ex-fg);
  --pf-v5-c-nav__link--hover--Color: var(--ex-fg);
  --pf-v5-c-nav__link--focus--Color: var(--ex-fg);
  --pf-v5-c-nav__link--active--Color: var(--ex-fg);
  --pf-v5-c-nav__link--m-current--Color: var(--ex-primary);

  --pf-v5-c-nav__link--hover--BackgroundColor: var(--ex-hover);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--ex-hover);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--ex-hover);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ex-bg);

  /* The chevron on an expandable group is drawn from the same dark palette. */
  --pf-v5-c-nav__toggle--Color: var(--ex-muted);
  --pf-v5-c-nav__item--m-expandable--m-expanded__toggle--Color: var(--ex-fg);
}

.pf-v5-c-nav__link {
  color: var(--ex-fg);
  transition: background-color 0.12s ease, color 0.12s ease;
}

/* An expanded group keeps the sidebar's own ground — stock PatternFly fills it
   with a dark slab that read as a different component sitting in the panel. */
.pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > .pf-v5-c-nav__link,
.pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > .pf-v5-c-nav__link:hover {
  background: transparent;
  color: var(--ex-fg);
  font-weight: 600;
}

.pf-v5-c-nav__item.pf-m-expandable.pf-m-expanded > .pf-v5-c-nav__link:hover {
  background: var(--ex-hover);
}

/* The current page reads as current through weight and a rule, not a filled
   block — the stock treatment was a dark slab against a light sidebar. */
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav__link.pf-m-current {
  background: var(--ex-bg);
  color: var(--ex-primary);
  font-weight: 600;
  box-shadow: inset 2px 0 0 0 var(--ex-primary);
}

/* Hover must never restate the current page's blue rule, or a pointer passing
   over the list makes every row look selected in turn. */
.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link:focus-visible {
  background: var(--ex-hover);
  color: var(--ex-fg);
}

.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link.pf-m-current:hover {
  background: var(--ex-bg);
  color: var(--ex-primary);
}

.pf-v5-c-nav__link:focus-visible {
  outline: 2px solid var(--ex-ring);
  outline-offset: -2px;
}


.pf-v5-c-page__main {
  background: var(--ex-bg);
}

.pf-v5-c-card,
.pf-v5-c-panel {
  background: var(--ex-card);
  border: 1px solid var(--ex-border);
  border-radius: 0.625rem;
  box-shadow: none;
}

.pf-v5-c-button.pf-m-primary {
  background: var(--ex-primary);
  color: var(--ex-primary-fg);
  border-radius: 0.375rem;
}

.pf-v5-c-button.pf-m-primary:hover {
  background: var(--ex-primary-hover);
}

.pf-v5-c-button:focus-visible {
  outline: 2px solid var(--ex-ring);
  outline-offset: 2px;
}

/* A locked field should read as locked rather than as one that failed to load. */
.pf-v5-c-form-control input:disabled,
.pf-v5-c-form-control.pf-m-disabled,
input:disabled {
  background: var(--ex-bg);
  color: var(--ex-muted);
  cursor: not-allowed;
}

/* Personal details are read-only here, so the form cannot save — and the
   locale picker sits inside that same form. Both are hidden rather than left
   as controls that quietly do nothing. The language still follows whatever was
   chosen at sign-in. */
/* PatternFly sets `display: grid` on the group with equal specificity and wins
   on order, so these need !important rather than a longer selector. */
.pf-v5-c-form__group:has([for="attributes.locale"]),
.pf-v5-c-form__group:has([id="attributes.locale"]),
.pf-v5-c-form__actions {
  display: none !important;
}

/* The credential list's "Created" label comes from the React bundle's own JSON
   rather than this theme's messages, so it stays English however the page is
   translated. Hiding the label leaves the date, which is the part that carries
   the information. */
.pf-v5-c-data-list__cell strong.pf-v5-u-mr-md {
  display: none !important;
}

/* The first thing anyone sees. The stock loading container is already a
   centring flex box, but nothing gives it a height — so it centres inside zero
   and the spinner lands in the top-left corner as a speck. */
.keycloak__loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  /* Less than the full viewport: the mark sits slightly above centre, where
     the eye expects it, rather than being pushed down by the text below it. */
  min-height: 60vh;
  text-align: center;
}

/* PatternFly sizes the spinner from its own diameter variable, not from
   width/height — the SVG has no intrinsic size of its own. */
.keycloak__loading-container .pf-v5-c-spinner {
  --pf-v5-c-spinner--diameter: 2.75rem;
  --pf-v5-c-spinner--Color: var(--ex-primary);
  --pf-v5-c-spinner--stroke-width: 8;
  flex: none;
  color: var(--ex-primary);
}

/* The stock dash cycle thins the arc to almost nothing twice a second, which
   reads as a page that has stalled rather than one that is working. A fixed
   arc that simply rotates says the same thing more calmly. */
.keycloak__loading-container .pf-v5-c-spinner__path {
  stroke: var(--ex-primary);
  stroke-linecap: round;
  stroke-dasharray: 180 100;
  stroke-dashoffset: 0;
  animation: none;
}

#loading-text {
  color: var(--ex-muted);
  font-size: 0.875rem;
  margin: 0;
}

/* Nothing has painted yet at this point, so the ground has to come from here
   or the wait happens on the browser's default white. */
#app:has(.keycloak__loading-container),
body:has(.keycloak__loading-container),
html:has(.keycloak__loading-container) {
  background: var(--ex-bg);
}

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

  /* The spinner is the exception: frozen, it is not a calmer spinner but a
     page that looks broken. It keeps turning, more slowly. */
  .keycloak__loading-container .pf-v5-c-spinner {
    animation: pf-v5-c-spinner-animation-rotate 2.4s linear infinite !important;
  }
}