/* EmberNet account console, served by Vord.
 *
 * The account console is the engine's own React app (PatternFly 5). It keeps
 * its layout, its pages and every behavior; this sheet only re-skins it so a
 * person who just signed in on the EmberNet card does not land in a black
 * stock header with another company's logo on it. Same tokens as the sign-in
 * page (vord.css) and @embernet-ai/design: Inter, ember red, white surfaces,
 * pill buttons, 16px cards. Light by default, dark when the device is, and the
 * engine's own dark class (pf-v5-theme-dark, set from prefers-color-scheme)
 * decides which set of PatternFly tokens is in play.
 *
 * Nothing here loads from anywhere but this theme and its sibling login theme:
 * the font and the logo are the files the sign-in page already serves, reached
 * by a relative path, so there is one copy of each in the release.
 */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../../../login/vord/fonts/inter-latin-wght-normal.woff2) format('woff2-variations'),
       url(../../../login/vord/fonts/inter-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --vda-bg: #F7F8FA; --vda-bar: #FFFFFF; --vda-card: #FFFFFF; --vda-field: #FFFFFF; --vda-chip: #F2F4F7;
  --vda-ink: #101828; --vda-ink-2: #475467; --vda-ink-3: #667085; --vda-line: #EAECF0; --vda-line-2: #D0D5DD;
  --vda-ember: #D92D20; --vda-ember-ink: #B42318; --vda-ember-hover: #B42318; --vda-ember-tint: #FEF3F2;
  --vda-ok: #05603A; --vda-ok-tint: #ECFDF3; --vda-warn: #93370D; --vda-warn-tint: #FFFAEB; --vda-info: #175CD3; --vda-info-tint: #EFF8FF;
  --vda-sh-1: 0 1px 2px rgba(16, 24, 40, .05);
  --vda-sh-2: 0 12px 32px -8px rgba(16, 24, 40, .12), 0 4px 8px -4px rgba(16, 24, 40, .06);
  --vda-font: 'Inter Variable', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
:root.pf-v5-theme-dark {
  --vda-bg: #0F1218; --vda-bar: #141821; --vda-card: #171B24; --vda-field: #11151C; --vda-chip: #1E2430;
  --vda-ink: #E7ECF3; --vda-ink-2: #AEB7C6; --vda-ink-3: #8A93A4; --vda-line: #262D3A; --vda-line-2: #364052;
  --vda-ember: #F04438; --vda-ember-ink: #F97066; --vda-ember-hover: #F97066; --vda-ember-tint: #2A1512;
  --vda-ok: #6CE9A6; --vda-ok-tint: #0B2A1E; --vda-warn: #FEC84B; --vda-warn-tint: #2B1D08; --vda-info: #84CAFF; --vda-info-tint: #0B1B33;
  --vda-sh-1: 0 1px 2px rgba(0, 0, 0, .4);
  --vda-sh-2: 0 16px 40px -10px rgba(0, 0, 0, .6);
}

/* PatternFly's own tokens, pointed at ours. Most of the page follows from
 * these alone; the rules below it are for the parts that hard-code a color. */
:root, :root.pf-v5-theme-dark {
  --pf-v5-global--FontFamily--text: var(--vda-font);
  --pf-v5-global--FontFamily--heading: var(--vda-font);
  --pf-v5-global--FontFamily--sans-serif: var(--vda-font);
  --pf-v5-global--primary-color--100: var(--vda-ember);
  --pf-v5-global--primary-color--200: var(--vda-ember-hover);
  --pf-v5-global--primary-color--light-100: var(--vda-ember);
  --pf-v5-global--primary-color--dark-100: var(--vda-ember);
  --pf-v5-global--active-color--100: var(--vda-ember);
  --pf-v5-global--link--Color: var(--vda-ember-ink);
  --pf-v5-global--link--Color--hover: var(--vda-ember-hover);
  --pf-v5-global--link--Color--light: var(--vda-ember-ink);
  --pf-v5-global--link--Color--dark: var(--vda-ember-ink);
  --pf-v5-global--BackgroundColor--100: var(--vda-card);
  --pf-v5-global--BackgroundColor--200: var(--vda-bg);
  --pf-v5-global--Color--100: var(--vda-ink);
  --pf-v5-global--Color--200: var(--vda-ink-2);
  --pf-v5-global--BorderColor--100: var(--vda-line-2);
  --pf-v5-global--BorderColor--200: var(--vda-line);
  --pf-v5-global--BorderRadius--sm: 8px;
  --pf-v5-global--BorderRadius--lg: 16px;
  --pf-v5-global--palette--blue-50: var(--vda-ember-tint);
  --pf-v5-global--palette--blue-100: var(--vda-ember-tint);
  --pf-v5-global--palette--blue-300: var(--vda-ember);
  --pf-v5-global--palette--blue-400: var(--vda-ember);
  --pf-v5-global--palette--blue-500: var(--vda-ember-ink);
  --pf-v5-global--palette--blue-600: var(--vda-ember-ink);
  --pf-v5-global--focus-color--100: var(--vda-ember);
  --pf-v5-global--link--TextDecoration: none;
}

body, #app { background: var(--vda-bg); color: var(--vda-ink); font-family: var(--vda-font); -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--vda-ember) 45%, transparent) !important; outline-offset: 2px; }

/* Loading screen, before the app has mounted. */
.keycloak__loading-container { background: var(--vda-bg) !important; color: var(--vda-ink) !important; font-family: var(--vda-font); }
.keycloak__loading-container .pf-v5-c-spinner { --pf-v5-c-spinner--Color: var(--vda-ember); }

/* ---------------------------------------------------------------- masthead */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--vda-bar);
  --pf-v5-c-masthead--m-display-inline--BackgroundColor: var(--vda-bar);
  --pf-v5-c-masthead__toggle--c-button--Color: var(--vda-ink-2);
  background: var(--vda-bar); border-bottom: 1px solid var(--vda-line); color: var(--vda-ink);
}
.pf-v5-c-masthead .pf-v5-c-button, .pf-v5-c-masthead .pf-v5-c-menu-toggle, #nav-toggle { color: var(--vda-ink-2) !important; }
.pf-v5-c-masthead .pf-v5-c-menu-toggle { color: var(--vda-ink) !important; }
.pf-v5-c-masthead__brand img, .pf-v5-c-brand { height: 30px; width: auto; max-height: 30px; }
/* The engine draws its own mark when no logo is set; ours is a file, so there is nothing to hide, but never let a stray stock logo show. */
.pf-v5-c-masthead__brand img[src*="keycloak"] { display: none; }

