/* Numurho design tokens mapped onto PatternFly v5 (shared by login/account/admin/welcome) */

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/InterTight-Italic-VariableFont_wght.ttf") format("truetype");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Light palette (default) */
:root {
  color-scheme: light;
  --nm-bg: #fff;
  --nm-fg: #000;
  --nm-fg-rgb: 0 0 0;
  --nm-surface-1: #fafafa;
  --nm-surface-2: #f2f2f2;
  --nm-surface-3: #e8e8e8;
  --nm-icon-filter: grayscale(1) brightness(0);
  --nm-logo-filter: invert(1);
}

/* Dark palette, toggled by Keycloak via kcDarkModeClass */
.pf-v5-theme-dark {
  color-scheme: dark;
  --nm-bg: #000;
  --nm-fg: #fff;
  --nm-fg-rgb: 255 255 255;
  --nm-surface-1: #0a0a0a;
  --nm-surface-2: #111;
  --nm-surface-3: #1a1a1a;
  --nm-icon-filter: grayscale(1) brightness(0) invert(1);
  --nm-logo-filter: none;
}

/* Repeated on the dark class so derived values resolve against the active palette */
:root,
.pf-v5-theme-dark {
  --nm-text-90: rgb(var(--nm-fg-rgb) / 90%);
  --nm-text-75: rgb(var(--nm-fg-rgb) / 75%);
  --nm-text-60: rgb(var(--nm-fg-rgb) / 60%);
  --nm-text-50: rgb(var(--nm-fg-rgb) / 50%);
  --nm-fg-85: rgb(var(--nm-fg-rgb) / 85%);
  --nm-fg-75: rgb(var(--nm-fg-rgb) / 75%);
  --nm-border: rgb(var(--nm-fg-rgb) / 15%);
  --nm-border-strong: rgb(var(--nm-fg-rgb) / 40%);
  --nm-font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --pf-v5-global--FontFamily--text: var(--nm-font);
  --pf-v5-global--FontFamily--heading: var(--nm-font);
  --pf-v5-global--FontFamily--text--vf: var(--nm-font);
  --pf-v5-global--FontFamily--heading--vf: var(--nm-font);
  --pf-v5-global--FontWeight--bold: 600;

  --pf-v5-global--BackgroundColor--100: var(--nm-bg);
  --pf-v5-global--BackgroundColor--150: var(--nm-surface-1);
  --pf-v5-global--BackgroundColor--200: var(--nm-bg);
  --pf-v5-global--BackgroundColor--300: var(--nm-surface-2);
  --pf-v5-global--BackgroundColor--400: var(--nm-surface-3);
  --pf-v5-global--BackgroundColor--light-100: var(--nm-bg);
  --pf-v5-global--BackgroundColor--light-200: var(--nm-surface-1);
  --pf-v5-global--BackgroundColor--light-300: var(--nm-surface-2);
  --pf-v5-global--BackgroundColor--dark-100: var(--nm-bg);
  --pf-v5-global--BackgroundColor--dark-200: var(--nm-surface-1);
  --pf-v5-global--BackgroundColor--dark-300: var(--nm-surface-2);
  --pf-v5-global--BackgroundColor--dark-400: var(--nm-surface-3);

  --pf-v5-global--Color--100: var(--nm-fg);
  --pf-v5-global--Color--200: var(--nm-text-60);
  --pf-v5-global--Color--light-100: var(--nm-fg);
  --pf-v5-global--Color--light-200: var(--nm-text-60);
  --pf-v5-global--Color--dark-100: var(--nm-fg);
  --pf-v5-global--Color--dark-200: var(--nm-text-60);

  --pf-v5-global--BorderColor--100: var(--nm-border);
  --pf-v5-global--BorderColor--200: var(--nm-border);
  --pf-v5-global--BorderColor--300: var(--nm-border);
  --pf-v5-global--BorderColor--400: var(--nm-border-strong);
  --pf-v5-global--BorderColor--dark-100: var(--nm-border);
  --pf-v5-global--BorderColor--light-100: var(--nm-border);

  --pf-v5-global--primary-color--100: var(--nm-fg);
  --pf-v5-global--primary-color--200: var(--nm-fg-85);
  --pf-v5-global--primary-color--dark-100: var(--nm-fg);
  --pf-v5-global--primary-color--light-100: var(--nm-fg);
  --pf-v5-global--active-color--100: var(--nm-fg);
  --pf-v5-global--active-color--200: var(--nm-border);
  --pf-v5-global--active-color--300: var(--nm-fg);
  --pf-v5-global--active-color--400: var(--nm-fg);

  --pf-v5-global--link--Color: var(--nm-fg);
  --pf-v5-global--link--Color--hover: var(--nm-fg);
  --pf-v5-global--link--Color--visited: var(--nm-fg);
  --pf-v5-global--link--Color--light: var(--nm-fg);
  --pf-v5-global--link--Color--light--hover: var(--nm-fg);
  --pf-v5-global--link--Color--dark: var(--nm-fg);
  --pf-v5-global--link--Color--dark--hover: var(--nm-fg);
  --pf-v5-global--icon--Color--light: var(--nm-text-60);
  --pf-v5-global--icon--Color--dark: var(--nm-text-60);

  /* Very slightly rounded corners everywhere */
  --nm-radius: 4px;
  --pf-v5-global--BorderRadius--sm: var(--nm-radius);
  --pf-v5-global--BorderRadius--lg: var(--nm-radius);
}

