/*
 * Highview Logic brand for Zammad.
 * Injected into every Zammad page by branding/nginx-brand.conf. It only overrides Zammad's own
 * color variables plus a few login-page rules, so a Zammad update rarely breaks it.
 * After editing, bump ?v= in branding/nginx-brand.conf, then: docker compose up -d --force-recreate zammad-nginx
 *
 * Brand: cyan #00D8EC, ink #0C1214. Cyan is too light for text on white (1.6:1), so light-mode
 * text links use deep teal #007C8A (4.9:1); cyan is used for fills with ink text on top (11:1).
 */
:root {
  --hvl-cyan: #00d8ec;
  --hvl-cyan-hover: #00bfd2;
  --hvl-teal: #007c8a;
  --hvl-teal-hover: #00636e;
  --hvl-ink: #0c1214;
  --hvl-ink-2: #121b1e;
  --hvl-ink-3: #1a2629;

  /* Primary buttons: cyan with ink text */
  --button-primary-background: var(--hvl-cyan);
  --button-primary-background-active: var(--hvl-cyan-hover);
  --button-primary-text: var(--hvl-ink);
  --text-button-primary: var(--hvl-teal);
  --text-button-primary-active: var(--hvl-teal-hover);

  /* Links, nav, focus and selection */
  --text-link: var(--hvl-teal);
  --text-nav: var(--hvl-teal);
  --highlight: var(--hvl-cyan);
  --border-highlight: #00b4c6;
  --background-highlight: #d4f7fb;
  --shadow-highlight: #b8f1f8;
  --text-muted-highlight: #c9f5fa;
  --backdrop-clue-start: rgba(0, 216, 236, 0.1);
  --backdrop-clue-end: rgba(0, 216, 236, 0.9);
  --background-article-customer: #e6f7f9;
  --background-article-customer-meta: #f1fbfc;
  --border-article-customer: #cdeef2;
  --border-article-customer-selected: #b0e4ea;

  /* Left navigation and full-screen pages (login): brand ink */
  --background-tertiary: var(--hvl-ink-2);
  --background-quaternary: var(--hvl-ink);
  --background-active: var(--hvl-ink-2);
  --menu-background-active: var(--hvl-ink-3);
  --menu-text-active: #ffffff;
  --menu-switch-background: #05090a;
}

[data-theme=dark] {
  --text-link: var(--hvl-cyan);
  --text-nav: #d9eef1;
  --text-button-primary: var(--hvl-cyan);
  --text-button-primary-active: var(--hvl-cyan-hover);
  --highlight: var(--hvl-cyan);
  --background-active: #0f4a52;
  --border-highlight: #00b4c6;
  --background-highlight: #123d43;
  --shadow-highlight: #145a63;
  --background-article-customer: #1f3236;
  --background-article-customer-meta: #1c2c30;
  --border-article-customer: #284247;
  --border-article-customer-selected: #2f5056;

  /* Tint Zammad's dark grays toward the brand ink */
  --background-primary: #161e21;
  --background-primary-alt: #192326;
  --background-secondary: #1c272a;
  --background-secondary-hover: #182225;
  --background-tertiary: #11191c;
  --background-quaternary: #0b1012;
  --background-popover: #26353a;
  --border: #111a1d;
  --border-alt: #142023;
  --menu-background-active: var(--hvl-ink-3);
}

/* Mountain mark in place of Zammad's bird (top of the left navigation; still opens notifications) */
.navigation .search .logo .icon-logo {
  visibility: hidden;
}
.navigation .search .logo {
  background: url(/assets/hvl/mark-cyan.png?v=4) center / 38px auto no-repeat;
}

/* Loading screen: mountain mark instead of Zammad's bird */
.splash .icon-logo {
  visibility: hidden;
  background: url(/assets/hvl/mark-cyan.png?v=6) center / contain no-repeat;
}

/* "New ticket" + buttons in brand cyan (other green success states stay green) */
.navigation .icon-plus.user-menu-icon {
  fill: var(--hvl-cyan);
}
.btn--success.btn--quad {
  background: var(--hvl-cyan);
  color: var(--hvl-ink);
}
.btn--success.btn--quad:hover {
  background: var(--hvl-cyan-hover);
}
.btn--success.btn--quad .icon {
  fill: var(--hvl-ink);
}

/* Active item in the left navigation gets a cyan bar */
.menu-item.is-active,
.tasks .task.is-active {
  box-shadow: inset 3px 0 0 var(--hvl-cyan);
}

/* Sign-in page: brand ink background, cyan accents */
.login .hero-unit,
.signup .hero-unit,
.reset_password .hero-unit {
  border-top: 4px solid var(--hvl-cyan);
}
/* The stored logo has white text (for dark cards). Draw the right version for the theme instead. */
.hero-unit img.company-logo {
  display: none;
}
.hero-unit:has(> img.company-logo)::before {
  content: "";
  display: block;
  width: 320px;
  max-width: 100%;
  aspect-ratio: 1200 / 168;
  margin: 8px auto 20px;
  background: url(/assets/hvl/logo-on-light.png?v=3) center / contain no-repeat;
}
[data-theme=dark] .hero-unit:has(> img.company-logo)::before {
  background-image: url(/assets/hvl/logo-on-dark.png?v=3);
}

/* Keyboard focus ring in brand color */
:focus-visible {
  outline-color: var(--hvl-cyan);
}