/* Open Beatz skin for the Keycloak v3 account console (PatternFly v5, as of
   Keycloak 26 — component classes/variables carry the "v5" infix, e.g.
   .pf-v5-c-button / --pf-v5-global--*, so this won't apply against PF4/PF6).
   Loaded after the PF bundle via theme.properties `styles`, so equal-specificity
   rules and :root variable overrides here win the cascade.
   Design tokens mirrored from the login theme (open-beatz-app _theme.scss). */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap");

:root,
:root.pf-v5-theme-dark {
  --ob-white: #ffffff;
  --ob-orange: #f97316;
  --ob-orange-dark: #ea580c;
  --ob-orange-soft: rgba(249, 115, 22, 0.08);
  --ob-default: #1c1a32;
  --ob-default-40: #74737f;
  --ob-default-60: #a2a2aa;
  --ob-field-border: #e6e7e9;
  --ob-grayscale-g1: #f6f7f8;
  --ob-positive: #51aa6a;
  --ob-negative: #ca3a31;

  /* PatternFly global tokens → brand */
  --pf-v5-global--FontFamily--sans-serif: "Noto Sans", sans-serif;
  --pf-v5-global--FontFamily--heading--sans-serif: "Noto Sans", sans-serif;
  --pf-v5-global--FontFamily--redhat-updated--sans-serif: "Noto Sans", sans-serif;
  --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: "Noto Sans", sans-serif;
  --pf-v5-global--primary-color--100: var(--ob-orange);
  --pf-v5-global--primary-color--200: var(--ob-orange-dark);
  --pf-v5-global--primary-color--dark-100: var(--ob-orange);
  --pf-v5-global--primary-color--light-100: var(--ob-orange);
  --pf-v5-global--active-color--100: var(--ob-orange);
  --pf-v5-global--active-color--400: var(--ob-orange);
  --pf-v5-global--link--Color: var(--ob-orange);
  --pf-v5-global--link--Color--hover: var(--ob-orange-dark);
  --pf-v5-global--link--Color--dark: var(--ob-orange);
  --pf-v5-global--link--Color--dark--hover: var(--ob-orange-dark);
  --pf-v5-global--link--Color--light: var(--ob-orange);
  --pf-v5-global--link--Color--light--hover: var(--ob-orange-dark);
  --pf-v5-global--Color--100: var(--ob-default);
  --pf-v5-global--Color--200: var(--ob-default-40);
  --pf-v5-global--BorderColor--100: var(--ob-field-border);
  --pf-v5-global--BorderColor--200: var(--ob-field-border);
  --pf-v5-global--BorderColor--300: var(--ob-field-border);
  --pf-v5-global--BackgroundColor--100: var(--ob-white);
  --pf-v5-global--BackgroundColor--150: var(--ob-grayscale-g1);
  --pf-v5-global--BackgroundColor--200: var(--ob-grayscale-g1);
  --pf-v5-global--success-color--100: var(--ob-positive);
  --pf-v5-global--danger-color--100: var(--ob-negative);
  --pf-v5-global--warning-color--200: var(--ob-orange-dark);
}

/* ---- Header: dark bar → white with brand logo ----
   The v3 console renders a PF5 Masthead (.pf-v5-c-masthead), not the older
   PageHeader — its --pf-v5-c-masthead--BackgroundColor defaults to the dark
   global regardless of light/dark color-scheme, so it needs an explicit
   override here rather than just re-mapping globals. */

.pf-v5-c-masthead,
.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--ob-white);
  --pf-v5-global--Color--100: var(--ob-default);
  --pf-v5-global--Color--200: var(--ob-default-40);
  --pf-v5-global--BorderColor--100: var(--ob-field-border);
  --pf-v5-global--link--Color: var(--ob-orange);
  --pf-v5-global--link--Color--hover: var(--ob-orange-dark);
  border-bottom: 1px solid var(--ob-field-border);
}

.pf-v5-c-masthead__brand img {
  height: 36px;
}

