/* =============================================================================
 * FOGNETx Remote Support — Zammad skin  ·  Direction "Slate"
 * -----------------------------------------------------------------------------
 * A Level-2 (CSS-only) theme for the Zammad agent + customer interface. NO
 * Zammad source is forked and NO asset is patched: this stylesheet is injected
 * into the served HTML by nginx (sub_filter) in the FOGNETx overlay image —
 * see deploy/zammad/docker/fognetx-zammad-skin.sh.
 *
 * That injection point matters for two reasons:
 *   - Zammad's supported custom-CSS path (app/assets/stylesheets/custom/) is
 *     compiled by `require_tree ./custom/` at assets:precompile time, and the
 *     shipped image has no node/pnpm — a file dropped into a running container
 *     does nothing.
 *   - Zammad is AGPL-3.0. Injecting at the HTTP layer keeps the application we
 *     serve byte-identical to upstream's, so no network-copyleft obligation is
 *     triggered. Keep it that way.
 *
 * HOW IT ATTACHES (verified against zammad@stable, app/assets/stylesheets/
 * zammad.scss, 2026-07-25):
 *   - The agent UI is already fully themed through CSS custom properties: ~105
 *     variables in `:root`, and a parallel set under `[data-theme='dark']` for
 *     the built-in dark appearance. Re-declaring those variables retargets the
 *     whole interface from one place — no selector chasing, and a Zammad
 *     release is a version bump rather than a reconciliation.
 *   - Only the handful of rules at the end reach past the variables, and they
 *     use stable, semantic class names (.login, .content, .tabsSidebar), never
 *     a hashed asset name.
 *
 * SCOPE / LIMITS
 *   - Appearance (light/dark) is a per-user setting in Zammad; CSS cannot force
 *     it. BOTH are branded here: dark gets the full Slate treatment, light gets
 *     brand colour, dark chrome and orange affordances on Zammad's light
 *     surfaces. Set the FOGNETx look as the default in the user profile.
 *   - The new Vue desktop UI at /desktop (still opt-in beta in 7.x) is NOT
 *     covered; it is a separate app and would need its own stylesheet.
 *   - Product name and logo are Zammad Foundation's marks and are replaced
 *     through the supported branding SETTINGS (see deploy/zammad/README.md),
 *     not by hiding them in CSS.
 * ========================================================================== */

@import url('fonts.css'); /* self-contained IBM Plex Sans + JetBrains Mono (base64 woff2) */

/* --- FOGNETx "Slate" palette (identical to the MeshCentral + TRMM skins) --- */
:root {
  --fx-bg:        #000000;
  --fx-surface:   #0A0A0A;
  --fx-surface2:  #111111;
  --fx-surface3:  #181818;
  --fx-line:      #1F1F1F;
  --fx-line2:     #2A2A2A;
  --fx-line-strong: #3A3A3A;

  --fx-fg:        #FAFAFA;
  --fx-fg2:       #A1A1A1;
  --fx-fg-dim:    #737373;
  --fx-fg-mute:   #525252;

  --fx-ax:        #F89818;   /* brand orange */
  --fx-ax-hi:     #FFAB35;
  --fx-ax-dim:    #7A4A0C;   /* brand as TEXT on a light surface (7.5:1 on white) */
  --fx-ax-soft:   rgba(248, 152, 24, 0.10);
  --fx-ax-text:   #1A1003;   /* text/icons ON an orange fill (8.5:1; white would be 2.2:1) */

  --fx-ok:   #34D399;
  --fx-warn: #FBBF24;
  --fx-crit: #F87171;

  --fx-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --fx-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* =============================================================================
 * LIGHT appearance — Zammad's default. Surfaces stay light (this is the
 * client-facing product and most agents work in daylight); the brand lands on
 * primary affordances, links, the nav rail and focus states.
 * ========================================================================== */
:root,
[data-theme='light'] {
  --button-primary-background:        var(--fx-ax);
  --button-primary-background-active: var(--fx-ax-hi);
  /* The contrast fix: Zammad defaults this to white, which is 2.2:1 on #F89818. */
  --button-primary-text:              var(--fx-ax-text);
  --text-button-primary:              var(--fx-ax-dim);
  --text-button-primary-active:       var(--fx-ax-dim);

  --text-link:        var(--fx-ax-dim);
  --text-nav:         var(--fx-ax-dim);
  --highlight:        var(--fx-ax);
  --border-highlight: var(--fx-ax);
  --shadow-highlight: var(--fx-ax-soft);
  --background-highlight: var(--fx-ax-soft);
  --text-muted-highlight: var(--fx-ax-dim);
  --backdrop-clue-start:  rgba(248, 152, 24, 0.10);
  --backdrop-clue-end:    rgba(248, 152, 24, 0.90);

  /* The left rail and the tab bar are the chrome that reads as "the product". */
  --background-tertiary:            var(--fx-surface);
  --background-quaternary:          var(--fx-bg);
  --background-active:              var(--fx-surface2);
  --menu-background-primary:        var(--fx-bg);
  --menu-background-primary-hover:  var(--fx-surface2);
  --menu-background-secondary:      var(--fx-surface);
  --menu-background-active:         var(--fx-ax);
  --menu-text:                      var(--fx-fg2);
  --menu-text-active:               var(--fx-ax-text);
  --menu-icon:                      var(--fx-fg-dim);
  --menu-switch-background:         var(--fx-bg);
  --menu-switch-pointer:            var(--fx-surface3);
  --menu-close-tab-background:      var(--fx-surface);
  --fullscreen-background:          var(--fx-bg);

  --interactive-primary: var(--fx-ax-dim);
}

