:root {
  --jmni-orange: #e05a18;
  --jmni-orange-light: #ff7a3d;
  --jmni-orange-dark: #c54e12;
  --jmni-orange-glow: rgba(224, 90, 24, 0.12);
  --jmni-green: #2f5233;
  --jmni-green-light: #4a7c3f;
  --jmni-green-dark: #1f3621;
  --jmni-green-glow: rgba(47, 82, 51, 0.12);
  --jmni-cream: #faf5ee;
  --jmni-cream-mid: #f2e9dc;
  --jmni-cream-dark: #e8dbca;
  --jmni-ink: #2e2e2e;
  --jmni-ink-mid: #4a4a4a;
  --jmni-ink-light: #888888;
  --jmni-white: #fdfaf5;
  --jmni-divider: #e0d4c4;

  --jmni-brand: var(--jmni-orange);
  --jmni-brand-strong: var(--jmni-ink);
  --jmni-accent: var(--jmni-orange);
  --jmni-accent-hover: var(--jmni-orange-dark);
  --jmni-surface: var(--jmni-cream);
  --jmni-panel: var(--jmni-white);
  --jmni-border: var(--jmni-divider);
  --jmni-text: var(--jmni-ink);
  --jmni-muted: var(--jmni-ink-light);

  --background-primary: var(--jmni-cream);
  --background-primary-alt: var(--jmni-cream-mid);
  --background-secondary: var(--jmni-white);
  --background-secondary-hover: var(--jmni-cream-mid);
  --background-tertiary: var(--jmni-cream-dark);
  --background-quaternary: var(--jmni-ink);
  --background-quaternary-alt: #242424;
  --background-modifier-hover: var(--jmni-orange-glow);
  --background-modifier-accent: var(--jmni-orange);
  --background-modifier-accent-light: var(--jmni-orange-glow);
  --border: var(--jmni-divider);
  --border-highlight: var(--jmni-orange);
  --button-primary-background: var(--jmni-green);
  --button-primary-background-active: var(--jmni-green-dark);
  --button-primary-text: var(--jmni-white);
  --highlight: var(--jmni-orange);
  --text-normal: var(--jmni-ink);
  --text-muted: var(--jmni-ink-light);
  --text-link: var(--jmni-orange);
}

html[data-theme='dark'] {
  --background-primary: var(--jmni-cream);
  --background-primary-alt: var(--jmni-cream-mid);
  --background-secondary: var(--jmni-white);
  --background-secondary-hover: var(--jmni-cream-mid);
  --background-tertiary: var(--jmni-cream-dark);
  --background-quaternary: var(--jmni-ink);
  --background-quaternary-alt: #242424;
  --background-modifier-hover: var(--jmni-orange-glow);
  --background-modifier-accent: var(--jmni-orange);
  --background-modifier-accent-light: var(--jmni-orange-glow);
  --border: var(--jmni-divider);
  --border-highlight: var(--jmni-orange);
  --button-primary-background: var(--jmni-green);
  --button-primary-background-active: var(--jmni-green-dark);
  --text-normal: var(--jmni-ink);
  --text-muted: var(--jmni-ink-light);
  --text-link: var(--jmni-orange);
}

