/*
 * Envista brand overlay for Zammad.
 *
 * Injected into every proxied HTML response by the vendored chart's nginx sub_filter
 * (zammadConfig.nginx.customCssInject, default OFF — Dev only today) and served from the
 * ConfigMap mounted at /etc/nginx/envista.
 *
 * Palette: Navy #013B82, Blue #006EB9, Sky #00AEEF, deep navy tints #012756 / #061426.
 * Semantic status colours (red / green / yellow / orange) are deliberately NOT touched — they
 * carry meaning in ticket state, escalation and priority.
 *
 * Both Zammad UIs stamp their theme on the root element as `data-theme="light" | "dark"`, and
 * both follow the OS preference by default:
 *   - classic agent app (/, /#manage): CSS custom properties on `:root` / `[data-theme=dark]`
 *     (`--menu-*`, `--button-*`, `--text-*`) — this file overrides those tokens.
 *   - desktop app (/desktop): Tailwind v4 palette tokens on `:root,:host` (`--color-blue-800`,
 *     `--color-neutral-950`, …) consumed by compiled utility classes.
 * `html:root` / `html[data-theme="dark"]` carry one more specificity point than the app's own
 * `:root` / `[data-theme=dark]` blocks, so no `!important` is needed anywhere in this file.
 *
 * Contrast: every recoloured text/background pair below is >= 4.5:1.
 */

/* ---------------------------------------------------------------------------
 * Classic agent app — light theme
 * ------------------------------------------------------------------------- */
html:root {
  /* Left navigation rail (.navigation, .global-search-menu, .user-menu) and the task bar
     (.tasks, the search input). Zammad ships these dark in both themes; navy replaces the
     near-black. Menu text stays #bdbdbd = 5.7:1 on Navy. */
  --menu-background-primary: #013b82;
  --menu-background-secondary: #012756;

  /* Rail icons: Zammad's mid-grey glyph fill drops below 3:1 on navy, so lift it. */
  --menu-icon: hsl(0, 0%, 80%);
  --nav-icon: hsl(0, 0%, 80%);

  /* Primary buttons — and, through the chart's own aliases, the active/hovered menu item
     (--menu-background-active) and primary-coloured text (--text-button-primary).
     White on Blue = 5.3:1; Blue on white = 5.3:1 (Zammad's stock blue was 3.0:1). */
  --button-primary-background: #006eb9;
  --button-primary-background-active: #013b82;

  /* Links and nav pills. */
  --text-link: #006eb9;
  --text-nav: #006eb9;

  /* --highlight is used for text as well as accents in the light theme (CodeMirror tokens in
     the admin UI), so it takes Blue rather than Sky; Sky is reserved for the non-text accents
     below, where it reads as the brand highlight without carrying any text. */
  --highlight: #006eb9;

  /* Focus rings and selected-input borders — Sky. */
  --border-highlight: #00aeef;
}

/* ---------------------------------------------------------------------------
 * Classic agent app — dark theme (Zammad stamps data-theme="dark")
 * ------------------------------------------------------------------------- */
html[data-theme="dark"] {
  /* Keep the chrome dark; deep navy tints, not a forced light surface. */
  --menu-background-primary: #061426;
  --menu-background-secondary: #012756;

  /* Sky reads on dark (5.3:1 on the app's #2e2f33 surface); Blue does not. */
  --text-link: #00aeef;
  --highlight: #00aeef;
  --border-highlight: #00aeef;

  /* Stock dark aliases --background-active to --highlight and pairs it with white text; with
     Sky that would be 2.3:1, so pin the selected-row background to Blue (white = 5.3:1). */
  --background-active: #006eb9;
}

/* ---------------------------------------------------------------------------
 * Desktop app (/desktop) — Tailwind v4 palette tokens
 * ------------------------------------------------------------------------- */
html:root {
  /* blue-800 is the app's accent: link text, focus outlines, the active overview pill and
     primary button fills. #23a2cd -> Blue (white on it 5.3:1, it on white 5.3:1). */
  --color-blue-800: #006eb9;
  /* blue-850 is the hover-darker text pair for blue-800. */
  --color-blue-850: #013b82;
  /* blue-900 backs hovered rows in the dark chrome and dark-theme accent fills. */
  --color-blue-900: #012756;
  /* blue-600 is the dark-theme accent text/hover fill; Sky on the navy chrome = 5.8:1. */
  --color-blue-600: #00aeef;
}

/* The main sidebar ships as .bg-neutral-950 in BOTH themes (it is always dark chrome). An id
   selector out-specifies the utility class without touching the neutral palette, which is used
   for body text elsewhere. #012756 keeps the sidebar's muted #999 section headers at 5.2:1
   (Navy #013B82 would take them to 3.8:1). */
#main-sidebar {
  background-color: #012756;
}

html[data-theme="dark"] #main-sidebar {
  background-color: #061426;
}

/* ---------------------------------------------------------------------------
 * Belt-and-braces: OS dark preference where the app has not stamped a theme yet (first paint,
 * or a future build that drops the attribute). Skipped when the user has explicitly chosen
 * light, so an explicit preference always wins.
 * ------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --menu-background-primary: #061426;
    --menu-background-secondary: #012756;
    --text-link: #00aeef;
    --highlight: #00aeef;
    --border-highlight: #00aeef;
    --background-active: #006eb9;
  }

  html:not([data-theme="light"]) #main-sidebar {
    background-color: #061426;
  }
}