/* === Self-hosted Sora (CSP-safe, no fonts.googleapis.com dependency) === */
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xo6eeI7fM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-xo6eeIw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xo6eeI7fM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-xo6eeIw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xo6eeI7fM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-xo6eeIw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwWa-xo6eeI7fM.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/xMQ9uFFYT72X5wkB_18qmnndmSdSnh2BAfO5mnuyOo1lfiQwV6-xo6eeIw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* === Kenvo branding overlay === */
/*
 * Kenvo branding overlay for Zammad 7.x  ·  v2 (targeted)
 *
 * Injected by nginx sub_filter so it persists across `apt upgrade zammad`.
 * Source of truth: /var/www/kenvo-branding/custom.css
 *
 * v2 changes vs v1:
 *   - Targeted Zammad's actual class names from login.jst.eco (.login.fullscreen,
 *     .hero-unit, .form-control, .formGroup-label, .btn--primary, ...) so the
 *     login page is recognisably Kenvo, not just default-Zammad-with-purple-button.
 *   - Imports Sora and applies it to the login heading + form labels + buttons.
 *   - Matches Kenvo portal's exact dark background (#0A0E1F) and primary purple
 *     (#7C5CFA → #A269F2 gradient).
 *   - Form card gets rounded-xl corners, subtle shadow + border-glow on focus.
 */


