/* ============================================================================
 * Aquera admin-console reskin — LOOK & FEEL ONLY.
 *
 * This restyles Keycloak's built-in (React + PatternFly) admin console with
 * Aquera / Nile branding. It does NOT change behaviour and does NOT use Nile
 * web components — it re-tints PatternFly via its own component tokens.
 *
 * Keycloak admin can render either `pf-v5-*` or older `pf-c-*` class names
 * depending on the deployed console bundle. Keep the critical shell selectors
 * paired so production does not fall back to stock Keycloak chrome.
 *
 * Scoping rule of thumb: override COMPONENT tokens (e.g.
 * `--pf-v5-c-button--m-primary--BackgroundColor`) or element `background-color`,
 * never GLOBAL tokens (e.g. `--pf-v5-global--BackgroundColor--100`) — a global
 * override cascades to every descendant that derives its surface from it and
 * silently re-tints unrelated components.
 *
 * Brand palette (from the login theme's Nile tokens):
 *   primary        #155EEF  (Nile bluedark-600 — matches the login button)
 *   primary-hover  #004EEB
 *   primary-active #0040C1
 *   brand-navy     #215690  (Aquera wordmark blue — masthead)
 * ==========================================================================*/

/* Inter — matches the login theme, which loads the same faces from
 * assets.aquera.io (via its vendored nxtgen.css). Without these @font-face
 * rules the admin console silently falls back to system fonts. */
@font-face {
  font-family: "Inter";
  src: url("https://assets.aquera.io/font/Inter-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("https://assets.aquera.io/font/Inter-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("https://assets.aquera.io/font/Inter-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("https://assets.aquera.io/font/Inter-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --aq-primary: #155EEF;
  --aq-primary-hover: #004EEB;
  --aq-primary-active: #0040C1;
  --aq-navy: #215690;
  --aq-font: "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --aq-radius: 8px;
  --aq-radius-sm: 6px;
  --aq-page-bg: #FAFAFA;    /* ng graylightmode-50  — page canvas */
  --aq-surface: #FFFFFF;
  --aq-border: #E9EAEB;     /* ng graylightmode-200 — soft borders */
  --aq-border-strong: #D5D7DA;
  --aq-table-head: #F0F1F2; /* distinct from both canvas and white rows */
  --aq-text: #181D27;
  --aq-text-muted: #535862;
  --aq-text-subtle: #717680;
  --aq-focus-ring: rgba(21, 94, 239, 0.22);

  --aq-nav-text: #414651;   /* ng graylightmode-700 */
  --aq-nav-muted: #717680;  /* ng graylightmode-500 — section titles */
  --aq-nav-strong: #181D27; /* ng graylightmode-900 — realm selector */
  --aq-nav-hover-bg: #F5F5F5;
  --aq-nav-active-bg: #dbe7ff;

  /* Brand-tint the accent-driven GLOBAL tokens only (colour, not surface). */
  --pf-v5-global--primary-color--100: var(--aq-primary);
  --pf-v5-global--primary-color--200: var(--aq-primary-active);
  --pf-v5-global--active-color--100: var(--aq-primary);
  --pf-v5-global--active-color--200: var(--aq-primary-active);
  --pf-v5-global--link--Color: var(--aq-primary);
  --pf-v5-global--link--Color--hover: var(--aq-primary-hover);
  --pf-v5-global--FontFamily--sans-serif: var(--aq-font);
  --pf-v5-global--FontFamily--text: var(--aq-font);
  --pf-v5-global--FontFamily--heading--sans-serif: var(--aq-font);
}

/* Global font, in case the token indirection isn't picked up everywhere. */
body,
.pf-v5-c-page,
.pf-c-page {
  font-family: var(--aq-font);
  color: var(--aq-text);
}

/* PatternFly's base stylesheet sets RedHatDisplay directly on bare heading
 * tags (h1-h6), which beats our inherited body font since explicit rules on
 * the element itself always win over inheritance. Page titles otherwise
 * render in RedHatDisplay instead of Inter. */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--aq-font) !important;
}

/* ----------------------------------------------------------------------------
 * Masthead — solid Aquera navy across the whole bar with a brand-blue edge.
 * The masthead element itself is navy; the toolbar inside it ships its own dark
 * background (rgb(21,21,21)) that we clear so the navy reads edge-to-edge.
 * --------------------------------------------------------------------------*/
