/* Siemens AG Corporate Brand Theme - dark color schema.
 *
 * Derived from the live Siemens Industrial Experience design system
 * (https://ix.siemens.io), which is the only place the proprietary "brand"
 * theme is exposed. The @siemens/ix npm package ships only the "classic"
 * themes, so we layer the exact brand dark tokens on top of the generic
 * [data-ix-theme] base that siemens-ix.css provides.
 *
 * Activation requires <html data-ix-theme="brand" data-ix-color-schema="dark">.
 * src/theme/syncTheme.ts keeps data-ix-theme in sync with data-ix-color-schema
 * (brand for dark, classic for light) since IxMenu's "toggle theme" control
 * only flips data-ix-color-schema; only the dark schema is defined here.
 */

[data-ix-theme="brand"][data-ix-color-schema="dark"] {
  --theme-name: brand;

  --theme-color-schema: dark;
  --theme-font-sans: "Siemens Sans";
  --theme-font-code: "JetBrains Mono";

  /* Surfaces */
  --theme-color-0: #00002800;
  --theme-color-1: #01013d;
  --theme-color-1--active: #40405e;
  --theme-color-1--hover: #333353;
  --theme-color-2: #23233c;
  --theme-color-3: #23233c;
  --theme-color-4: #23233c;
  --theme-color-5: #4c4c68;
  --theme-color-6: #66667e;
  --theme-color-7: #7d8099;
  --theme-color-8: #e5e5e9;

  /* Text */
  --theme-color-std-text: #fff;
  --theme-color-soft-text: #b3b3be;
  --theme-color-weak-text: #66667e;
  --theme-color-inv-std-text: #000028;
  --theme-color-inv-soft-text: #4c4c68;
  --theme-color-inv-weak-text: #9999a9;
  --theme-color-inv-contrast-text: #000;
  --theme-color-contrast-text: #fff;
  --theme-color-contrast-bdr: #fff;

  /* Borders */
  --theme-color-std-bdr: #9999a9;
  --theme-color-soft-bdr: #7d8099;
  --theme-color-weak-bdr: #40405e;
  --theme-color-x-weak-bdr: #333353;
  --theme-color-hard-bdr: #b3b3be;

  /* Status */
  --theme-color-primary: #0cc;
  --theme-color-primary--hover: #00ffb9;
  --theme-color-primary--active: #00e5aa;
  --theme-color-primary--disabled: #00cccc73;
  --theme-color-primary--contrast: #000028;
  --theme-color-secondary: #00002800;
  --theme-color-secondary--hover: #00333e;
  --theme-color-secondary--active: #001f39;
  --theme-color-dynamic: #00ffb9;
  --theme-color-dynamic--hover: #00e5aa;
  --theme-color-dynamic--active: #00997f;
  --theme-color-dynamic-alt: #00ffb9;
  --theme-color-dynamic-alt--hover: #00e5aa;
  --theme-color-dynamic-alt--active: #00997f;
  --theme-color-info: #206ed9;
  --theme-color-info--hover: #1f60b9;
  --theme-color-info--active: #1e5299;
  --theme-color-info--contrast: #fff;
  --theme-color-info-40: #206ed966;
  --theme-color-success: #28bf66;
  --theme-color-success--hover: #4dd384;
  --theme-color-success--active: #72e6a3;
  --theme-color-success--contrast: #000028;
  --theme-color-success-40: #28bf6666;
  --theme-color-warning: #ffd732;
  --theme-color-warning--hover: #edbf00;
  --theme-color-warning--active: #ba9600;
  --theme-color-warning--contrast: #000028;
  --theme-color-warning-10: #ffd7321a;
  --theme-color-warning-40: #ffd73266;
  --theme-color-warning-bdr: #ffd732;
  --theme-color-warning-text: #ffd00f;
  --theme-color-alarm: #d72339;
  --theme-color-alarm--hover: #bf162e;
  --theme-color-alarm--active: #a60823;
  --theme-color-alarm--contrast: #fff;
  --theme-color-alarm-10: #d723391a;
  --theme-color-alarm-40: #d7233966;
  --theme-color-alarm-bdr: #d72339;
  --theme-color-alarm-text: #ff8e9c;
  --theme-color-critical: #ff9000;
  --theme-color-critical--hover: #e37200;
  --theme-color-critical--active: #c75300;
  --theme-color-critical--contrast: #000028;
  --theme-color-critical-40: #ff900066;
  --theme-color-neutral: #b3b3be;
  --theme-color-neutral--hover: #9999a9;
  --theme-color-neutral--active: #7d8099;
  --theme-color-neutral--contrast: #000028;
  --theme-color-neutral-40: #b2b2bd66;
  --theme-color-focus-bdr: #199fff;

  /* Ghost / translucent component surfaces */
  --theme-color-ghost: #00002800;
  --theme-color-ghost--hover: var(--theme-color-1--hover);
  --theme-color-ghost--active: var(--theme-color-1--active);
  --theme-color-ghost--selected: var(--theme-color-1--active);
  --theme-color-ghost--selected-hover: var(--theme-color-1--hover);
  --theme-color-ghost--selected-active: var(--theme-color-1--active);
  --theme-color-ghost-alt: var(--theme-color-2);
  --theme-color-ghost-alt--hover: var(--theme-color-1--hover);
  --theme-color-ghost-alt--active: var(--theme-color-1--active);
  --theme-color-ghost-alt--selected: var(--theme-color-1--active);
  --theme-color-ghost-alt--selected-hover: var(--theme-color-1--hover);
  --theme-color-ghost-alt--selected-active: var(--theme-color-1--active);
  --theme-color-ghost-primary--hover: #00ffb91f;
  --theme-color-ghost-primary--active: #00736926;

  /* Component surfaces */
  --theme-color-component-1: var(--theme-color-2);
  --theme-color-component-1--hover: var(--theme-color-1--hover);
  --theme-color-component-1--active: var(--theme-color-1--active);
  --theme-color-component-2: #ffffff26;
  --theme-color-component-3: #ffffff4d;
  --theme-color-component-4: #ffffff73;
  --theme-color-component-5: #fff9;
  --theme-color-component-6: #ffffffbf;
  --theme-color-component-7: #16565c;
  --theme-color-component-7--hover: #00333e;
  --theme-color-component-7--active: #001f39;
  --theme-color-component-8: #001f39;
  --theme-color-component-8--hover: #001f39;
  --theme-color-component-9: #00ffb9;
  --theme-color-component-9--hover: #00e5aa;
  --theme-color-component-9--active: #00997f;
  --theme-color-component-9--disabled: #00ffb94d;
  --theme-color-component-10: #00ffb9bf;
  --theme-color-component-10--hover: #00e5aabf;
  --theme-color-component-10--active: #00997fbf;
  --theme-color-component-10--disabled: #00ffb933;
  --theme-color-component-11: #66667e33;
  --theme-color-component-error: #42000c;
  --theme-color-component-info: #193966;
  --theme-color-component-warning: #4d3901;

  /* Backdrops / overlays / lightbox */
  --theme-color-backdrop: #000028d9;
  --theme-color-backdrop-3: #161632d9;
  --theme-color-lightbox: #000028a6;

  /* Shadows */
  --theme-color-shadow-1: #0009;
  --theme-color-shadow-2: #000;
  --theme-color-shadow-3: #0009;
  --theme-inset-shadow-1: inset 0 2px 4px 0 #0009;
  --theme-shadow-1: 0 2px 2px 0 #000, 0 1px 1px 0 #0009;
  --theme-shadow-2: -4px 0 8px 0 #000, 4px 0 8px 0 #000, 0 0 16px 0 #0009;
  --theme-shadow-3: 0 2px 6px 0 #000, 0 0 8px 0 #0009;
  --theme-shadow-4: 0 0 2px 0 #000, 0 4px 8px 0 #0009, 0 12px 18px 0 #0009;

  /* Brand assets */
  --theme-color-logo: #fff;
  --theme-color-logo-login: #fff;
  --theme-company-logo: company-logo;
  --theme-color-gradient-effect-1: #00ffb9;
  --theme-color-gradient-effect-2: #0cc;
}