/* ------------------------------------------------------------------ sidebar */
.pf-v5-c-page__sidebar { --pf-v5-c-page__sidebar--BackgroundColor: var(--vda-bar); background: var(--vda-bar); border-inline-end: 1px solid var(--vda-line); }
.pf-v5-c-nav { --pf-v5-c-nav--BackgroundColor: transparent; background: transparent; }
.pf-v5-c-nav__link, .pf-v5-c-nav__item > .pf-v5-c-nav__link {
  color: var(--vda-ink-2); font-weight: 600; border-radius: 10px; margin-inline: 12px; width: auto;
  --pf-v5-c-nav__link--PaddingTop: 10px; --pf-v5-c-nav__link--PaddingBottom: 10px;
  --pf-v5-c-nav__link--before--BorderColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--vda-chip);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--vda-ember-tint);
  --pf-v5-c-nav__link--m-current--Color: var(--vda-ember-ink);
}
.pf-v5-c-nav__link:hover { background: var(--vda-chip); color: var(--vda-ink); }
.pf-v5-c-nav__link.pf-m-current, .pf-v5-c-nav__link[aria-current="page"], .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link { background: var(--vda-ember-tint); color: var(--vda-ember-ink); }
.pf-v5-c-nav__link::before, .pf-v5-c-nav__link::after { border: 0 !important; }
.pf-v5-c-nav__item, .pf-v5-c-nav__item.pf-m-expandable, .pf-v5-c-nav__item.pf-m-expanded { border: 0 !important; --pf-v5-c-nav__item--m-expandable--BorderBottomColor: transparent; }
.pf-v5-c-nav__item::before, .pf-v5-c-nav__item::after { content: none !important; border: 0 !important; }
.pf-v5-c-nav__list { padding-block: 12px; }
.pf-v5-c-nav__subnav { background: transparent; }

/* --------------------------------------------------------------- page body */
.pf-v5-c-page__main { background: var(--vda-bg); }
.pf-v5-c-page__main-section, .pf-v5-c-page__main-breadcrumb { background: transparent; }
.pf-v5-c-page__main-section { --pf-v5-c-page__main-section--BackgroundColor: transparent; }
h1, h2, h3, .pf-v5-c-title { font-family: var(--vda-font); letter-spacing: -.02em; color: var(--vda-ink); }
h1.pf-v5-c-title, .pf-v5-c-content h1 { font-weight: 700; }
.pf-v5-c-content, .pf-v5-c-content p, .pf-v5-c-form__label-text, .pf-v5-c-description-list__text { font-family: var(--vda-font); }
.pf-v5-c-content { color: var(--vda-ink-2); }