.pf-v5-c-masthead,
.pf-c-masthead,
header[class*="c-masthead"] {
  background-color: var(--aq-navy);
  border-bottom: 3px solid var(--aq-primary);
}
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-c-masthead .pf-c-toolbar {
  background-color: transparent;
  --pf-v5-c-toolbar--BackgroundColor: transparent;
}

/* Masthead brand logo sizing (the <img> Keycloak renders from theme.properties
 * `logo`). Constrain so the wordmark reads cleanly at masthead height. */
.pf-v5-c-brand,
.pf-c-brand,
img.keycloak__pageheader_brand,
img[class*="c-brand"] {
  max-height: 30px;
  width: auto;
}

.pf-v5-c-page__main-section,
.pf-c-page__main-section {
  --pf-v5-c-page__main-section--PaddingTop: 24px;
  --pf-v5-c-page__main-section--PaddingRight: 24px;
  --pf-v5-c-page__main-section--PaddingBottom: 24px;
  --pf-v5-c-page__main-section--PaddingLeft: 24px;
}

.pf-v5-c-title,
.pf-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2,
.pf-v5-c-content h3,
.pf-c-content h1,
.pf-c-content h2,
.pf-c-content h3 {
  color: var(--aq-text);
  letter-spacing: 0;
}

.pf-v5-c-content,
.pf-c-content,
.pf-v5-c-description-list,
.pf-c-description-list,
.pf-v5-c-helper-text,
.pf-v5-c-form__helper-text,
.pf-c-form__helper-text {
  color: var(--aq-text-muted);
}

/* ----------------------------------------------------------------------------
 * Primary buttons — the most visible brand touchpoint. Rounded + brand blue.
 * --------------------------------------------------------------------------*/
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: var(--aq-radius);
  border-radius: var(--aq-radius);
}
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--aq-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--aq-primary-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--aq-primary-active);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--aq-primary-hover);
  background-color: var(--aq-primary);
}
.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--aq-primary-hover);
}

/* Secondary / link buttons pick up the brand colour for text + border. */
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--aq-primary);
  --pf-v5-c-button--m-secondary--BorderColor: var(--aq-primary);
  color: var(--aq-primary);
}

.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-plain {
  color: var(--aq-primary);
}

.pf-v5-c-button:focus-visible,
.pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-dropdown__toggle:focus-visible,
.pf-v5-c-nav__link:focus-visible,
.pf-v5-c-tabs__link:focus-visible,
.pf-v5-c-form-control:focus-within {
  outline: 2px solid var(--aq-primary);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px var(--aq-focus-ring);
}

/* Rounded form controls (inputs, selects, search) + focus glow in brand blue. */
.pf-v5-c-form-control,
.pf-v5-c-text-input-group,
.pf-v5-c-text-input-group__text,
.pf-v5-c-menu-toggle,
.pf-v5-c-dropdown__toggle {
  border-radius: var(--aq-radius-sm);
}
.pf-v5-c-form-control,
.pf-v5-c-text-input-group {
  --pf-v5-c-form-control--BorderColor: var(--aq-border-strong);
  border-color: var(--aq-border-strong);
}
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--aq-primary);
  outline-color: var(--aq-primary);
}

/* Content cards — rounded with a soft Nile border + subtle shadow. Scoped to
 * .pf-v5-c-card only: menus/dropdowns/panels already ship their own elevation,
 * so restyling them here would double-shadow every popup in the console. */
.pf-v5-c-card {
  --pf-v5-c-card--BorderRadius: var(--aq-radius);
  border-radius: var(--aq-radius);
  border: 1px solid var(--aq-border);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px rgba(16, 24, 40, 0.06);
}
.pf-v5-c-card__title,
.pf-v5-c-card__body {
  color: var(--aq-text);
}

/* Soft-gray page canvas; cards/tables keep their default white and lift off it.
 * Only the element's own background-color is set — NOT the global surface token
 * — so nested white components are unaffected. */
.pf-v5-c-page__main,
.pf-c-page__main,
.pf-v5-c-page__main-section:not(.pf-m-light),
.pf-c-page__main-section:not(.pf-m-light) {
  background-color: var(--aq-page-bg);
}