/* Everything below is scoped to the narrow/mobile masthead only. PatternFly itself swaps in a
   different (narrower) grid template below its own mobile breakpoint — verified live via
   getComputedStyle that the narrow template is just 2 columns (48px | 1fr), vs. desktop's own
   wider template that already has a dedicated flexible column pushing the toolbar (locale
   dropdown + avatar) to the right edge. An earlier version of this file applied the grid
   overrides below unconditionally, which clobbered PatternFly's desktop grid-template-columns
   too — collapsing the toolbar/avatar up against the logo instead of the far right edge. Keeping
   these scoped to max-width: 480px (the same breakpoint tested against the real iPhone-width
   overflow bug below) leaves desktop's native PatternFly layout untouched. */
@media (max-width: 480px) {
  /* .pf-v5-c-masthead__content is hardcoded by PatternFly to `grid-column: 2 / -1` — in the
     narrow 2-column grid that just means "the one remaining column". Adding a 3rd column below
     (for brand+content side by side) made that same `2 / -1` span across BOTH new columns,
     overlapping .pf-v5-c-masthead__brand (which auto-places into column 2), so the grid
     auto-placement algorithm pushed content down to an auto-generated second row to avoid the
     collision — that was the actual cause of the 2-row layout, not a wrapping/overflow issue.
     Moving content to column 3 explicitly resolves the overlap.
     (Switching `display` from grid to flex to force one row was tried earlier and broke the
     profile-picture toolbar item — PatternFly's Toolbar measures its container's width via JS to
     decide what to show vs. collapse into overflow, and changing the layout mode changed what it
     measured. Staying on `display: grid` throughout avoids that.) */
  .pf-v5-c-masthead {
    /* Confirmed live (getComputedStyle + a real DevTools responsive test at 274px): fixed
       max-content/max-content/110px columns can sum to MORE than the actual viewport width,
       which doesn't make the row wrap — it makes the whole page overflow horizontally, pushing
       the avatar off-screen. Toggle (48px) and content (110px, sized for the kebab + avatar,
       which must stay full-size and clickable) are fixed and non-negotiable; brand (the logo —
       purely decorative) is the one column allowed to shrink via minmax(0, ...) instead of
       forcing overflow when space is tight. */
    grid-template-columns: 48px minmax(0, max-content) 110px;
    grid-template-areas: "toggle brand content";
  }

  .pf-v5-c-masthead__content {
    grid-column: 3 / -1;
  }

  .pf-v5-c-masthead__brand {
    min-width: 0;
    overflow: hidden;
  }

  /* Tighten the gap between toolbar items (kebab menu, profile picture) to leave more room —
     PatternFly gives each .pf-v5-c-toolbar__item a 16px right margin by default (confirmed via
     getComputedStyle on the live page), which adds up next to the logo on narrow screens. */
  .pf-v5-c-masthead .pf-v5-c-toolbar__item {
    margin-right: 4px;
  }

  /* Shrink the logo on narrow viewports to leave more room for the toolbar (kebab + avatar),
     but not down to its smallest possible size — kept a bit bigger for legibility. */
  .pf-v5-c-masthead__brand img {
    height: 30px;
  }

  /* Match the hamburger icon to the kebab menu's size, and size both up a little from
     PatternFly's own 24px/16px split. Centered with flex instead of relying on the default
     inline vertical-align (font-metric-dependent — shifts with font-loading state/line-height,
     which is a likely cause of the icons reading as "too high" inconsistently). */
  #nav-toggle,
  [data-testid="options-kebab-toggle"] {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  #nav-toggle svg,
  [data-testid="options-kebab-toggle"] svg {
    width: 20px;
    height: 20px;
    vertical-align: middle;
  }
}

/* The default-avatar SVG PatternFly renders (no profile picture set) has a markup bug: an
   inner <g> is styled `filter: url(#a)`, but #a is a <mask> element, not a <filter> — a
   mismatched reference, not something in our markup we can correct at the source (it's
   generated by PatternFly's Avatar component). Per spec a failing filter url() should fall
   back to no filter, but browsers have documented, real disagreements about that exact
   fallback (e.g. https://bugzilla.mozilla.org/show_bug.cgi?id=1105145, where a failing filter
   reference made the content not display at all instead of falling back) — a plausible
   explanation for the icon disappearing entirely on Safari while working on Chrome. The other
   filter this SVG references (#b, used by the mask itself) is a feColorMatrix set to the
   identity matrix — mathematically a no-op — so disabling both filters outright is safe:
   visually identical to the intended rendering on any browser where it already works, and a
   defensive fix for browsers that don't tolerate the broken reference. */
.pf-v5-c-avatar,
.pf-v5-c-avatar * {
  filter: none !important;
}

/* Toolbar text/icons sit on white now */
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-toolbar__item,
.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-theme-dark .pf-v5-c-masthead .pf-v5-c-toolbar__item {
  color: var(--ob-default);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle::before {
  border: none;
}

/* ---- Sidebar / navigation ---- */

.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar.pf-m-dark {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--ob-white);
  background-color: var(--ob-white);
  border-right: 1px solid var(--ob-field-border);
  box-shadow: none;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav--Color: var(--ob-default-40);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  color: var(--ob-default-40);
  font-size: 14px;
  background-color: transparent;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link:hover {
  color: var(--ob-default);
  background-color: var(--ob-grayscale-g1);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  color: var(--ob-orange);
  font-weight: 700;
  background-color: var(--ob-orange-soft);
  box-shadow: inset 3px 0 0 var(--ob-orange);
}

/* Drop PF's own current/hover marker bars so only the orange inset shows */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::before,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__item::before {
  border: none;
  background-color: transparent;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle {
  color: inherit;
}

/* Expandable subnav (Account security) */
.pf-v5-c-page__sidebar .pf-v5-c-nav__subnav .pf-v5-c-nav__link {
  font-size: 13px;
}

/* ---- Page body ---- */

.pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--ob-white);
}

.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--ob-white);
}