.pf-v5-c-card, .pf-v5-c-panel, .pf-v5-c-data-list, .pf-v5-c-table {
  --pf-v5-c-card--BackgroundColor: var(--vda-card);
  background: var(--vda-card); color: var(--vda-ink);
}
.pf-v5-c-card { border: 1px solid var(--vda-line); border-radius: 16px; box-shadow: var(--vda-sh-1); }
.pf-v5-c-card::before, .pf-v5-c-card::after { display: none; }
.pf-v5-c-data-list { border: 1px solid var(--vda-line); border-radius: 16px; overflow: hidden; }
.pf-v5-c-data-list__item-row, .pf-v5-c-data-list__item-content { padding-block: 8px; align-items: center; }
.pf-v5-c-data-list__item { border-block-start-color: var(--vda-line); }
.pf-v5-c-data-list__item { background: var(--vda-card); border-color: var(--vda-line); }
.pf-v5-c-table { --pf-v5-c-table--BackgroundColor: var(--vda-card); --pf-v5-c-table--BorderColor: var(--vda-line); }
.pf-v5-c-table thead th { color: var(--vda-ink-3); font-weight: 600; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.pf-v5-c-divider::after { background-color: var(--vda-line); }
.pf-v5-c-jump-links__link { color: var(--vda-ink-2); }
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link { color: var(--vda-ember-ink); }
.pf-v5-c-jump-links__item.pf-m-current .pf-v5-c-jump-links__link::before { border-color: var(--vda-ember); }

/* ----------------------------------------------------------------- buttons */
.pf-v5-c-button { font-family: var(--vda-font); font-weight: 600; border-radius: 999px; --pf-v5-c-button--BorderRadius: 999px; }
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--vda-ember);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--vda-ember-hover);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--vda-ember-hover);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--vda-ember-hover);
  --pf-v5-c-button--m-primary--Color: #fff;
  background: var(--vda-ember); color: #fff; box-shadow: 0 6px 16px -4px rgba(217, 45, 32, .35);
  padding-inline: 20px;
}
.pf-v5-c-button.pf-m-primary:hover { background: var(--vda-ember-hover); color: #fff; }
.pf-v5-c-button.pf-m-secondary, .pf-v5-c-button.pf-m-control {
  --pf-v5-c-button--m-secondary--Color: var(--vda-ink);
  --pf-v5-c-button--m-secondary--BorderColor: var(--vda-line-2);
  --pf-v5-c-button--m-secondary--hover--Color: var(--vda-ink);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--vda-ink-3);
  color: var(--vda-ink); background: var(--vda-field); border: 1px solid var(--vda-line-2); box-shadow: var(--vda-sh-1);
}
.pf-v5-c-button.pf-m-secondary::after, .pf-v5-c-button.pf-m-control::after { border: 0; }
.pf-v5-c-button.pf-m-secondary:hover { background: var(--vda-chip); }
.pf-v5-c-button.pf-m-link, .pf-v5-c-button.pf-m-link.pf-m-inline { color: var(--vda-ember-ink); }
.pf-v5-c-button.pf-m-link:hover { color: var(--vda-ember-hover); }
.pf-v5-c-button.pf-m-danger { --pf-v5-c-button--m-danger--BackgroundColor: var(--vda-ember-ink); border-radius: 999px; }
.pf-v5-c-button.pf-m-plain { border-radius: 10px; }