body {
  color: var(--text-normal) !important;
  background: var(--background-primary) !important;
  font-family: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

a,
button,
.btn,
.link,
.text-link,
.sidebar a,
.navigation a,
.main-sidebar a,
.navbar a,
.navbar-main a,
.tab,
.tabs a,
.nav-tabs a,
.pagination a,
.pagination span,
.badge,
.label,
.tag,
.pill,
input,
textarea,
select,
table tr,
.table tr,
.list-item,
.panel,
.well,
.modal-content {
  transition:
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.18s ease,
    transform 0.18s ease;
}

a,
.link,
.text-link {
  color: var(--text-link) !important;
}

.splash .icon-logo,
.splash-title {
  color: var(--jmni-orange) !important;
  fill: currentColor !important;
}

.app,
.main,
.content,
.page,
.content.active {
  background-color: var(--background-primary) !important;
}

.sidebar,
.navigation,
.main-sidebar,
.navbar,
.navbar-main {
  color: var(--jmni-white) !important;
  background-color: var(--jmni-green) !important;
}

.sidebar span, .sidebar div, .sidebar p, .sidebar time, .sidebar h1, .sidebar h2, .sidebar h3, .sidebar strong,
.navigation span, .navigation div, .navigation p, .navigation time,
.main-sidebar span, .main-sidebar div, .main-sidebar p, .main-sidebar time,
.navbar span, .navbar div, .navbar p, .navbar time,
.navbar-main span, .navbar-main div, .navbar-main p, .navbar-main time {
  color: var(--jmni-white) !important;
}

.sidebar a,
.navigation a,
.main-sidebar a,
.navbar a,
.navbar-main a {
  color: var(--jmni-cream-mid) !important;
}

.sidebar a:hover,
.navigation a:hover,
.main-sidebar a:hover,
.navbar a:hover,
.navbar-main a:hover {
  color: var(--jmni-white) !important;
  background-color: rgba(224, 90, 24, 0.14) !important;
}

.sidebar .active,
.navigation .active,
.main-sidebar .active,
.navbar .active,
.navbar-main .active {
  color: var(--jmni-white) !important;
  background-color: var(--jmni-orange) !important;
}

.btn--primary,
.btn-primary,
button.btn--primary,
input[type='submit'].btn-primary {
  color: var(--jmni-white) !important;
  background-color: var(--button-primary-background) !important;
  border-color: var(--button-primary-background) !important;
}

.btn--primary:hover,
.btn-primary:hover,
button.btn--primary:hover,
input[type='submit'].btn-primary:hover {
  color: var(--jmni-white) !important;
  background-color: var(--button-primary-background-active) !important;
  border-color: var(--button-primary-background-active) !important;
}

.badge,
.label,
.tag,
.pill,
.is-active,
.active {
  border-color: var(--jmni-orange) !important;
}

.badge,
.label,
.tag,
.pill {
  background-color: var(--jmni-orange-glow) !important;
  color: var(--jmni-orange-dark) !important;
}

.form-control:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--jmni-orange);
  box-shadow: 0 0 0 2px rgba(224, 90, 24, 0.18);
  outline: none;
}

.login,
.signup,
.password-reset {
  background: linear-gradient(135deg, var(--jmni-cream), var(--jmni-cream-mid));
}

.login .box,
.signup .box,
.password-reset .box,
.modal-content,
.panel,
.well {
  border-color: var(--jmni-border);
  background-color: var(--jmni-panel);
  box-shadow: 0 2px 16px rgba(26, 20, 16, 0.07), 0 1px 4px rgba(26, 20, 16, 0.04);
}

.table,
table,
.list,
.list-group,
.content-wrapper,
.main-content {
  color: var(--jmni-ink) !important;
  background-color: var(--jmni-cream) !important;
}

table th,
.table th,
table td,
.table td {
  border-color: var(--jmni-divider) !important;
}

table th,
.table th {
  color: var(--jmni-ink-mid) !important;
  background-color: var(--jmni-cream-mid) !important;
}

table tr:hover,
.table tr:hover,
.list-item:hover {
  background-color: rgba(224, 90, 24, 0.08) !important;
}

.tabs .active,
.tab.active,
.tabs a.active,
.nav-tabs .active,
.nav-tabs li.active a {
  color: var(--jmni-white) !important;
  background-color: var(--jmni-orange) !important;
  border-color: var(--jmni-orange) !important;
}

.tabs a,
.tab,
.nav-tabs a {
  color: var(--jmni-ink-mid) !important;
  background-color: var(--jmni-cream-mid) !important;
  border-color: var(--jmni-divider) !important;
}