.pf-v5-c-title,
.pf-v5-c-content h1,
.pf-v5-c-content h2 {
  color: var(--ob-default);
  font-weight: 700;
}

/* ---- Buttons: match .btn from the login theme ---- */

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 12px;
  border-radius: 12px;
  font-weight: 600;
  transition: background-color 0.2s, border-color 0.2s;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ob-orange);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ob-orange-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ob-orange-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ob-orange-dark);
  font-weight: 700;
  letter-spacing: 0.5px;
}

.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
  --pf-v5-c-button--after--BorderColor: var(--ob-field-border);
  color: var(--ob-default);
  background-color: var(--ob-white);
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-tertiary:hover {
  --pf-v5-c-button--after--BorderColor: var(--ob-default);
  color: var(--ob-default);
}

.pf-v5-c-button.pf-m-link {
  color: var(--ob-orange);
}

.pf-v5-c-button.pf-m-link:hover {
  color: var(--ob-orange-dark);
}

.pf-v5-c-button.pf-m-danger {
  --pf-v5-c-button--m-danger--BackgroundColor: var(--ob-negative);
}

/* ---- Form controls: match .form-control from the login theme ----
   `.pf-v5-c-form-control` is a wrapper div around the real <input>; PF draws
   its border via ::before (top/left/right) and ::after (bottom, doubling as
   the hover/focus accent underline) rather than a real `border`. Those are
   already colored correctly from the BorderColor--300/200 and
   primary-color--100 globals set above, so a real `border` here would just
   draw a second, competing box — that's what caused the doubled look on
   hover/focus. Only size/shape/background need overriding. */

.pf-v5-c-form-control {
  --pf-v5-c-form-control--PaddingTop: 11px;
  --pf-v5-c-form-control--PaddingBottom: 11px;
  --pf-v5-c-form-control--PaddingLeft: 14px;
  --pf-v5-c-form-control--PaddingRight: 14px;
  --pf-v5-c-form-control--BackgroundColor: var(--ob-white);
  --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--ob-grayscale-g1);
  --pf-v5-c-form-control--m-disabled--Color: var(--ob-default-40);
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--ob-grayscale-g1);
  font-size: 14px;
  color: var(--ob-default);
  border-radius: 4px;
  min-width: 0;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: 4px;
  transition: border-color 0.2s ease;
}

/* Safari's native date-input widget has a wider intrinsic content width than Chrome's; inside
   a flex layout that shows up as the field overflowing its container on iPhone specifically
   (flex items default to min-width: auto, refusing to shrink below content width) even though
   it fits fine on Android/Chrome. min-width: 0 above lets it shrink like every other field. */
.pf-v5-c-form-control > input[type="date"] {
  min-width: 0;
  width: 100%;
}

.pf-v5-c-form-control > textarea {
  min-height: 96px;
}

.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control[aria-invalid="true"] {
  --pf-v5-c-form-control--before--BorderTopColor: var(--ob-negative);
  --pf-v5-c-form-control--before--BorderRightColor: var(--ob-negative);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--ob-negative);
  --pf-v5-c-form-control--after--BorderBottomColor: var(--ob-negative);
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus {
  outline-color: var(--ob-orange);
}