/* PatternFly declares component tokens on the component itself, so override there (html prefix wins specificity) */
html .pf-v5-c-button {
  /* Primary buttons: inverted high-contrast (black on white in dark, white on black in light) */
  --pf-v5-c-button--m-primary--BackgroundColor: var(--nm-fg);
  --pf-v5-c-button--m-primary--Color: var(--nm-bg);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--nm-fg-85);
  --pf-v5-c-button--m-primary--hover--Color: var(--nm-bg);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--nm-fg-85);
  --pf-v5-c-button--m-primary--focus--Color: var(--nm-bg);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--nm-fg-75);
  --pf-v5-c-button--m-primary--active--Color: var(--nm-bg);
  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--Color: var(--nm-fg);
  --pf-v5-c-button--m-secondary--BorderColor: var(--nm-border-strong);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--hover--Color: var(--nm-fg);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--nm-fg);
  --pf-v5-c-button--m-secondary--focus--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--focus--Color: var(--nm-fg);
  --pf-v5-c-button--m-secondary--focus--BorderColor: var(--nm-fg);
  --pf-v5-c-button--m-link--Color: var(--nm-fg);
  --pf-v5-c-button--m-link--hover--Color: var(--nm-fg);
  --pf-v5-c-button--m-control--BackgroundColor: var(--nm-bg);
  --pf-v5-c-button--m-control--Color: var(--nm-fg);
  --pf-v5-c-button--m-control--hover--BackgroundColor: var(--nm-surface-2);
  --pf-v5-c-button--m-control--focus--BackgroundColor: var(--nm-surface-2);
  --pf-v5-c-button--m-control--active--BackgroundColor: var(--nm-surface-2);
  --pf-v5-c-button--m-plain--hover--BackgroundColor: var(--nm-surface-2);
  --pf-v5-c-button--BorderRadius: var(--nm-radius);
  --pf-v5-c-button--FontWeight: 500;
}

html .pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--nm-bg);
  --pf-v5-c-form-control--Color: var(--nm-fg);
  --pf-v5-c-form-control--before--BorderColor: var(--nm-border);
  --pf-v5-c-form-control--after--BorderColor: var(--nm-border);
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--nm-fg);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--nm-fg);
  --pf-v5-c-form-control--BorderRadius: var(--nm-radius);
  /* Uniform 1px border on all sides (PF uses a darker, thicker bottom edge) */
  --pf-v5-c-form-control--after--BorderBottomColor: var(--nm-border);
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--m-error--after--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--m-success--after--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--m-warning--after--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--m-expanded--after--BorderBottomWidth: 1px;
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--nm-border-strong);
}

/* Show-password / clear controls share the input's border */
html .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-control--after--BorderTopColor: var(--nm-border);
  --pf-v5-c-button--m-control--after--BorderRightColor: var(--nm-border);
  --pf-v5-c-button--m-control--after--BorderBottomColor: var(--nm-border);
  --pf-v5-c-button--m-control--after--BorderLeftColor: var(--nm-border);
  --pf-v5-c-button--m-control--hover--after--BorderBottomColor: var(--nm-border);
  --pf-v5-c-button--m-control--hover--after--BorderBottomWidth: 1px;
  --pf-v5-c-button--m-control--focus--after--BorderBottomColor: var(--nm-border);
  --pf-v5-c-button--m-control--focus--after--BorderBottomWidth: 1px;
  --pf-v5-c-button--m-control--active--after--BorderBottomColor: var(--nm-border);
  --pf-v5-c-button--m-control--active--after--BorderBottomWidth: 1px;
}

