/*
 * Brand skin for the admin console.
 *
 * The same approach as `account/resources/css/connected-iot-account.css`, and for the same reason:
 * PatternFly design tokens are a public contract, the React markup underneath is not. Read that file
 * for the full rationale — this one differs only where the admin console's chrome does.
 *
 * Kept as a separate file rather than shared with the account theme: a theme's `styles` are resolved
 * against ITS OWN resources directory, so there is no path from `admin/` to a stylesheet living under
 * `account/`. Sharing would mean a build step to copy one into the other, and a copied file that
 * drifts is worse than two that are honestly separate.
 */

:root {
  --ciot-primary: #0072bc;
  --ciot-primary-deep: #005b96;
  --ciot-primary-light: #4db9ff;

  --pf-v5-global--primary-color--100: var(--ciot-primary);
  --pf-v5-global--primary-color--200: var(--ciot-primary-deep);
  --pf-v5-global--primary-color--300: var(--ciot-primary-deep);
  --pf-v5-global--active-color--100: var(--ciot-primary);
  --pf-v5-global--active-color--400: var(--ciot-primary-light);

  --pf-v5-global--link--Color: var(--ciot-primary-deep);
  --pf-v5-global--link--Color--hover: var(--ciot-primary);
  --pf-v5-global--link--Color--visited: var(--ciot-primary-deep);

  --pf-v5-global--BackgroundColor--dark-300: var(--ciot-primary-deep);
  --pf-v5-global--BorderColor--active: var(--ciot-primary);

  --pf-v5-global--danger-color--100: #dc2626;
  --pf-v5-global--success-color--100: #059669;
  --pf-v5-global--warning-color--100: #d97706;
  --pf-v5-global--info-color--100: var(--ciot-primary);
}

.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: #070f26;
  --pf-v5-c-masthead--Color: #e2e8f0;
  /* Both the variable AND the property. PatternFly's dark theme sets background-color on this
     element directly, so overriding only the token leaves the masthead black in dark mode. */
  background-color: #070f26;
  color: #e2e8f0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button {
  color: #e2e8f0;
}

.pf-v5-c-masthead img,
.pf-v5-c-brand {
  max-height: 32px;
  filter: drop-shadow(0 0 8px rgba(0, 114, 188, 0.5));
}

.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: #0b1430;
}

/* See the account theme for why this needs four variables and not one. */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--Color: var(--ciot-primary-light);
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(0, 114, 188, 0.22);
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(0, 114, 188, 0.12);
  --pf-v5-c-nav__link--focus--BackgroundColor: rgba(0, 114, 188, 0.12);
  --pf-v5-c-nav__link--active--BackgroundColor: rgba(0, 114, 188, 0.22);
  --pf-v5-c-nav__link--before--BorderColor: var(--ciot-primary-light);
  --pf-v5-c-nav__link--after--BorderColor: var(--ciot-primary-light);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current='page'] {
  color: var(--ciot-primary-light);
  background-color: rgba(0, 114, 188, 0.22);
}

:root.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--ciot-primary-light);
  --pf-v5-global--primary-color--200: var(--ciot-primary);
  --pf-v5-global--link--Color: var(--ciot-primary-light);
  --pf-v5-global--link--Color--hover: #7fccff;
  --pf-v5-global--link--Color--visited: var(--ciot-primary-light);
  --pf-v5-global--active-color--100: var(--ciot-primary-light);

  --pf-v5-global--danger-color--100: #f87171;
  --pf-v5-global--success-color--100: #34d399;
  --pf-v5-global--warning-color--100: #fbbf24;
  --pf-v5-global--info-color--100: var(--ciot-primary-light);
}

.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--ciot-primary);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--ciot-primary-deep);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--ciot-primary-deep);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--ciot-primary-deep);
  --pf-v5-c-button--m-primary--Color: #ffffff;
}