.pf-v5-c-form__label-text {
  font-size: 14px;
  color: var(--ob-default);
}

.pf-v5-c-form__label-required {
  color: var(--ob-orange);
}

.pf-v5-c-form__helper-text {
  font-size: 13px;
  color: var(--ob-default-40);
}

.pf-v5-c-form__helper-text.pf-m-error {
  color: var(--ob-negative);
}

/* ---- Search / filter box (Resources page tabs) ----
   The text field and its attached button are separate siblings inside
   .pf-v5-c-input-group — PF draws no border around that outer group itself,
   only around the inner .pf-v5-c-text-input-group__text (input only), and
   the button is unstyled outside of it. One real border goes on the true
   outer container so it wraps both; PF's inner border is suppressed so it
   doesn't sit doubled on top of it, and overflow:hidden lets the outer
   border-radius clip the button's square corners for free. */

.pf-v5-c-input-group {
  background-color: var(--ob-white);
  border: 1px solid var(--ob-field-border);
  border-radius: 4px;
  overflow: hidden;
  transition: border-color 0.3s ease;
}

.pf-v5-c-input-group:hover {
  border-color: var(--ob-default);
}

.pf-v5-c-input-group:focus-within {
  border-color: var(--ob-orange);
}

.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after {
  border: none;
}

.pf-v5-c-text-input-group__text-input {
  font-size: 14px;
  color: var(--ob-default);
}

.pf-v5-c-text-input-group__text-input:focus {
  outline: none;
}

/* The attached arrow/control button next to the search box —
   corner rounding comes from the input group's own overflow:hidden now */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
  border-radius: 0;
}

/* Native checkboxes / radios pick up the login theme's green accent */
.pf-v5-c-check__input,
.pf-v5-c-radio__input,
input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--ob-positive);
}

/* Switches (e.g. locale toggle) */
.pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--ob-positive);
}

/* ---- Cards, panels, modals ---- */

.pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: var(--ob-white);
  border: 1px solid var(--ob-field-border);
  border-radius: 12px;
  box-shadow: none;
}

.pf-v5-c-modal-box {
  border-radius: 16px;
}

.pf-v5-c-dropdown__menu,
.pf-v5-c-menu {
  border-radius: 8px;
}

.pf-v5-c-alert {
  border-radius: 12px;
}

/* Data lists (Device activity, Applications, Linked accounts) */
.pf-v5-c-data-list {
  border-top: none;
}

.pf-v5-c-data-list__item {
  border-color: var(--ob-field-border);
}

/* Jump links ("Jump to section") inherit active color = orange via globals */
.pf-v5-c-jump-links__link.pf-m-current .pf-v5-c-jump-links__link-text {
  color: var(--ob-orange);
}

/* Spinner while the SPA boots */
.pf-v5-c-spinner {
  --pf-v5-c-spinner--Color: var(--ob-orange);
}

/* ---- Focus ring: orange, like the login theme ---- */

a:focus-visible,
button:focus-visible {
  outline-color: var(--ob-orange);
}

/* ---- Address autocomplete (Straße suggestions, Personal info) ----
   Appended to <body> rather than nested in the form: the account console is a React SPA and
   this list must live outside its managed DOM tree to avoid reconciliation conflicts, so it's
   positioned via JS (position: fixed) instead of a CSS-relative wrapper. See
   accountAddressAutocomplete.js. */

.address-suggestions {
  position: fixed;
  z-index: 9999;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  background-color: var(--ob-white);
  border: 1px solid var(--ob-field-border);
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(28, 26, 50, 0.12);
}

.address-suggestions-option {
  padding: 8px 10px;
  font-size: 14px;
  color: var(--ob-default);
  border-radius: 4px;
  cursor: pointer;
}

.address-suggestions-option:hover,
.address-suggestions-option.is-active {
  background-color: var(--ob-grayscale-g1);
}

.address-suggestions-empty {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--ob-default-40);
}

/* ---- Hide "Resources" nav item (UMA resource sharing not used) ---- */
/* data-testid is stable; href is a full hash-routed URL, not "/resources", so it won't match reliably */

li:has(a[data-testid="resources"]) {
  display: none !important;
}