/* Enabled/on switches (e.g. the realm "Enabled" toggle) in brand colour. */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  --pf-v5-c-switch--BackgroundColor--checked: var(--aq-primary);
  background-color: var(--aq-primary);
}

/* ----------------------------------------------------------------------------
 * Tabs (e.g. the Realm settings General/Login/Email… row) — active underline.
 * --------------------------------------------------------------------------*/
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
  --pf-v5-c-tabs__link--Color: var(--aq-primary);
  color: var(--aq-primary);
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: var(--aq-primary);
  border-color: var(--aq-primary);
}

/* Table headers: distinct gray so the header row lifts off white body rows. */
.pf-v5-c-table > thead > tr > th,
.pf-c-table > thead > tr > th,
.pf-v5-c-table thead .pf-v5-c-table__th,
.pf-c-table thead .pf-c-table__th {
  background-color: var(--aq-table-head);
  border-bottom: 1px solid var(--aq-border);
  font-weight: 600;
}
.pf-v5-c-table,
.pf-c-table {
  --pf-v5-c-table--BorderColor: var(--aq-border);
}
.pf-v5-c-table tbody tr:hover,
.pf-c-table tbody tr:hover {
  background-color: #F8FAFC;
}

.pf-v5-c-toolbar,
.pf-v5-c-pagination,
.pf-v5-c-data-list,
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-modal-box {
  border-radius: var(--aq-radius);
}

.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-modal-box {
  border: 1px solid var(--aq-border);
  box-shadow: 0 16px 32px rgba(16, 24, 40, 0.14);
}

