/*
 * 2WinScada theme for Zammad (plan P10 §5a). Injected by the host Nginx (sub_filter) after Zammad's own stylesheet; it
 * overrides Zammad's CSS custom properties and the branding areas below; application components stay as shipped. Values are
 * the palette of www.2winscada.com (site/app/assets/css/main.css) and docs.2winscada.com (Docs custom.css): logo blue
 * #4a66d4 / #3d56b8, light #8ea3f2 on dark, VitePress neutral greys. Contrast (WCAG AA): white on #4a66d4 5.07:1,
 * #4a66d4 on white 5.07:1 and on #f6f6f7 4.69:1, #8ea3f2 on #202127 6.63:1. Navigation text on dark: the softer,
 * less saturated #98a6d6 (6.70:1 on #202127); the logo blue there was only 3.17:1 and glared (user, 25 Oct 2026).
 * To switch the theme off, remove the sub_filter line in support.conf and reload Nginx.
 */
:root {
  --button-primary-background: #4a66d4;
  --button-primary-background-active: #3d56b8;
  --text-link: #4a66d4;
  --text-nav: #4a66d4;
  --highlight: #6f89eb;
  --border-highlight: #6f89eb;
  --background-highlight: #e7ecfc;
  --shadow-highlight: #d5ddfa;
  --text-muted-highlight: #e3e8fc;
  --background-article-customer: #eef1fd;
  --background-article-customer-meta: #f5f7fe;
  --border-article-customer: #dce3fb;
  --border-article-customer-selected: #c9d3f8;
  --backdrop-clue-start: rgb(74 102 212 / 0.1);
  --backdrop-clue-end: rgb(74 102 212 / 0.9);
  --background-primary: #f6f6f7;
  --background-secondary: #ffffff;
  /* Navigation column: the neutral charcoal of the site footer instead of Zammad's blue-grey slate. */
  --background-tertiary: #202127;
  --background-quaternary: #161618;
  --background-active: #202127;
  --border: #e2e2e3;
}

[data-theme=dark] {
  --button-primary-background: #4a66d4;
  --button-primary-background-active: #3d56b8;
  --text-link: #8ea3f2;
  /* Overview list and other nav pills; :root above would otherwise force the light theme's #4a66d4 here. */
  --text-nav: #98a6d6;
  --highlight: #8ea3f2;
  --border-highlight: #6f89eb;
  --background-highlight: #2a3152;
  --shadow-highlight: #38437a;
  --text-muted-highlight: #2a3152;
  --background-article-customer: #2a2e3d;
  --background-article-customer-meta: #252836;
  --border-article-customer: #353a4c;
  --border-article-customer-selected: #424a66;
  --background-primary: #1b1b1f;
  --background-secondary: #202127;
  --background-tertiary: #161618;
  --background-quaternary: #121214;
  --border: #2e2e32;
}

/* Navigation logo (agent UI, navigation.jst.eco): the 2Win mark instead of the Zammad bird. The bird keeps its box
   (42 x 36), so the layout and the notification counter stay in place. Light lettering: the column is dark in both
   themes. Zammad has no setting for this logo (product_logo is the login page's). */
#navigation .search .logo .icon-logo {
  visibility: hidden;
}

#navigation .search .logo {
  background: url(/2win-logo-nav.svg) center / contain no-repeat;
}

/* Loading screen: reuse the existing same-origin 2Win favicon (transparent, with a native 48px variant). Only the
   splash SVG's bird is hidden; the original
   loading message, no-JavaScript notice and Zammad attribution elsewhere remain intact. */
.splash > .icon-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  margin: 0;
  margin-inline-end: 12px;
  background: url(/favicon.ico?v=2win1) center / contain no-repeat;
}

.splash > .icon-logo > use {
  visibility: hidden;
}

/* System user: only its direct logo SVG is replaced. Personal photos, initials, VIP crowns and presence badges
   retain their original markup and sizing. Cover the system avatar's hard-coded white surface in dark mode. */
.avatar > .icon-logo {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: inherit;
  background: var(--background-secondary) url(/favicon.ico?v=2win1) center / 80% 80% no-repeat;
}

.avatar > .icon-logo > use {
  visibility: hidden;
}

/* Generated user avatars keep their initials and sizes, with a brand-colour surface instead of the blurred bird.
   Zammad writes a random background-position inline for its sprite; it must not offset this replacement gradient. */
.avatar--unique {
  background-image: linear-gradient(135deg, #4a66d4, #3d56b8);
  background-size: 100% 100%;
  background-position: center !important;
  color: #ffffff;
  text-shadow: none;
}

.table tr.is-grayed-out .avatar--unique {
  color: var(--text-normal);
}

/* Setup and import wizards use the same full-logo SVG class. Retain the element and its place in the wizard;
   replace only the drawing with our existing light-lettered logo for their dark background. */
.wizard-logo.icon-full-logo {
  width: 180px;
  height: 96px;
  flex-shrink: 0;
  margin: 0 0 16px;
  background: url(/2win-logo-nav.svg) center / contain no-repeat;
}

.wizard-logo.icon-full-logo > use {
  visibility: hidden;
}

/* Keep the original linked Zammad bird, wordmark and translated "Powered by" text. Size the attribution separately
   from the login form, using fullscreen text contrast in both themes and keyboard-visible links. */
.fullscreen .poweredBy {
  gap: 6px;
  margin: 20px 0 12px;
  color: var(--fullscreen-text);
  font-size: 12px;
  line-height: 20px;
}

.fullscreen .poweredBy > a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}

.fullscreen .poweredBy > a:focus-visible {
  /* Zammad sets outline: none !important on every link. Override only these attribution links. */
  outline: 2px solid currentColor !important;
  outline-offset: 3px;
  border-radius: 3px;
}

.fullscreen .poweredBy .icon-logo {
  width: 22px;
  height: 22px;
  margin: 0;
}

.fullscreen .poweredBy .logotype {
  width: 78px;
  height: 22px;
  margin: 0;
}