/*
 * ltai: account and admin consoles (Keycloak's React consoles) with the brand of LiveTech AI. Only
 * PatternFly 5 variables and a few selectors of the masthead: if a later Keycloak version changes
 * them, the console falls back to its default look instead of breaking. Colours and fonts come
 * from ltai-brand.css, generated from src/brand.
 */

:root {
  --pf-v5-global--FontFamily--text: var(--ltai-font);
  --pf-v5-global--FontFamily--heading: var(--ltai-font);
  --pf-v5-global--FontFamily--text--vf: var(--ltai-font);
  --pf-v5-global--FontFamily--heading--vf: var(--ltai-font);
  --pf-v5-global--primary-color--100: var(--ltai-primary);
  --pf-v5-global--primary-color--200: var(--ltai-primary-dark);
  --pf-v5-global--primary-color--dark-100: var(--ltai-primary);
  --pf-v5-global--primary-color--light-100: var(--ltai-primary-soft);
  --pf-v5-global--active-color--100: var(--ltai-primary);
  --pf-v5-global--active-color--200: var(--ltai-primary-bg);
  --pf-v5-global--active-color--300: var(--ltai-primary);
  --pf-v5-global--active-color--400: var(--ltai-primary-soft);
  --pf-v5-global--link--Color: var(--ltai-primary);
  --pf-v5-global--link--Color--hover: var(--ltai-primary-dark);
  --pf-v5-global--link--Color--dark: var(--ltai-primary);
  --pf-v5-global--link--Color--dark--hover: var(--ltai-primary-dark);
  --pf-v5-global--link--Color--light: var(--ltai-band-text);
  --pf-v5-global--link--Color--light--hover: #ffffff;
  --pf-v5-global--Color--dark-100: var(--ltai-text);
  --pf-v5-global--Color--dark-200: var(--ltai-text-muted);
  --pf-v5-global--BackgroundColor--dark-100: var(--ltai-band);
  --pf-v5-global--BackgroundColor--dark-200: var(--ltai-band-deep);
  --pf-v5-global--BackgroundColor--dark-300: var(--ltai-band);
  --pf-v5-global--BackgroundColor--light-300: var(--ltai-surface);
  --pf-v5-global--BorderRadius--sm: 8px;
}

body {
  -webkit-font-smoothing: antialiased;
}

/* Masthead: the blue band of the e-mails, with livetech.ai's white wordmark. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--ltai-band);
}

.pf-v5-c-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.pf-v5-c-masthead__brand img {
  width: auto;
  height: 32px;
  max-height: 32px;
}

/* Navigation: a light pane like the portal's sidebar, the selected item on the primary tint. */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #f7f9fd;
  --pf-v5-c-page__sidebar--BoxShadow: none;
  border-inline-end: 1px solid var(--ltai-border);
}

.pf-v5-c-page__sidebar.pf-m-dark,
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: var(--ltai-text);
  --pf-v5-c-nav__link--hover--Color: var(--ltai-text);
  --pf-v5-c-nav__link--focus--Color: var(--ltai-text);
  --pf-v5-c-nav__link--active--Color: var(--ltai-primary-dark);
  --pf-v5-c-nav__link--m-current--Color: var(--ltai-primary-dark);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: #eaf0fb;
  --pf-v5-c-nav__link--focus--BackgroundColor: #eaf0fb;
  --pf-v5-c-nav__link--active--BackgroundColor: var(--ltai-primary-bg);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--ltai-primary-bg);
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--after--BorderColor: transparent;
  --pf-v5-c-nav__link--hover--after--BorderColor: transparent;
  --pf-v5-c-nav__link--focus--after--BorderColor: transparent;
  --pf-v5-c-nav__link--active--after--BorderColor: transparent;
  --pf-v5-c-nav__link--m-current--after--BorderColor: transparent;
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: transparent;
  --pf-v5-c-nav__section-title--Color: var(--ltai-text-muted);
  --pf-v5-c-nav--m-horizontal__link--Color: var(--ltai-text);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__list {
  padding-inline: 10px;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
  border-radius: 10px;
  font-weight: 500;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
  font-weight: 600;
}

.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--ltai-surface);
}

.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 9999px;
  --pf-v5-c-button--FontWeight: 500;
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ltai-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ltai-primary-dark);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ltai-primary-dark);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ltai-primary-pressed);
}

.pf-v5-c-card {
  --pf-v5-c-card--BorderRadius: 16px;
  --pf-v5-c-card--BoxShadow: var(--ltai-card-shadow);
}

.pf-v5-c-form-control {
  --pf-v5-c-form-control--before--BorderTopColor: var(--ltai-control);
  --pf-v5-c-form-control--before--BorderRightColor: var(--ltai-control);
  --pf-v5-c-form-control--before--BorderLeftColor: var(--ltai-control);
  border-radius: 10px;
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
  border-radius: 10px;
}

.pf-v5-c-tabs__link::after {
  border-radius: 2px;
}

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