.pf-v5-c-menu__item.pf-m-selected,
.pf-v5-c-dropdown__menu-item:hover,
.pf-v5-c-menu__item:hover {
  background-color: var(--aq-primary-tint, #EFF4FF);
  color: var(--aq-primary);
}

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

.pf-v5-c-empty-state {
  color: var(--aq-text-muted);
}
.pf-v5-c-empty-state__title,
.pf-v5-c-empty-state .pf-v5-c-title {
  color: var(--aq-text);
}

/* ============================================================================
 * Left nav — Nile light sidebar. Flips Keycloak's dark rail (rgb(33,36,39)) to
 * white, so its nav text/icons (tuned for a dark bg) are re-tuned for light.
 * All active-nav styling lives here (colour + indicator + pill) so the concept
 * is in one place. Everything is scoped to `.pf-v5-c-page__sidebar` so only the
 * rail is affected, not the dark masthead.
 * THIS IS THE MOST UPGRADE-SENSITIVE PART — if a Keycloak bump changes the nav
 * DOM, re-check these rules.
 * ==========================================================================*/
.pf-v5-c-page__sidebar,
.pf-c-page__sidebar,
.pf-v5-c-page__sidebar.keycloak__page_nav__nav,
.pf-c-page__sidebar.keycloak__page_nav__nav {
  --pf-v5-c-page__sidebar--BackgroundColor: #FFFFFF;
  --pf-c-page__sidebar--BackgroundColor: #FFFFFF;
  background-color: #FFFFFF;
  border-right: 1px solid var(--aq-border);
  box-shadow: none;
  width: 264px;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav,
.pf-c-page__sidebar .pf-c-nav {
  padding: 22px 14px;
}

/* Every nav link: rounded + inset so the active pill has a shape to fill. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link,
.pf-c-page__sidebar .pf-c-nav__link {
  min-height: 44px;
  border-radius: 6px;
  margin: 3px 0;
  padding: 10px 14px;
  color: var(--aq-nav-text);
  font-size: 14px;
  font-weight: 500;
  --pf-v5-c-nav__link--Color: var(--aq-nav-text);
  --pf-c-nav__link--Color: var(--aq-nav-text);
}

/* Section titles ("Manage", "Configure") → muted gray. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title,
.pf-c-page__sidebar .pf-c-nav__section-title {
  color: var(--aq-nav-muted);
  --pf-v5-c-nav__section-title--Color: var(--aq-nav-muted);
  --pf-c-nav__section-title--Color: var(--aq-nav-muted);
  padding: 22px 14px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

/* Realm selector at the top of the rail → strong dark text. */
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle,
.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle__text,
.pf-v5-c-page__sidebar .pf-v5-c-dropdown__toggle,
.pf-c-page__sidebar .pf-c-menu-toggle,
.pf-c-page__sidebar .pf-c-menu-toggle__text,
.pf-c-page__sidebar .pf-c-dropdown__toggle {
  color: var(--aq-nav-strong);
}

/* Hover → subtle gray wash, brand-blue text. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover,
.pf-c-page__sidebar .pf-c-nav__link:hover {
  background-color: var(--aq-nav-hover-bg);
  color: var(--aq-primary-active);
  --pf-v5-c-nav__link--hover--Color: var(--aq-primary-active);
  --pf-c-nav__link--hover--Color: var(--aq-primary-active);
  text-decoration: none;
}

/* Active item → brand-blue text on a rounded brand-tinted pill + indicator. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-c-page__sidebar .pf-c-nav__link.pf-m-current {
  background-color: var(--aq-nav-active-bg);
  color: var(--aq-primary);
  font-weight: 600;
  --pf-v5-c-nav__link--m-current--Color: var(--aq-primary);
  --pf-c-nav__link--m-current--Color: var(--aq-primary);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::before,
.pf-c-page__sidebar .pf-c-nav__link.pf-m-current::before {
  --pf-v5-c-nav__link--before--BorderColor: var(--aq-primary);
  --pf-c-nav__link--before--BorderColor: transparent;
  border-inline-start-color: transparent !important;
  border-left-color: transparent !important;
}

/* Branded access-denied/dead-end state. Keycloak can render permission errors
 * outside the full admin shell for routes like Workflows; keep behavior intact
 * and make the state feel like Aquera. */
.pf-v5-c-alert.pf-m-danger,
.pf-v5-c-alert.pf-m-danger .pf-v5-c-alert__title,
[class*="alert"][class*="danger"] {
  border-radius: var(--aq-radius);
}

.pf-v5-c-alert.pf-m-danger {
  border-color: #FDA29B;
  background-color: #FEF3F2;
  color: #B42318;
}

.pf-v5-c-alert.pf-m-success {
  border-color: #ABEFC6;
  background-color: #ECFDF3;
}

.pf-v5-c-alert.pf-m-warning,
.pf-c-alert.pf-m-warning,
[class*="alert"][class*="warning"] {
  --pf-v5-c-alert--m-warning--BackgroundColor: #EFF4FF;
  --pf-c-alert--m-warning--BackgroundColor: #EFF4FF;
  --pf-v5-c-alert--m-warning--BorderColor: #B2CCFF;
  --pf-c-alert--m-warning--BorderColor: #B2CCFF;
  border-color: #B2CCFF !important;
  background-color: #EFF4FF !important;
  color: #0040C1 !important;
}

@media (min-width: 769px) {
  .pf-v5-c-masthead,
  .pf-c-masthead {
    display: none;
  }

  .pf-v5-c-page__sidebar,
  .pf-c-page__sidebar,
  .pf-v5-c-page__sidebar.keycloak__page_nav__nav,
  .pf-c-page__sidebar.keycloak__page_nav__nav {
    width: 278px;
    min-width: 278px;
  }

  .pf-v5-c-page__sidebar .pf-v5-c-nav,
  .pf-c-page__sidebar .pf-c-nav {
    padding: 20px 14px;
  }

  .pf-v5-c-page__sidebar .pf-v5-c-nav__link,
  .pf-c-page__sidebar .pf-c-nav__link {
    min-height: 40px;
    margin: 2px 0;
    padding: 9px 14px;
  }

  .pf-v5-c-page__main-section,
  .pf-c-page__main-section {
    padding: 28px 34px;
  }

  .pf-v5-c-table,
  .pf-c-table {
    border: 1px solid var(--aq-border);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06);
  }
}

@media (max-width: 768px) {
  .pf-v5-c-page__main-section {
    --pf-v5-c-page__main-section--PaddingRight: 16px;
    --pf-v5-c-page__main-section--PaddingLeft: 16px;
  }

  .pf-v5-c-page__sidebar .pf-v5-c-nav__link,
  .pf-c-page__sidebar .pf-c-nav__link {
    margin-inline: 4px;
  }
}