/* =============================================================================
 * DARK appearance — the full Slate treatment. Zammad sets data-theme="dark" on
 * the document root when the user picks the dark appearance.
 * ========================================================================== */
[data-theme='dark'] {
  --button-primary-background:        var(--fx-ax);
  --button-primary-background-active: var(--fx-ax-hi);
  --button-primary-text:              var(--fx-ax-text);
  --text-button-primary:              var(--fx-ax);
  --text-button-primary-active:       var(--fx-ax-hi);
  --button-background:        rgba(255, 255, 255, 0.04);
  --button-background-active: rgba(255, 255, 255, 0.08);
  --button-action-color:      var(--fx-fg2);

  --background-primary:       var(--fx-bg);
  --background-primary-alt:   var(--fx-surface);
  --background-secondary:     var(--fx-surface);
  --background-secondary-hover: var(--fx-surface2);
  --background-tertiary:      var(--fx-surface2);
  --background-quaternary:    var(--fx-bg);
  --background-quaternary-alt: var(--fx-surface2);
  --background-popover:       var(--fx-surface2);
  --background-active:        var(--fx-surface3);
  --background-highlight:     var(--fx-ax-soft);
  --background-article-meta:  var(--fx-surface);
  --background-article-customer:      var(--fx-surface2);
  --background-article-customer-meta: var(--fx-surface);
  --background-modifier-border: var(--fx-line);
  --background-modifier-hover:  rgba(255, 255, 255, 0.06);
  --fullscreen-background:      var(--fx-bg);

  --text-normal:    var(--fx-fg);
  --text-muted:     var(--fx-fg2);
  --text-muted-alt: var(--fx-fg-dim);
  --text-muted-highlight: var(--fx-ax-hi);
  --text-inverted:  var(--fx-bg);
  --text-link:      var(--fx-ax);
  --text-nav:       var(--fx-fg2);
  --header-primary:   var(--fx-fg);
  --header-secondary: var(--fx-fg2);
  --nav-icon:         var(--fx-fg-dim);

  --highlight:        var(--fx-ax);
  --border-highlight: var(--fx-ax);
  --shadow-highlight: var(--fx-ax-soft);
  --backdrop-clue-start: rgba(248, 152, 24, 0.10);
  --backdrop-clue-end:   rgba(248, 152, 24, 0.90);

  --border:      var(--fx-line);
  --border-alt:  var(--fx-line2);
  --table-border: var(--fx-line2);
  --table-header-background: rgba(255, 255, 255, 0.04);
  --border-article-customer: var(--fx-line);
  --border-article-customer-selected: var(--fx-line-strong);

  --interactive-primary:    var(--fx-fg);
  --interactive-muted:      var(--fx-fg-dim);
  --interactive-muted-alt:  var(--fx-fg-mute);
  --interactive-muted-active: var(--fx-fg2);

  --menu-background-primary:       var(--fx-bg);
  --menu-background-primary-hover: var(--fx-surface2);
  --menu-background-secondary:     var(--fx-surface);
  --menu-background-active:        var(--fx-ax);
  --menu-text:                     var(--fx-fg2);
  --menu-text-active:              var(--fx-ax-text);
  --menu-icon:                     var(--fx-fg-dim);
  --menu-switch-background:        var(--fx-bg);
  --menu-switch-pointer:           var(--fx-surface3);
  --menu-close-tab-background:     var(--fx-surface2);

  --tag-text:       var(--fx-fg2);
  --tag-background: var(--fx-surface3);
  --file-icon-background: var(--fx-surface2);
  --file-icon-color:      var(--fx-line-strong);

  --elevation-stroke: 0 1px var(--fx-line);
  --elevation-low:    0 1px 5px rgba(0, 0, 0, 0.5);
  --elevation-high:   0 1px 14px rgba(0, 0, 0, 0.7);

  /* Semantic status colours, aligned to the palette the other two consoles use.
     Left as distinct hues on purpose — these encode meaning, not brand. */
  --supergood-color: var(--fx-ok);
  --good-color:      var(--fx-ok);
  --ok-color:        var(--fx-warn);
  --bad-color:       var(--fx-warn);
  --superbad-color:  var(--fx-crit);
  --danger-color:    var(--fx-crit);
  --ghost-color:     var(--fx-fg-mute);
  --pending-color:   var(--fx-fg-dim);
}

/* =============================================================================
 * The few things the variables do not reach.
 * ========================================================================== */

/* Typography. Zammad sets font-family on body and on form controls separately,
   so both are named here; everything else inherits. */
body,
input, select, textarea, button,
.js-search, .searchfield input {
  font-family: var(--fx-font) !important;
}
code, pre, kbd, samp, .js-textarea code {
  font-family: var(--fx-mono) !important;
}

/* Focus ring: keyboard navigation must stay obvious against dark chrome. */
:focus-visible {
  outline: 2px solid var(--fx-ax);
  outline-offset: 1px;
}

/* The login / customer-portal screen is the first FOGNETx impression, and it
   sits outside the app chrome the variables cover. */
.login {
  background: var(--fx-bg);
  color: var(--fx-fg);
}
.login .logo img { max-height: 64px; }