/* ============================================================
   Zammad theme overrides — live-experts.com palette
   File:  /srv/zammad-custom/custom.css  (host-editable, live)
   Loaded via nginx sub_filter at /custom.css.  No restart
   needed after editing — just hard-refresh the browser.
   ============================================================ */

:root {
  /* live-experts brand */
  --le-primary:        #7c5cff;
  --le-primary-hover:  #776cdd;
  --le-primary-active: #5a42b5;
  --le-primary-light:  #ede9ff;
  --le-primary-tint:   #f9f6ff;
  --le-accent:         #FFB906;
  --le-text-dark:      #1a1433;
  --le-bg-dark:        #0e0a2a;
  --le-border-light:   #ddd6f7;

  /* Map common naming used by Zammad's modern Vue UI.
     If a color doesn't change after reload, inspect the
     element in DevTools and add the matching var name here. */
  --primary:           var(--le-primary);
  --primary-color:     var(--le-primary);
  --color-primary:     var(--le-primary);
  --accent-color:      var(--le-accent);
}

/* ===== Agent UI (legacy desktop, jQuery-based) ===== */

#navigation,
.main-navigation,
.navigation {
  background-color: var(--le-bg-dark) !important;
}

.btn--primary,
.btn-primary,
button.btn--primary,
.js-submit,
[type="submit"].btn,
[data-type="submit"] {
  background-color: var(--le-primary) !important;
  border-color: var(--le-primary) !important;
  color: #fff !important;
}

.btn--primary:hover,
.btn-primary:hover,
button.btn--primary:hover {
  background-color: var(--le-primary-hover) !important;
  border-color: var(--le-primary-hover) !important;
}

.btn--primary:active,
.btn--primary.is-active,
.btn-primary:active {
  background-color: var(--le-primary-active) !important;
  border-color: var(--le-primary-active) !important;
}

.is-active,
.active > a,
.nav-item.active,
.tab.active {
  color: var(--le-primary) !important;
}

a {
  color: var(--le-primary);
}
a:hover {
  color: var(--le-primary-hover);
}

input:focus,
select:focus,
textarea:focus,
.input:focus,
.form-control:focus {
  border-color: var(--le-primary) !important;
  box-shadow: 0 0 0 3px rgba(124, 92, 255, 0.18) !important;
  outline: none !important;
}

/* ===== Customer / mobile portal (Vue 3 modern) ===== */

[class*="bg-blue-"],
.bg-blue,
.bg-primary {
  background-color: var(--le-primary) !important;
}

[class*="text-blue-"],
.text-blue,
.text-primary {
  color: var(--le-primary) !important;
}

[class*="border-blue-"],
.border-blue {
  border-color: var(--le-primary) !important;
}

[class*="ring-blue-"],
.ring-blue {
  --tw-ring-color: var(--le-primary) !important;
}