:root {
  --kenvo-primary:        #7C5CFA;
  --kenvo-primary-glow:   #A269F2;
  --kenvo-primary-dark:   #6446e0;
  --kenvo-bg:             #0A0E1F;
  --kenvo-bg-elev:        #131A33;
  --kenvo-fg:             #F1F2F8;
  --kenvo-fg-muted:       #9aa0b6;
  --kenvo-border:         rgba(255,255,255,0.08);
  --kenvo-form-bg:        #ffffff;
  --kenvo-form-fg:        #0A0E1F;
  --kenvo-input-bg:       #F8F8FC;
  --kenvo-input-border:   #E4E4EF;
  --kenvo-font-display:   'Sora', 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ─── Global font ──────────────────────────────────────────────────────── */
html, body, .desktop, .mobile, .login, input, textarea, select, button, .btn {
  font-family: var(--kenvo-font-display) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── Login fullscreen page ────────────────────────────────────────────── */

/* Dark page background — Kenvo portal's exact bg colour */
.login.fullscreen,
body.fullscreen,
.fullscreen {
  background-color: var(--kenvo-bg) !important;
  background-image:
    radial-gradient(at 18% 12%, rgba(124,92,250,0.18) 0%, transparent 40%),
    radial-gradient(at 82% 88%, rgba(162,105,242,0.14) 0%, transparent 45%) !important;
  color: var(--kenvo-fg) !important;
}

/* The "Log in to support.kenvo.io" heading at the top of the login page */
.login.fullscreen .fullscreen-body > p,
.fullscreen-body > p:first-child {
  font-family: var(--kenvo-font-display) !important;
  font-size: 16px;
  font-weight: 500;
  color: var(--kenvo-fg-muted) !important;
  letter-spacing: 0.02em;
  margin-bottom: 18px;
}

/* The white card holding the form */
.login.fullscreen .hero-unit,
.fullscreen-body .hero-unit {
  background: var(--kenvo-form-bg) !important;
  color: var(--kenvo-form-fg) !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.06),
    0 12px 36px rgba(0,0,0,0.35),
    0 0 0 1px rgba(124,92,250,0.06) inset !important;
}

/* Brand logo above the form */
.login.fullscreen .company-logo,
.hero-unit .company-logo {
  max-height: 56px !important;
  margin-bottom: 14px;
}

/* Form input labels — USERNAME / EMAIL, PASSWORD */
.login.fullscreen .formGroup-label label,
.hero-unit .formGroup-label label,
.formGroup-label label {
  font-family: var(--kenvo-font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase;
  color: #5b6175 !important;
  margin-bottom: 6px;
}

/* Form input fields */
.login.fullscreen .form-control,
.hero-unit .form-control {
  background-color: var(--kenvo-input-bg) !important;
  border: 1px solid var(--kenvo-input-border) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  color: var(--kenvo-form-fg) !important;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease !important;
}
.login.fullscreen .form-control:focus,
.hero-unit .form-control:focus {
  background-color: #fff !important;
  border-color: var(--kenvo-primary) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(124,92,250,0.18) !important;
}

/* Remember-me checkbox row */
.hero-unit .checkbox-replacement,
.hero-unit .inline-label {
  font-size: 13px;
  color: var(--kenvo-form-fg);
}

/* Sign in button (primary CTA) */
.btn.btn--primary,
.login.fullscreen .btn.btn--primary,
.hero-unit .btn.btn--primary {
  background-color: var(--kenvo-primary) !important;
  background-image: linear-gradient(135deg, var(--kenvo-primary) 0%, var(--kenvo-primary-glow) 100%) !important;
  border: none !important;
  color: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 18px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  box-shadow: 0 6px 18px rgba(124,92,250,0.30) !important;
  transition: transform 120ms ease, box-shadow 120ms ease !important;
}
.btn.btn--primary:hover,
.login.fullscreen .btn.btn--primary:hover,
.hero-unit .btn.btn--primary:hover {
  background-image: linear-gradient(135deg, var(--kenvo-primary-dark) 0%, var(--kenvo-primary) 100%) !important;
  box-shadow: 0 8px 24px rgba(124,92,250,0.42) !important;
  transform: translateY(-1px);
}

/* Forgot-password + secondary text buttons */
.btn--text.btn--secondary,
.hero-unit .btn--text {
  color: var(--kenvo-primary) !important;
  font-weight: 500 !important;
}
.btn--text.btn--secondary:hover,
.hero-unit .btn--text:hover {
  color: var(--kenvo-primary-dark) !important;
  text-decoration: underline;
}

/* The two info-blurb lines below the form ("You're already registered…",
 * "Register as a new customer") */
.login.fullscreen .fullscreen-body,
.fullscreen-body {
  color: var(--kenvo-fg-muted) !important;
}
.login.fullscreen .fullscreen-body a,
.fullscreen-body a {
  color: var(--kenvo-primary-glow) !important;
  text-decoration: underline;
}
.login.fullscreen .fullscreen-body a:hover,
.fullscreen-body a:hover {
  color: #C99BFA !important;
}

/* Maintenance-mode banner (if you ever turn it on) */
.hero-unit .alert--success {
  background-color: rgba(124,92,250,0.10) !important;
  border-color: rgba(124,92,250,0.35) !important;
  color: var(--kenvo-form-fg) !important;
  border-radius: 10px !important;
}
.hero-unit .alert--danger {
  border-radius: 10px !important;
}

/* "Powered by Zammad" footer — keep visible (Zammad CE requires) but match
 * the dark theme so it doesn't look like a stuck loader */
.zammad-info,
.poweredBy,
.poweredBy a {
  color: var(--kenvo-fg-muted) !important;
  opacity: 0.6;
}

/* ─── Agent UI (after login) — light touches so it doesn't look orphaned ── */

/* Tailwind utility classes the new SPA emits for the blue palette — remap so
 * Kenvo purple shows up across the desktop SPA without per-component edits */
.text-blue, .text-blue-500, .text-blue-600, .text-blue-700,
.text-primary {
  color: var(--kenvo-primary) !important;
}
.bg-blue, .bg-blue-500, .bg-blue-600, .bg-blue-700,
.hover\:bg-blue-700:hover, .bg-primary {
  background-color: var(--kenvo-primary) !important;
}
.border-blue, .border-blue-500, .border-blue-600, .border-primary {
  border-color: var(--kenvo-primary) !important;
}
.ring-blue, .ring-blue-500, .ring-blue-600, .ring-primary {
  --tw-ring-color: rgba(124,92,250,0.6) !important;
}

/* Active-nav highlight strip on the agent sidebar */
.tabsSidebar .tab.active,
.navigation .menu .item.is-active,
.sidebar .item.active {
  border-left-color: var(--kenvo-primary) !important;
  color: var(--kenvo-primary) !important;
}
/* ─── Zammad legacy agent-UI variable remap ────────────────────────────
 *
 * Zammad's classic desktop UI is driven by a handful of CSS custom
 * properties on :root. Overriding them is the cleanest way to recolour the
 * whole legacy SPA without chasing every individual class selector.
 *
 * Kenvo primary #7C5CFA ≈ hsl(252, 95%, 67%); active/darker variant ≈
 * hsl(252, 95%, 57%); the alpha-laden shadow uses the same hue at 36% / 80%
 * lightness to match Zammad's original "blue glow" geometry.
 *
 * Scoped to `body` so the variable cascade beats the default :root assignments
 * Zammad ships (CSS specificity: html > :root, body wins on equal specificity
 * because it loads after).
 */
body, :root {
  /* Buttons */
  --button-primary-background:         hsl(252, 95%, 67%) !important;
  --button-primary-background-active:  hsl(252, 95%, 57%) !important;

  /* Sidebar menu — active item */
  --menu-background-active:            hsl(252, 95%, 67%) !important;

  /* Links + highlights + focus rings */
  --text-link:                         hsl(252, 95%, 60%) !important;
  --highlight:                         hsl(252, 95%, 67%) !important;
  --border-highlight:                  hsl(252, 95%, 67%) !important;
  --shadow-highlight:                  hsla(252, 95%, 67%, 0.35) !important;

  /* Muted link/text variant used in some sub-headings */
  --text-muted-highlight:              hsl(252, 100%, 92%) !important;
}

/* The legacy desktop ships `.is-active{background: var(--button-primary-background)}`
 * inline (i.e. specificity wins via the cascade), so the var override above is
 * enough. The exceptions: a couple of selectors hard-code the blue. */
.tabsSidebar .tab.active,
.sidebar .item.active,
.menu .item.is-active {
  background: var(--button-primary-background) !important;
  color: white !important;
}

/* The dashboard "My Stats / First Steps" segmented control's active tab is
 * styled with a dark charcoal — keep the contrast but tint the unselected tab
 * with a Kenvo-purple hover so the segment feels brand-consistent. */
.tabsSidebar-tab:hover,
.tabsSidebar > .tab:hover:not(.active) {
  color: var(--button-primary-background) !important;
}

/* Loading spinners / progress bars that used the blue */
.loading.icon-loading {
  border-top-color: var(--button-primary-background) !important;
}