/* ------------------------------------------------------------------- forms */
.pf-v5-c-form-control, .pf-v5-c-form-control input, .pf-v5-c-form-control select, .pf-v5-c-form-control textarea,
.pf-v5-c-text-input-group { font-family: var(--vda-font); color: var(--vda-ink); }
.pf-v5-c-form-control {
  --pf-v5-c-form-control--BackgroundColor: var(--vda-field);
  --pf-v5-c-form-control--BorderColor: var(--vda-line-2);
  --pf-v5-c-form-control--BorderRadius: 12px;
  --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--vda-chip);
  --pf-v5-c-form-control--m-readonly--Color: var(--vda-ink-2);
  --pf-v5-c-form-control--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--hover--after--BorderBottomWidth: 0;
  --pf-v5-c-form-control--focus--after--BorderBottomWidth: 0;
  border: 1px solid var(--vda-line-2); border-radius: 12px; background: var(--vda-field); box-shadow: var(--vda-sh-1);
}
.pf-v5-c-form-control::before, .pf-v5-c-form-control::after { display: none; }
.pf-v5-c-form-control:focus-within, .pf-v5-c-form-control:focus { border-color: var(--vda-ember); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vda-ember) 14%, transparent); }
.pf-v5-c-form-control[readonly], .pf-v5-c-form-control.pf-m-disabled, .pf-v5-c-form-control:disabled { background: var(--vda-chip); color: var(--vda-ink-2); }
.pf-v5-c-form__label-text { font-weight: 600; color: var(--vda-ink); }
.pf-v5-c-form__label-required { color: var(--vda-ember); }
.pf-v5-c-check__input, .pf-v5-c-radio__input, .pf-v5-c-switch__input { accent-color: var(--vda-ember); }
.pf-v5-c-switch { --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--vda-ember); --pf-v5-c-switch__input--checked__toggle--before--TranslateX: 1.2rem; }
.pf-v5-c-helper-text__item.pf-m-error { --pf-v5-c-helper-text__item-text--Color: var(--vda-ember-ink); }
.pf-v5-c-form-control[aria-invalid="true"], .pf-v5-c-form-control.pf-m-error { border-color: var(--vda-ember); }

/* Dropdowns and the user menu */
.pf-v5-c-menu, .pf-v5-c-dropdown__menu, .pf-v5-c-select__menu {
  --pf-v5-c-menu--BackgroundColor: var(--vda-card);
  background: var(--vda-card); color: var(--vda-ink); border: 1px solid var(--vda-line); border-radius: 12px; box-shadow: var(--vda-sh-2);
}
.pf-v5-c-menu__item:hover, .pf-v5-c-menu__list-item:hover { background-color: var(--vda-chip); }
.pf-v5-c-menu-toggle { --pf-v5-c-menu-toggle--BorderColor: var(--vda-line-2); border-radius: 999px; }
.pf-v5-c-menu-toggle::before { border-color: var(--vda-line-2); border-radius: 999px; }
.pf-v5-c-avatar { border: 1px solid var(--vda-line); }

/* ------------------------------------------------------- alerts and labels */
.pf-v5-c-alert { border-radius: 12px; border: 1px solid var(--vda-line); box-shadow: var(--vda-sh-1); background: var(--vda-card); color: var(--vda-ink); }
.pf-v5-c-alert.pf-m-success { --pf-v5-c-alert--m-success--BackgroundColor: var(--vda-ok-tint); background: var(--vda-ok-tint); }
.pf-v5-c-alert.pf-m-danger { background: var(--vda-ember-tint); }
.pf-v5-c-alert.pf-m-warning { background: var(--vda-warn-tint); }
.pf-v5-c-alert.pf-m-info { background: var(--vda-info-tint); }
.pf-v5-c-alert__title { color: var(--vda-ink); }
.pf-v5-c-label { border-radius: 999px; --pf-v5-c-label--BackgroundColor: var(--vda-chip); --pf-v5-c-label__content--Color: var(--vda-ink); }
.pf-v5-c-label.pf-m-blue { --pf-v5-c-label--BackgroundColor: var(--vda-info-tint); --pf-v5-c-label__content--Color: var(--vda-info); }
.pf-v5-c-label.pf-m-green { --pf-v5-c-label--BackgroundColor: var(--vda-ok-tint); --pf-v5-c-label__content--Color: var(--vda-ok); }
.pf-v5-c-label.pf-m-red { --pf-v5-c-label--BackgroundColor: var(--vda-ember-tint); --pf-v5-c-label__content--Color: var(--vda-ember-ink); }
.pf-v5-c-modal-box { background: var(--vda-card); color: var(--vda-ink); border-radius: 16px; border: 1px solid var(--vda-line); box-shadow: var(--vda-sh-2); }
.pf-v5-c-empty-state__icon { color: var(--vda-ink-3); }

@media (max-width: 768px) {
  .pf-v5-c-masthead__brand img, .pf-v5-c-brand { height: 26px; }
  .pf-v5-c-page__main-section { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation-duration: .01ms !important; } }

/* Dark: the dark wordmark, and a masthead that is one surface instead of a
 * bar with a black block behind the brand. */
.pf-v5-c-masthead__main, .pf-v5-c-masthead__content, .pf-v5-c-masthead__brand { background: transparent; }
:root.pf-v5-theme-dark .pf-v5-c-masthead__brand img { content: url(../../../login/vord/img/embernet-logo-dark.png); }
.pf-v5-c-toolbar, .pf-v5-c-masthead .pf-v5-c-toolbar { background: transparent !important; }