.tabs a:hover,
.tab:hover,
.nav-tabs a:hover {
  color: var(--jmni-orange-dark) !important;
  background-color: var(--jmni-orange-glow) !important;
}

.search,
.search-input,
input[type='search'],
input[type='text'],
input[type='email'],
input[type='password'],
textarea,
select {
  color: var(--jmni-ink) !important;
  background-color: var(--jmni-white) !important;
  border-color: var(--jmni-divider) !important;
}

.search::placeholder,
.search-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--jmni-ink-light) !important;
}

.pagination .active,
.pagination .current,
.pagination a:hover {
  color: var(--jmni-white) !important;
  background-color: var(--jmni-orange) !important;
  border-color: var(--jmni-orange) !important;
}

.pagination a,
.pagination span {
  color: var(--jmni-ink-mid) !important;
  background-color: var(--jmni-white) !important;
  border-color: var(--jmni-divider) !important;
}

.btn,
button,
input[type='submit'] {
  border-color: var(--jmni-divider) !important;
}

.btn:hover,
button:hover,
input[type='submit']:hover {
  border-color: var(--jmni-orange);
}

.btn:hover,
button:hover,
input[type='submit']:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(26, 20, 16, 0.10), 0 1px 4px rgba(26, 20, 16, 0.06);
}

.btn:active,
button:active,
input[type='submit']:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(26, 20, 16, 0.08);
}

.btn--success,
.btn-success,
button.btn--success,
button.btn-success {
  color: var(--jmni-white);
  background-color: var(--jmni-green);
  border-color: var(--jmni-green);
}

.btn--success:hover,
.btn-success:hover,
button.btn--success:hover,
button.btn-success:hover {
  color: var(--jmni-white);
  background-color: var(--jmni-green-dark);
  border-color: var(--jmni-green-dark);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .btn:hover,
  button:hover,
  input[type='submit'].btn-hover,
  .btn:active,
  button:active,
  input[type='submit']:active {
    transform: none;
  }
}

/* ─────────────────────────────────────────────────────────────────
   GLOBAL CONTRAST & READABILITY OVERRIDES
   Resolves white/light text on cream backgrounds when Zammad dark theme is active
   ───────────────────────────────────────────────────────────────── */

/* Force all standard text inside content areas to use our brand ink color */
.app-content,
.main-content,
.content-wrapper,
.panel,
.well,
.modal-content,
table,
.table,
.list,
.list-group,
.list-item,
.form-group,
label,
.form-label,
.ticket-title,
.subject,
.item-title,
.user-name,
p,
td,
th,
span:not(.badge):not(.label):not(.tag):not(.pill):not(.active):not(.is-active):not(.nav-btn) {
  color: var(--jmni-ink) !important;
}

/* Ensure headings use the brand ink color */
h1, h2, h3, h4, h5, h6 {
  color: var(--jmni-ink) !important;
}

/* Keep buttons, active elements, and sidebar text correctly white/light */
.btn-primary,
.btn--primary,
button.primary,
input[type='submit'].btn-primary,
.btn-success,
.btn--success,
button.btn-success,
button.btn--success,
.active,
.is-active,
.badge,
.tabs .active,
.tab.active,
.tabs a.active,
.nav-tabs .active,
.nav-tabs li.active a {
  color: var(--jmni-white) !important;
}

/* Keep sidebar navigation links beautifully readable */
.sidebar a,
.navigation a,
.main-sidebar a,
.navbar a,
.navbar-main a {
  color: var(--jmni-cream-mid) !important;
}

.sidebar a:hover,
.navigation a:hover,
.main-sidebar a:hover,
.navbar a:hover,
.navbar-main a:hover,
.sidebar .active,
.navigation .active,
.main-sidebar .active,
.navbar .active,
.navbar-main .active {
  color: var(--jmni-white) !important;
}