html .pf-v5-c-menu-toggle {
  --pf-v5-c-menu-toggle--BackgroundColor: var(--nm-bg);
  --pf-v5-c-menu-toggle--Color: var(--nm-fg);
  --pf-v5-c-menu-toggle--BorderRadius: var(--nm-radius);
}

html .pf-v5-c-check {
  --pf-v5-c-check__input--AccentColor: var(--nm-fg);
}

html .pf-v5-c-radio {
  --pf-v5-c-radio__input--AccentColor: var(--nm-fg);
}

html,
body {
  background-color: var(--nm-bg);
  color: var(--nm-fg);
  font-family: var(--nm-font);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.pf-v5-c-title {
  font-family: var(--nm-font);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.12;
}

a:hover,
.pf-v5-c-button.pf-m-link:hover,
.pf-v5-c-button.pf-m-link.pf-m-inline:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

a:focus-visible,
.pf-v5-c-button:focus-visible {
  outline: 2px solid var(--nm-fg);
  outline-offset: 4px;
}

strong,
b {
  color: var(--nm-text-90);
  font-weight: 500;
}

::selection {
  background: var(--nm-fg);
  color: var(--nm-bg);
}

.pf-v5-c-form-control > :is(input, select, textarea) {
  color: var(--nm-fg);
}

/* Focus: strong border + soft ring instead of PF's thick bottom bar */
.pf-v5-c-form-control:focus-within {
  --pf-v5-c-form-control--after--BorderColor: var(--nm-border-strong);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--nm-border-strong);
  box-shadow: 0 0 0 3px rgb(var(--nm-fg-rgb) / 12%);
}

.pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline: none;
}

.pf-v5-c-form-control,
.pf-v5-c-form-control::after,
.pf-v5-c-button,
.pf-v5-c-button::after,
.pf-v5-c-menu-toggle,
.pf-v5-c-menu-toggle::before {
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease;
}

/* Shared entrance: short fade + 6px rise */
@keyframes nm-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Slow light sweep across gradient-clipped text */
@keyframes nm-shimmer {
  from { background-position: 100% 0; }
  to   { background-position: -150% 0; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation-duration: .01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
  }
}

.pf-v5-c-form__label-text {
  color: var(--nm-text-75);
  font-size: .875rem;
  font-weight: 500;
}

.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text {
  font-size: .8125rem;
}

/* Aligned digits for codes, counters and tables */
input[autocomplete="one-time-code"],
#otp,
#totp,
.pf-v5-c-table,
.pf-v5-c-data-list {
  font-variant-numeric: tabular-nums;
}

.pf-v5-c-card,
.pf-v5-c-modal-box,
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-select__menu {
  background-color: var(--nm-surface-1);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  box-shadow: none;
}

.pf-v5-c-alert {
  background-color: var(--nm-surface-2);
  border: 1px solid var(--nm-border);
  border-radius: var(--nm-radius);
  box-shadow: none;
}

/* PF draws input/toggle borders on pseudo-elements, so they need the radius too */
.pf-v5-c-form-control,
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-menu-toggle,
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after,
.pf-v5-c-button,
.pf-v5-c-button::after,
.pf-v5-c-popover__content,
.pf-v5-c-tooltip__content,
.pf-v5-c-code-block,
.pf-v5-c-panel {
  border-radius: var(--nm-radius);
}

/* Joined input + control button: round only the outer corners */
.pf-v5-c-input-group .pf-v5-c-form-control,
.pf-v5-c-input-group .pf-v5-c-form-control::before,
.pf-v5-c-input-group .pf-v5-c-form-control::after,
.pf-v5-c-input-group .pf-v5-c-button,
.pf-v5-c-input-group .pf-v5-c-button::after {
  border-radius: 0;
}

.pf-v5-c-input-group__item:first-child .pf-v5-c-form-control,
.pf-v5-c-input-group__item:first-child .pf-v5-c-form-control::before,
.pf-v5-c-input-group__item:first-child .pf-v5-c-form-control::after {
  border-radius: var(--nm-radius) 0 0 var(--nm-radius);
}

.pf-v5-c-input-group__item:last-child .pf-v5-c-button,
.pf-v5-c-input-group__item:last-child .pf-v5-c-button::after {
  border-radius: 0 var(--nm-radius) var(--nm-radius) 0;
}

.pf-v5-c-popover__content,
.pf-v5-c-code-block,
.pf-v5-c-panel {
  background-color: var(--nm-surface-1);
}