/* Brand tokens for the sign-in surfaces. Centralised so the same teal is used
 * consistently everywhere instead of a handful of scattered hex literals. These are
 * defined on :root so they're available to both light and dark schema (the auth
 * surface intentionally keeps a fixed brand look). */
:root {
  --api4data-brand-teal: #168a8b;
  --api4data-brand-teal-hover: #126f70;
  --api4data-brand-text-on-teal: #ffffff;
}

html,
body,
#app {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-content:focus,
#main-content:focus-within {
  outline: var(--theme-color-focus-bdr);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

ix-application-header {
  min-height: 5.5rem;
  align-items: center;
   padding-right: 1.5rem;
  --theme-ms-1: 1.25rem;
  --theme-font-weight-normal: 600;
}

/* Sits immediately left of the avatar in the application header. */
ix-application-header .environment-indicator {
  margin-right: 1rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}

.environment-indicator__title {
  font-size: 0.75rem;
  font-weight: 800;
  color: #168a8b;
}

.environment-indicator__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--theme-color-std-text);
}

ix-avatar ix-dropdown-item {
  font-size: 0.875rem;
  --ix-dropdown-item-height: 2rem;
}

.TopicSettings-module__page__Ixqov {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.TopicSettings-module__layout__bdVgW {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  position: relative;
}

.TopicSettings-module__layoutPaneLayout__AEKPE {
  height: 100%;
}

.TopicSettings-module__mainContent__Dr3gd {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  box-sizing: border-box;
  min-height: 0;
}

.TopicSettings-module__headerActions__j2j0G {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 1.5rem;
}

.TopicSettings-module__gridContainer__HjPpT {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.TopicSettings-module__gridContainerFit__qqH_X {
  flex: 0 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.TopicSettings-module__gridContainer__HjPpT .ag-header {
  background-color: var(--theme-color-component-1);
}

.TopicSettings-module__gridContainer__HjPpT .ag-row {
  background-color: var(--theme-color-2);
}

.TopicSettings-module__gridContainer__HjPpT .ag-row-odd {
  background-color: var(--theme-color-2);
}

.TopicSettings-module__emptyState__YharI {
  margin-top: 1.5rem;
  padding: 2rem;
  text-align: center;
}

.TopicSettings-module__actionsCell__O_vq2 {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 100%;
}

/*
  A failing trigger is the one thing in this grid that needs acting on, and
  "PROBLEM: …" reads as just more text at a glance. The alarm colour comes from
  the iX theme, so this stays correct in both light and dark brands.
*/
.TopicSettings-module__syncStatusProblem__vRZC6 {
  color: var(--theme-color-alarm-text, var(--theme-color-alarm, #ff5c5c));
}

/*
  A topic waiting for its synchronization date is idle on purpose, not broken.
  Muted rather than coloured so it reads as "nothing to do here yet" and leaves
  the alarm colour above meaning exactly one thing.
*/
.TopicSettings-module__syncStatusScheduled__y6_2t {
  color: var(--theme-color-soft-text, var(--theme-color-std-text, #9aa0a6));
  font-style: italic;
}

.TopicSettings-module__form__bM28N {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.TopicSettings-module__field__HVz1k {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.TopicSettings-module__fieldLabel__f8OHi {
  font-size: var(--theme-x-small, 0.75rem);
  font-weight: 600;
  color: var(--theme-color-std-text);
}

.TopicSettings-module__formActions___FhYX {
  display: flex;
  gap: 0.75rem;
  margin-top: 0.5rem;
  justify-content: flex-end;
}

.TopicSettings-module__sidePanelBody__oZW5P {
  padding: 1.5rem;
  background-color: var(--theme-color-2);
  min-height: 100%;
  box-sizing: border-box;
}

.TopicSettings-module__paneHeaderActions__bn02v {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  margin-right: 0;
}