/* infinit Precision for Keycloak 26 / PatternFly 5.
 * Inherit upstream templates and applications; customize their visual tokens only.
 */
:root,
:root.pf-v5-theme-dark {
    color-scheme: light;
    --infinit-background: #f3f6fa;
    --infinit-foreground: #17283d;
    --infinit-surface: #fff;
    --infinit-muted: #52657a;
    --infinit-soft: #edf2f7;
    --infinit-border: #d7e1eb;
    --infinit-primary: #006d8f;
    --infinit-on-primary: #fff;
    --infinit-hover: #005e7c;
    --infinit-selected: #e7f2f7;
    --infinit-radius: 6px;
    --pf-v5-global--FontFamily--text: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
    --pf-v5-global--BackgroundColor--100: var(--infinit-surface);
    --pf-v5-global--BackgroundColor--200: var(--infinit-background);
    --pf-v5-global--BackgroundColor--300: var(--infinit-soft);
    --pf-v5-global--BackgroundColor--400: var(--infinit-soft);
    --pf-v5-global--Color--100: var(--infinit-foreground);
    --pf-v5-global--Color--200: var(--infinit-muted);
    --pf-v5-global--BorderColor--100: var(--infinit-border);
    --pf-v5-global--BorderColor--200: var(--infinit-border);
    --pf-v5-global--primary-color--100: var(--infinit-primary);
    --pf-v5-global--primary-color--200: var(--infinit-hover);
    --pf-v5-global--active-color--100: var(--infinit-primary);
    --pf-v5-global--link--Color: var(--infinit-primary);
    --pf-v5-global--link--Color--hover: var(--infinit-hover);
    --pf-v5-global--BorderRadius--sm: var(--infinit-radius);
}

@media (prefers-color-scheme: dark) {
    :root,
    :root.pf-v5-theme-dark {
        color-scheme: dark;
        --infinit-background: #101b29;
        --infinit-foreground: #e6eef7;
        --infinit-surface: #182638;
        --infinit-muted: #adbed0;
        --infinit-soft: #25364a;
        --infinit-border: #33455a;
        --infinit-primary: #70cbe5;
        --infinit-on-primary: #102330;
        --infinit-hover: #88d5eb;
        --infinit-selected: #223c50;
    }
}

body,
#keycloak-bg {
    background: var(--infinit-background);
    color: var(--infinit-foreground);
    font-family: var(--pf-v5-global--FontFamily--text);
}

.keycloak__loading-container {
    background: var(--infinit-background);
    color: var(--infinit-foreground);
}

/* Login, credentials, required actions and error screens share the upstream layout. */
.pf-v5-c-login {
    min-height: 100vh;
    padding: 3rem 1rem;
}

.pf-v5-c-login__container {
    width: min(34rem, calc(100vw - 2rem));
    max-width: 34rem;
    padding-inline: 0;
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
}

#kc-header-wrapper {
    width: 220px;
    height: 60px;
    margin: 0 auto 1.5rem;
    background: url('../img/infinit-logo.svg') center / contain no-repeat;
}

.infinit-brand-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.pf-v5-c-login__main {
    background: var(--infinit-surface);
    border: 1px solid var(--infinit-border);
    border-radius: var(--infinit-radius);
    box-shadow: inset 3px 0 0 var(--infinit-primary), 0 2px 5px #16283c04;
}

.pf-v5-c-login__main-header {
    grid-template-columns: 1fr auto;
}

.pf-v5-c-title {
    letter-spacing: -.035em;
}

/* Shared console shell: keep navigation, controls and responsive behavior native. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--infinit-surface);
    --pf-v5-global--Color--100: var(--infinit-foreground);
    --pf-v5-global--Color--200: var(--infinit-muted);
    --pf-v5-global--BorderColor--100: var(--infinit-border);
    color: var(--infinit-foreground);
    border-bottom: 1px solid var(--infinit-border);
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
    background: transparent;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    color: var(--infinit-muted);
}

.pf-v5-c-page,
.pf-v5-c-page__main {
    background-color: var(--infinit-background);
}

.pf-v5-c-page__main-section {
    background-color: var(--infinit-surface);
}

.pf-v5-c-masthead__brand img,
#masthead-logo {
    width: 168px;
    height: auto;
    max-height: 42px;
}

.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--infinit-surface);
    border-inline-end: 1px solid var(--infinit-border);
}

.pf-v5-c-page__sidebar .pf-v5-c-menu-toggle {
    color: var(--infinit-foreground);
    background-color: var(--infinit-soft);
}

.pf-v5-c-table {
    --pf-v5-c-table--BackgroundColor: var(--infinit-surface);
    --pf-v5-c-table--BorderColor: var(--infinit-border);
}

.pf-v5-c-table a {
    color: var(--infinit-primary);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: var(--infinit-muted);
    --pf-v5-c-nav__link--hover--Color: var(--infinit-foreground);
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--infinit-selected);
    --pf-v5-c-nav__link--m-current--Color: var(--infinit-primary);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--infinit-selected);
    --pf-v5-c-nav__section-title--Color: var(--infinit-muted);
    --pf-v5-c-nav__section-title--BorderBottomColor: var(--infinit-border);
    --pf-v5-c-nav__item--before--BorderColor: var(--infinit-border);
    --pf-v5-c-nav__link--before--BorderColor: var(--infinit-primary);
}

.pf-v5-c-nav__link,
.pf-v5-c-nav__section-title {
    font-size: .875rem;
}

.pf-v5-c-card {
    border: 1px solid var(--infinit-border);
    border-radius: var(--infinit-radius);
    box-shadow: 0 2px 5px #16283c04;
}

.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: var(--infinit-radius);
    --pf-v5-c-button--m-primary--Color: var(--infinit-on-primary);
    --pf-v5-c-button--m-primary--hover--Color: var(--infinit-on-primary);
    --pf-v5-c-button--m-primary--focus--Color: var(--infinit-on-primary);
    --pf-v5-c-button--m-primary--active--Color: var(--infinit-on-primary);
    --pf-v5-c-button--m-primary--BackgroundColor: var(--infinit-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--infinit-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--infinit-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--infinit-hover);
}

.pf-v5-c-form-control,
.pf-v5-c-menu-toggle {
    border-radius: var(--infinit-radius);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
    border-radius: inherit;
}

.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-modal-box {
    border-radius: var(--infinit-radius);
}

:is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--infinit-primary);
    outline-offset: 3px;
}

@media (max-width: 600px) {
    .pf-v5-c-login { padding: 1.5rem 1rem; }
    .pf-v5-c-login__main-header,
    .pf-v5-c-login__main-body { padding-inline: 1.5rem; }
    .pf-v5-c-masthead__brand img,
    #masthead-logo { width: 132px; }
}