/* ================================================================
   FYXX ENT. CRM — ZAMMAD 7.0 CUSTOM THEME v3
   Enterprise Navy Dashboard — Production Grade

   Based on: Enterprise CSS Patterns Research (2026-04-07)
   Selectors: Verified against live DOM (Zammad 7.0.0-0023)
   Method:    nginx sub_filter — zero Docker modifications
   Cleaned:   2026-04-08

   Deploy:  edit /opt/zammad/css/active.css
   Verify:  Ctrl+Shift+R in browser
   Rollback: echo "" > /opt/zammad/css/active.css
   ================================================================ */

@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/Inter-Variable-Italic.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* GP Commerce — custom font (light mode only) */
@font-face {
  font-family: 'GP Commerce';
  src: url('/fonts/GPCommerce-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GP Commerce';
  src: url('/fonts/GPCommerce-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'GP Commerce';
  src: url('/fonts/GPCommerce-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ================================================================
   LAYER 1 — PRIMITIVE TOKENS (palette)
   ================================================================ */
:root {
  /* Navy scale — built around brand #003972 */
  --navy-50:  #E6EFF8;
  --navy-100: #CCE0F1;
  --navy-200: #99C0E3;
  --navy-300: #6699CC;
  --navy-400: #336FA6;
  --navy-500: #003972;   /* ★ Brand base */
  --navy-600: #003060;
  --navy-700: #002750;
  --navy-800: #001E3F;
  --navy-900: #001530;
  --navy-950: #000D1F;

  /* Neutral slate (cooler than grey, complements navy) */
  --slate-50:  #F8FAFC;
  --slate-100: #F1F5F9;
  --slate-200: #E2E8F0;
  --slate-300: #CBD5E1;
  --slate-400: #94A3B8;
  --slate-500: #64748B;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1E293B;
  --slate-900: #0F172A;

  /* Status colors */
  --red:    #DC2626;
  --orange: #EA580C;
  --amber:  #F59E0B;
  --green:  #22C55E;
  --blue:   #3B82F6;
  --sky:    #0EA5E9;
}

/* ================================================================
   LAYER 2 — SEMANTIC TOKENS (role-based)
   ================================================================ */
:root {
  /* Content area */
  --bg-page:       var(--slate-50);
  --bg-card:       #FFFFFF;
  --text-primary:  var(--slate-900);
  --text-secondary: var(--slate-600);
  --text-muted:    var(--slate-400);
  --border:        var(--slate-200);
  --border-subtle: rgba(0, 0, 0, 0.06);

  /* Accent */
  --accent:        var(--navy-500);
  --accent-hover:  var(--navy-600);
  --accent-light:  var(--navy-50);
  --accent-ring:   rgba(0, 57, 114, 0.15);

  /* Left nav (dark navy) */
  --nav-bg:           var(--navy-700);
  --nav-hover:        rgba(255, 255, 255, 0.08);
  --nav-active:       rgba(255, 255, 255, 0.14);
  --nav-text:         rgba(255, 255, 255, 0.70);
  --nav-text-hover:   rgba(255, 255, 255, 0.87);
  --nav-text-active:  #FFFFFF;
  --nav-icon:         rgba(255, 255, 255, 0.50);
  --nav-icon-hover:   rgba(255, 255, 255, 0.87);
  --nav-icon-active:  #FFFFFF;
  --nav-border:       rgba(255, 255, 255, 0.10);
  --nav-search-bg:    rgba(255, 255, 255, 0.07);
  --nav-search-border: rgba(255, 255, 255, 0.15);

  /* Secondary sidebar */
  --sidebar-bg:           var(--slate-50);
  --sidebar-link:         var(--navy-400);
  --sidebar-link-hover:   var(--navy-500);
  --sidebar-active-bg:    var(--navy-500);
  --sidebar-active-text:  #FFFFFF;
  --sidebar-separator:    var(--slate-200);

  /* Priorities */
  --p-high:   var(--red);
  --p-normal: var(--blue);
  --p-low:    var(--slate-400);

  /* States */
  --s-new-bg:      #EFF6FF;  --s-new-text:     #1E40AF;
  --s-open-bg:     #FEFCE8;  --s-open-text:    #854D0E;
  --s-pending-bg:  #FFF7ED;  --s-pending-text: #9A3412;
  --s-closed-bg:   #F0FDF4;  --s-closed-text:  #166534;
}

/* ================================================================
   LAYER 3 — COMPONENT TOKENS
   ================================================================ */
:root {
  /* Radii */
  --r-sm:  4px;
  --r-md:  6px;
  --r-lg:  10px;
  --r-xl:  12px;

  /* Navy-tinted shadows (not pure black — per Josh Comeau) */
  --shadow-sm:
    0 1px 3px hsl(220deg 40% 10% / 0.08),
    0 1px 2px hsl(220deg 40% 10% / 0.06);
  --shadow-md:
    0 4px 8px hsl(220deg 40% 10% / 0.10),
    0 2px 4px hsl(220deg 40% 10% / 0.06);
  --shadow-lg:
    0 10px 20px hsl(220deg 40% 10% / 0.12),
    0 6px 6px hsl(220deg 40% 10% / 0.08);

  /* Sidebar shadow — casts RIGHT onto content area */
  --shadow-sidebar:
    4px 0 8px hsl(220deg 40% 10% / 0.25),
    8px 0 20px hsl(220deg 40% 10% / 0.12);

  /* Timing */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 150ms;
}

/* ================================================================
   BASE TYPOGRAPHY
   ================================================================ */
body, html, #app,
input, textarea, select, button {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* Tabular numbers for data columns */
table td, .badge, .stat-value, .kpi {
  font-variant-numeric: tabular-nums !important;
}

/* ================================================================
   LEFT NAV — Complete rewrite
   ================================================================ */

/* Base nav container */
.navigation.vertical {
  background-color: var(--nav-bg) !important;
  border-right: none !important;
  box-shadow: var(--shadow-sidebar) !important;
  z-index: 10 !important;
  position: relative !important;
}

/* Gradient shine — subtle light wash on top */
.navigation.vertical::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 100px !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.04) 0%, transparent 100%) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Search bar */
.navigation.vertical .search-holder input {
  background: var(--nav-search-bg) !important;
  border: 1px solid var(--nav-search-border) !important;
  color: #ffffff !important;
  border-radius: var(--r-md) !important;
  transition: border-color var(--duration) var(--ease),
              background-color var(--duration) var(--ease) !important;
}
.navigation.vertical .search-holder input:focus {
  background: rgba(255,255,255,0.12) !important;
  border-color: rgba(255,255,255,0.30) !important;
}
.navigation.vertical .search-holder input::placeholder {
  color: rgba(255,255,255,0.35) !important;
}

/* Search dropdown */
.navigation.vertical .global-search-menu {
  background: var(--navy-700) !important;
  border: 1px solid var(--nav-border) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── Nav menu items ── */
.navigation.vertical a.menu-item {
  color: var(--nav-text) !important;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease) !important;
}
.navigation.vertical a.menu-item .icon,
.navigation.vertical a.menu-item svg {
  color: var(--nav-icon) !important;
  fill: var(--nav-icon) !important;
  transition: color var(--duration) var(--ease),
              fill var(--duration) var(--ease) !important;
}

/* Hover */
.navigation.vertical a.menu-item:hover {
  background: var(--nav-hover) !important;
  color: var(--nav-text-hover) !important;
}
.navigation.vertical a.menu-item:hover .icon,
.navigation.vertical a.menu-item:hover svg {
  color: var(--nav-icon-hover) !important;
  fill: var(--nav-icon-hover) !important;
}

/* Active */
.navigation.vertical a.menu-item.is-active {
  background: var(--nav-active) !important;
  color: var(--nav-text-active) !important;
}
.navigation.vertical a.menu-item.is-active .icon,
.navigation.vertical a.menu-item.is-active svg {
  color: var(--nav-icon-active) !important;
  fill: var(--nav-icon-active) !important;
}
/* Remove inherited bg on the label span */
.navigation.vertical a.menu-item.is-active .menu-item-name {
  background: transparent !important;
}

/* ── Task tabs (open tickets: Admin TrnPnt, test, etc.) ── */
.navigation.vertical .tasks.tasks-navigation {
  background: var(--nav-bg) !important;
  border-top: 1px solid var(--nav-border) !important;
}

.navigation.vertical .tasks.tasks-navigation .nav-tab {
  background: transparent !important;
  color: var(--nav-text) !important;
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease) !important;
}
.navigation.vertical .tasks.tasks-navigation .nav-tab .label,
.navigation.vertical .tasks.tasks-navigation .nav-tab a {
  color: var(--nav-text) !important;
  transition: color var(--duration) var(--ease) !important;
}

.navigation.vertical .tasks.tasks-navigation .nav-tab:hover {
  background: var(--nav-hover) !important;
}
.navigation.vertical .tasks.tasks-navigation .nav-tab:hover .label,
.navigation.vertical .tasks.tasks-navigation .nav-tab:hover a {
  color: var(--nav-text-hover) !important;
}

/* Close button (X) on task tabs */
.navigation.vertical .tasks.tasks-navigation .nav-tab .nav-tab-close-inner {
  background: transparent !important;
  transition: background-color var(--duration) var(--ease) !important;
}
.navigation.vertical .tasks.tasks-navigation .nav-tab .nav-tab-close-inner:hover {
  background: rgba(255,255,255,0.15) !important;
}

/* Tooltip on task tab hover */
.navigation.vertical .tasks.tasks-navigation .nav-tab .tooltip-inner {
  background: var(--navy-800) !important;
  color: #ffffff !important;
  border: 1px solid var(--nav-border) !important;
  box-shadow: var(--shadow-md) !important;
}

/* ── Beta switch ── */
.navigation.vertical .navbar-desktop-beta-switch {
  background: var(--nav-search-bg) !important;
  border-radius: var(--r-sm) !important;
}

/* ── Bottom toolbar (user avatar, reports, admin, +) ── */
.navigation.vertical .user-menu.navbar-items-personal {
  background: var(--nav-bg) !important;
  border-top: 1px solid var(--nav-border) !important;
}

/* Individual LI items in bottom toolbar */
.navigation.vertical .user-menu li,
.navigation.vertical .user-menu li.user,
.navigation.vertical .user-menu li.settings,
.navigation.vertical .user-menu li.add {
  background: var(--nav-bg) !important;
  transition: background-color var(--duration) var(--ease) !important;
}
.navigation.vertical .user-menu li:hover {
  background: var(--nav-hover) !important;
}

/* Bottom icons */
.navigation.vertical .user-menu .icon,
.navigation.vertical .user-menu svg {
  color: var(--nav-icon) !important;
  fill: var(--nav-icon) !important;
  transition: color var(--duration) var(--ease),
              fill var(--duration) var(--ease) !important;
}
.navigation.vertical .user-menu .icon:hover,
.navigation.vertical .user-menu svg:hover,
.navigation.vertical .user-menu li:hover .icon,
.navigation.vertical .user-menu li:hover svg {
  color: var(--nav-icon-hover) !important;
  fill: var(--nav-icon-hover) !important;
}

/* + button — muted green that fits navy */
.navigation.vertical .user-menu .add .icon,
.navigation.vertical .user-menu .add svg {
  color: rgba(255,255,255,0.55) !important;
  fill: rgba(255,255,255,0.55) !important;
}
.navigation.vertical .user-menu .add:hover .icon,
.navigation.vertical .user-menu .add:hover svg {
  color: var(--green) !important;
  fill: var(--green) !important;
}

/* Bottom tooltips (Reporting, Admin, New) */
.navigation.vertical .user-menu .tooltip-inner {
  background: var(--navy-800) !important;
  color: #ffffff !important;
  border: 1px solid var(--nav-border) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  box-shadow: var(--shadow-md) !important;
}

/* Logo area */
.navigation .logo,
.navigation .brand {
  background-color: var(--nav-bg) !important;
  border-bottom: 1px solid var(--nav-border) !important;
}

/* ── Bottom toolbar dropdowns & hover states ── */

/* Dropdown/popover on hover for bottom icons */
.navigation.vertical .user-menu .dropdown-menu,
.navigation.vertical .user-menu .popover,
.navigation.vertical .dropdown-menu {
  background: var(--navy-800) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 20px hsl(220deg 40% 10% / 0.3) !important;
  border-radius: 6px !important;
}

.navigation.vertical .user-menu .dropdown-menu a,
.navigation.vertical .user-menu .dropdown-menu li a,
.navigation.vertical .dropdown-menu a {
  color: rgba(255,255,255,0.80) !important;
  transition: background-color 150ms ease, color 150ms ease !important;
}

.navigation.vertical .user-menu .dropdown-menu a:hover,
.navigation.vertical .user-menu .dropdown-menu li a:hover,
.navigation.vertical .dropdown-menu a:hover {
  background: rgba(255,255,255,0.10) !important;
  color: #ffffff !important;
}

/* + button hover reset */
.navigation.vertical .user-menu li.add,
.navigation.vertical .user-menu li.add a {
  background: var(--nav-bg) !important;
}
.navigation.vertical .user-menu li.add:hover,
.navigation.vertical .user-menu li.add a:hover {
  background: rgba(255,255,255,0.08) !important;
}

/* Tooltip styling in bottom nav */
.navigation.vertical .tooltip,
.navigation.vertical .user-menu .tooltip {
  background: transparent !important;
  border: none !important;
}
.navigation.vertical .tooltip .tooltip-inner,
.navigation.vertical .user-menu .tooltip .tooltip-inner {
  background: var(--navy-800) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  box-shadow: 0 4px 8px hsl(220deg 40% 10% / 0.3) !important;
}
.navigation.vertical .tooltip .tooltip-arrow,
.navigation.vertical .user-menu .tooltip .tooltip-arrow {
  display: none !important;
}

/* ── list-button ::before hover squares ── */
.navigation.vertical .user-menu > li:hover .list-button::before,
.navigation.vertical .user-menu > li.open .list-button::before,
.navigation.vertical .user-menu > li.is-active .list-button::before {
  background: rgba(255,255,255,0.08) !important;
  border-radius: 6px !important;
}
.navigation.vertical .user-menu li.add:hover .list-button::before,
.navigation.vertical .user-menu li.add.is-active .list-button::before {
  background: rgba(255,255,255,0.08) !important;
}

/* ================================================================
   TOPBAR — Ticket tabs strip (between nav and content)
   ================================================================ */
.tasks.tasks-navigation {
  background-color: var(--navy-800) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}

.tasks.tasks-navigation .nav-tab.task {
  color: rgba(255,255,255,0.55) !important;
  border-bottom: 2px solid transparent !important;
  font-size: 12px !important;
  transition: all var(--duration) var(--ease) !important;
}
.tasks.tasks-navigation .nav-tab.task:hover {
  color: rgba(255,255,255,0.87) !important;
  border-bottom-color: rgba(255,255,255,0.25) !important;
}
.tasks.tasks-navigation .nav-tab.task.is-active,
.tasks.tasks-navigation .nav-tab.task.active {
  color: #ffffff !important;
  border-bottom: 2px solid var(--accent) !important;
  background-color: rgba(0,57,114,0.20) !important;
}

/* ================================================================
   SECONDARY SIDEBAR — Overview list
   ================================================================ */
.sidebar:not(.optional) {
  background-color: var(--sidebar-bg) !important;
  border-right: none !important;
  box-shadow: 2px 0 6px hsl(220deg 20% 20% / 0.06) !important;
}

/* Sidebar width + padding reduction (light mode — Regla 20: width + padding juntos) */
#content_permanent_TicketOverview > .sidebar,
.overviews > .sidebar {
  width: 256px !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* Overview list */
ul.nav.nav-pills.nav-stacked {
  padding: 8px 0 !important;
}

ul.nav.nav-pills.nav-stacked > li {
  margin: 0 8px 2px !important;
  border-radius: 8px !important;
}

ul.nav.nav-pills.nav-stacked > li > a,
ul.nav.nav-pills.nav-stacked li a.horizontal,
.sidebar .nav.nav-pills.nav-stacked li a {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  color: #1e3a5f !important;
  font-size: 13px !important;
  font-weight: 450 !important;
  line-height: 1.4 !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
}

ul.nav.nav-pills.nav-stacked li a.horizontal:hover,
ul.nav.nav-pills.nav-stacked > li > a:hover {
  background-color: #EBF2FA !important;
  box-shadow: inset 3px 0 0 var(--navy-500) !important;
  color: #003972 !important;
}

/* Active overview item */
ul.nav.nav-pills.nav-stacked > li.active > a,
ul.nav.nav-pills.nav-stacked li.active a.horizontal,
.sidebar .nav.nav-pills.nav-stacked li.active a {
  background: var(--navy-500) !important;
  color: #FFFFFF !important;
  font-weight: 500 !important;
  box-shadow: 0 2px 8px rgba(0, 57, 114, 0.25) !important;
}

/* Badge counter: gradient navy + micro-shadow */
.badge.badge--text {
  background: linear-gradient(135deg, #003972, #1a5a9e) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  padding: 3px 9px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  min-width: 22px !important;
  text-align: center !important;
  line-height: 1.4 !important;
  box-shadow: 0 1px 4px rgba(0, 57, 114, 0.3) !important;
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Zero-count badges: muted gray */
.badge.badge--text[data-count="0"],
.badge.badge--text:empty {
  background: #E8EDF3 !important;
  color: #8494A7 !important;
  box-shadow: none !important;
}

/* Active badge: inverted white with navy text */
ul.nav.nav-pills.nav-stacked > li.active .badge.badge--text {
  background: rgba(255, 255, 255, 0.95) !important;
  color: #003972 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}

/* Separator before GLOBAL-Sales overviews */
ul.nav.nav-pills.nav-stacked > li:nth-child(8) {
  margin-top: 12px !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--border) !important;
}

/* ================================================================
   OVERVIEW HEADER
   ================================================================ */
.overview-header {
  background-color: transparent !important;
  background: transparent !important;
  border-bottom: none !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
}

/* Overview ≡ dropdown — COMPLETE FIX (B29)
   Nav sidebar rules force navy bg + white text on all dropdowns.
   Must beat .dropdown.dropdown-actions specificity (L1901).
   DOM: ul.dropdown.dropdown--actions > li.js-dropdownItem > span */

/* LIGHT — container bg override (high specificity) */
.overview-header ul.dropdown-menu.dropdown-menu-right,
.overview-header ul.dropdown.dropdown--actions,
.overview-header ul.dropdown-menu {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg) !important;
}
.overview-header li.js-dropdownItem {
  background: transparent !important;
}
.overview-header li.js-dropdownItem > span.flex.u-textTruncate,
.overview-header li.js-dropdownItem > span {
  color: var(--text-primary) !important;
}
.overview-header li.js-dropdownItem > span.badge.badge--text {
  color: var(--slate-600) !important;
  background: var(--slate-100) !important;
}
.overview-header li.js-dropdownItem:hover {
  background: var(--navy-50) !important;
}
.overview-header li.js-dropdownItem:hover > span {
  color: var(--navy-600) !important;
}
.overview-header li.js-dropdownItem.active {
  background: var(--navy-50) !important;
}
.overview-header li.js-dropdownItem.active > span.flex.u-textTruncate {
  color: var(--navy-500) !important;
  font-weight: 600 !important;
}

/* DARK — container + items */
html[data-theme="dark"] .overview-header ul.dropdown-menu.dropdown-menu-right,
html[data-theme="dark"] .overview-header ul.dropdown.dropdown--actions,
html[data-theme="dark"] .overview-header ul.dropdown-menu {
  background: #0f2035 !important;
  border-color: #1a3450 !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem {
  background: transparent !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem > span.flex.u-textTruncate,
html[data-theme="dark"] .overview-header li.js-dropdownItem > span {
  color: rgba(255,255,255,0.85) !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem > span.badge.badge--text {
  color: #7a9abb !important;
  background: #1a3450 !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem:hover {
  background: rgba(0,57,114,0.25) !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem:hover > span {
  color: #ffffff !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem.active {
  background: rgba(0,57,114,0.25) !important;
}
html[data-theme="dark"] .overview-header li.js-dropdownItem.active > span {
  color: #ffffff !important;
}

/* ================================================================
   TABLE — Main ticket list
   ================================================================ */
.table-overview {
  background-color: var(--bg-page) !important;
  padding: 12px !important;
}

table.table.table-hover.table--light {
  background-color: var(--bg-card) !important;
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-sm) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Table header */
table.table-hover thead th.js-tableHead,
table.table-hover thead th {
  background-color: var(--slate-100) !important;
  color: var(--text-muted) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 10px 14px !important;
  border-bottom: 2px solid var(--slate-200) !important;
  white-space: nowrap !important;
}

/* Table rows */
table.table-hover tbody tr.item {
  background-color: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: background-color var(--duration) var(--ease) !important;
  cursor: pointer !important;
}
table.table-hover tbody tr.item:hover {
  background-color: var(--accent-light) !important;
}
table.table-hover tbody tr.item:last-child {
  border-bottom: none !important;
}

/* Table cells */
table.table-hover tbody tr.item td {
  padding: 12px 14px !important;
  vertical-align: middle !important;
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

/* Ticket title */
table.table-hover tbody tr.item td a {
  color: var(--text-primary) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  font-size: 13px !important;
  transition: color var(--duration) var(--ease) !important;
}
table.table-hover tbody tr.item td a:hover {
  color: var(--accent) !important;
}

/* Customer name */
table.table-hover tbody tr.item td .user-popover {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

/* Date column */
table.table-hover tbody tr.item td.align-right {
  color: var(--text-muted) !important;
  font-size: 12px !important;
}

/* State icon column */
table.table-hover tbody tr.item td.noTruncate {
  padding-left: 4px !important;
  padding-right: 4px !important;
  width: 28px !important;
}

/* Priority colors on state icons */
table.table-hover tbody tr.item td.noTruncate .icon.escalating,
table.table-hover tbody tr.item td.noTruncate .icon.icon-task-state.escalating {
  color: var(--p-high) !important;
  fill: var(--p-high) !important;
}
table.table-hover tbody tr.item td.noTruncate .icon {
  color: var(--p-normal) !important;
  fill: var(--p-normal) !important;
  width: 14px !important;
  height: 14px !important;
}

/* ================================================================
   RIGHT SIDEBAR — Ticket details panel
   ================================================================ */
.sidebar.optional {
  background-color: var(--bg-card) !important;
  border-left: 1px solid var(--border-subtle) !important;
}

.sidebar.optional .sidebar-block,
.sidebar.optional .sidebar-content {
  border-bottom: 1px solid var(--border-subtle) !important;
  padding: 12px 16px !important;
}

/* Labels (OWNER, STATE, PRIORITY) */
.sidebar.optional dt,
.sidebar.optional label,
.sidebar.optional .key,
.sidebar.optional .sidebar-block-title {
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  margin-bottom: 4px !important;
}

/* Values */
.sidebar.optional dd,
.sidebar.optional .value {
  color: var(--text-primary) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

/* Sidebar header */
.sidebar.optional .sidebar-header,
.sidebar.optional h2 {
  background-color: var(--slate-50) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text-muted) !important;
  padding: 10px 16px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
}

/* ================================================================
   TICKET ZOOM
   ================================================================ */
.ticket-header,
.content-header {
  background-color: var(--bg-card) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  box-shadow: var(--shadow-sm) !important;
}

.ticket-title-input,
h1.ticket-title {
  color: var(--text-primary) !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Article bubbles */
.ticket-article-item,
.article-content {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  margin-bottom: 12px !important;
  transition: box-shadow var(--duration) var(--ease) !important;
}

/* Internal notes — amber accent */
/* --- All articles: full card container --- */
.ticket-article-item {
  background: #FFFFFF !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  padding: 16px 20px 8px !important;
}

/* Remove inner backgrounds/borders — parent card handles it */
.ticket-article-item .textBubble,
.ticket-article-item .bubble-gap,
.ticket-article-item .internal-border,
.ticket-article-item .article-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Internal notes: cream/beige card --- */
.ticket-article-item.is-internal {
  background: #FEF9F0 !important;
  border: 1px solid rgba(180, 160, 120, 0.25) !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(180, 160, 120, 0.08) !important;
  padding: 16px 20px 8px !important;
}

.ticket-article-item.is-internal .js-article-actions .article-actions {
  background: rgba(180, 160, 120, 0.06) !important;
  border-top: 1px solid rgba(180, 160, 120, 0.12) !important;
}


/* ============================================
   REPLY FORM — Unified block (replaces 3 conflicting blocks)
   DOM: div.article-new > form.article-add > div.editControls (position:absolute, left:0)
                                            > div.article-content.bubble-gap
                                                > div.internal-border
                                                    > div.input.form-group (TO)
                                                    > div.input.form-group (CC)
                                                    > div.textBubble (compose + signature)
   ============================================ */

/* --- Outer wrapper: transparent, centered, no chrome --- */
div.article-new,
.article-add.ticket-article-item {
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
  background: transparent !important;
  overflow: visible !important;
  width: calc(100% - 140px) !important;
}

/* --- Bubble-gap: transparent pass-through --- */
.article-add .article-content.bubble-gap {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* --- THE CARD: internal-border is the single visible container --- */
.article-add .internal-border {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-xl) !important;
  background: #FFFFFF !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.04),
    0 2px 8px rgba(0,0,0,0.03) !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease) !important;
}

/* Focus-within: subtle navy ring */
.article-add .internal-border:focus-within {
  border-color: var(--navy-400) !important;
  box-shadow:
    0 0 0 3px var(--accent-ring),
    0 2px 8px rgba(0,0,0,0.04) !important;
}

/* --- Internal note card: amber/cream --- */
.article-add.is-internal .internal-border {
  border-color: #E0B830 !important;
  background: #FFFBEB !important;
}
.article-add.is-internal .internal-border:focus-within {
  box-shadow: 0 0 0 3px rgba(224, 184, 48, 0.15) !important;
}

/* --- Form-groups inside card (TO, CC, Subject): borderless, fade dividers --- */
.article-add .internal-border > .form-group,
.article-add .internal-border > .input.form-group {
  border: none !important;
  border-bottom: 1px solid rgba(0,0,0,0.06) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 6px 16px !important;
  margin: 0 !important;
}

/* Inputs inside form-groups: invisible fields */
.article-add .internal-border .form-group input,
.article-add .internal-border .form-group .form-control,
.article-add .internal-border .form-group .token-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 4px 0 !important;
}

/* Labels (TO, CC): small uppercase muted */
.article-add .internal-border .formGroup-label,
.article-add .internal-border .form-group-label,
.article-add .internal-border label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--slate-400) !important;
  margin-bottom: 2px !important;
}

/* Token pills (email address chips) */
.article-add .token {
  background: var(--navy-50) !important;
  color: var(--navy-500) !important;
  border: none !important;
  border-radius: 20px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
}
.article-add .token .token-label {
  color: var(--navy-500) !important;
}
.article-add .token .close {
  color: var(--navy-400) !important;
  opacity: 0.6 !important;
}
.article-add .token .close:hover {
  opacity: 1 !important;
}

/* --- TextBubble: compose area, seamless inside card --- */
.article-add .internal-border > .textBubble,
.article-add .internal-border .textBubble {
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 8px 16px !important;
  border-radius: 0 !important;
}

/* Compose body */
.article-add .articleNewEdit-body {
  min-height: 80px !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  padding: 4px 0 !important;
}

/* Placeholder */
.article-add .articleNewEdit-body[data-placeholder]:empty::before {
  color: var(--slate-400) !important;
  font-style: italic !important;
  font-size: 13px !important;
}

/* Internal note compose: monospace */
.article-add.is-internal .articleNewEdit-body {
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 13px !important;
}

/* --- editControls: DO NOT reposition — just style icons --- */
.article-add .editControls .editControls-icon .icon {
  fill: var(--slate-400) !important;
  transition: fill 150ms var(--ease) !important;
}
.article-add .editControls .editControls-icon:hover .icon {
  fill: var(--navy-500) !important;
}

/* --- Signature area: subtle separator --- */
.article-add .signature {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding-top: 8px !important;
  margin-top: 8px !important;
  color: var(--slate-500) !important;
  font-size: 13px !important;
}

.richtext-toolbar {
  background-color: var(--slate-50) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) var(--r-md) 0 0 !important;
}

/* Article action links */
.article-meta a,
.article-actions a {
  color: var(--text-muted) !important;
  font-size: 12px !important;
  transition: color var(--duration) var(--ease) !important;
}
.article-meta a:hover,
.article-actions a:hover {
  color: var(--accent) !important;
}

/* ================================================================
   DASHBOARD
   ================================================================ */
.main.flex.center {
  background-color: var(--bg-page) !important;
}

/* Dashboard tabs */
.tabs--big .tab-content,
.tabs--big .tab-link {
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* ================================================================
   FORMS & INPUTS
   ================================================================ */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select,
.form-control {
  border: 1px solid var(--slate-300) !important;
  border-radius: var(--r-md) !important;
  color: var(--text-primary) !important;
  font-size: 13px !important;
  transition: border-color var(--duration) var(--ease),
              box-shadow var(--duration) var(--ease) !important;
}

input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
  outline: none !important;
}

/* ================================================================
   BUTTONS
   ================================================================ */
.btn {
  border-radius: var(--r-md) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all var(--duration) var(--ease) !important;
}
.btn:active {
  transform: scale(0.98) !important;
}

.btn.btn--success,
.btn--primary {
  background-color: var(--accent) !important;
  border-color: var(--accent) !important;
  color: #ffffff !important;
}
.btn.btn--success:hover,
.btn--primary:hover {
  background-color: var(--accent-hover) !important;
  border-color: var(--accent-hover) !important;
}

.btn.btn--primary.js-submit {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* ================================================================
   MODALS
   ================================================================ */
.modal {
  border-radius: var(--r-lg) !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-lg) !important;
}

.modal .modal-header,
.modal header {
  background-color: var(--accent) !important;
  color: #ffffff !important;
  padding: 14px 20px !important;
}

.modal .modal-header h1,
.modal .modal-header h2,
.modal header h1 {
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ================================================================
   TAGS
   ================================================================ */
.tag,
.label.label-tag {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
  border-radius: var(--r-sm) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  padding: 2px 7px !important;
}

/* ================================================================
   SCROLLBARS
   ================================================================ */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background-color: var(--slate-300) !important;
  border-radius: 10px !important;
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--slate-400) !important;
}

/* ================================================================
   MISC UX
   ================================================================ */

/* Selection */
::selection {
  background-color: var(--accent-light) !important;
  color: var(--accent) !important;
}

/* Avatar */
.avatar, .user-avatar {
  font-weight: 600 !important;
}

/* Admin panel sidebar */
.content-sidebar .sidebar-navigation {
  border-right: 1px solid var(--border-subtle) !important;
}

/* Search highlight */
mark, .highlight {
  background-color: #FEF08A !important;
  color: var(--text-primary) !important;
  border-radius: 2px !important;
}

/* Dropdowns */
.dropdown-menu {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* Popovers */
.popover {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ================================================================
   GLOBAL TRANSITIONS — 150ms on all interactive elements
   ================================================================ */
a, button,
.nav-item, .menu-item,
.nav-tab, .ticket-list tbody tr {
  transition: background-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              box-shadow 200ms var(--ease),
              opacity var(--duration) var(--ease) !important;
}

/* ================================================================
   ACCESSIBILITY — Respect reduced motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   STATE BADGES — Matches JS-injected classes
   ================================================================ */
.state-badge {
  display: inline-block !important;
  padding: 3px 12px !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-transform: capitalize !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
}

.state-badge.state-new {
  background-color: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(220, 38, 38, 0.30) !important;
}

.state-badge.state-open {
  background-color: var(--blue) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(59, 130, 246, 0.30) !important;
}

.state-badge.state-pending {
  background-color: var(--amber) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.30) !important;
}

.state-badge.state-closed {
  background-color: var(--green) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(34, 197, 94, 0.30) !important;
}

.state-badge.state-merged {
  background-color: var(--slate-500) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 4px rgba(100, 116, 139, 0.30) !important;
}


/* ================================================================
   NEW TICKET TABS — Received Call / Outbound Call / Send Email
   ================================================================ */
.tabs.type-tabs {
  border-bottom: 1px solid var(--border-subtle) !important;
  background: var(--bg-card) !important;
  padding: 3px !important;
  border-radius: var(--r-lg) !important;
  display: flex !important;
  gap: 2px !important;
}

.tabs.type-tabs .tab {
  background: transparent !important;
  color: var(--slate-600) !important;
  border: 1px solid transparent !important;
  border-radius: var(--r-md) !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  transition: all 200ms var(--ease) !important;
  cursor: pointer !important;
  position: relative !important;
  flex: 1 !important;
  text-align: center !important;
  justify-content: center !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.tabs.type-tabs .tab:hover {
  background: var(--navy-50) !important;
  color: var(--navy-500) !important;
}

.tabs.type-tabs .tab.active {
  background: var(--navy-500) !important;
  color: #ffffff !important;
  border-color: var(--navy-500) !important;
  box-shadow:
    0 2px 8px rgba(0, 57, 114, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.tabs.type-tabs .tab.active::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

.tabs.type-tabs .tab.active .tab-icon,
.tabs.type-tabs .tab.active .icon,
.tabs.type-tabs .tab.active svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}

.tabs.type-tabs .tab:not(.active) .tab-icon,
.tabs.type-tabs .tab:not(.active) .icon,
.tabs.type-tabs .tab:not(.active) svg {
  color: var(--slate-400) !important;
  fill: var(--slate-400) !important;
}

.tabs.type-tabs .tab:hover:not(.active) .tab-icon,
.tabs.type-tabs .tab:hover:not(.active) .icon,
.tabs.type-tabs .tab:hover:not(.active) svg {
  color: var(--navy-400) !important;
  fill: var(--navy-400) !important;
}


/* ================================================================
   REPORTING — Time range tabs (Year/Month/Week/Day/Real-time)
   ================================================================ */
.reporting .tabs {
  padding: 3px !important;
  background: var(--bg-card) !important;
  border-radius: var(--r-lg) !important;
  border: 1px solid var(--border-subtle) !important;
  display: flex !important;
  gap: 2px !important;
}

.reporting .tabs .tab {
  background: transparent !important;
  color: var(--slate-600) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 20px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 200ms var(--ease) !important;
  position: relative !important;
}

.reporting .tabs .tab:hover {
  background: var(--navy-50) !important;
  color: var(--navy-500) !important;
}

.reporting .tabs .tab.active {
  background: var(--navy-500) !important;
  color: #ffffff !important;
  box-shadow:
    0 2px 8px rgba(0, 57, 114, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.reporting .tabs .tab.active::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 50% !important;
  background: linear-gradient(180deg, rgba(255,255,255,0.12) 0%, transparent 100%) !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}


/* ================================================================
   REPORTING — Download tabs (Created/Closed/First Solution...)
   ================================================================ */
.reporting .nav.nav-tabs {
  border-bottom: none !important;
  padding: 3px !important;
  background: var(--slate-50) !important;
  border-radius: var(--r-lg) !important;
  display: flex !important;
  gap: 2px !important;
  flex-wrap: wrap !important;
}

.reporting .nav.nav-tabs > li > a {
  background: transparent !important;
  color: var(--slate-600) !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 8px 16px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: all 200ms var(--ease) !important;
  margin: 0 !important;
}

.reporting .nav.nav-tabs > li > a:hover {
  background: var(--navy-50) !important;
  color: var(--navy-500) !important;
}

.reporting .nav.nav-tabs > li.active > a,
.reporting .nav.nav-tabs > li.is-active > a {
  background: var(--navy-500) !important;
  color: #ffffff !important;
  box-shadow:
    0 2px 6px rgba(0, 57, 114, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}


/* ================================================================
   REPORTING — Sidebar panels (TICKET COUNT, CREATION CHANNELS...)
   ================================================================ */
.reporting .panel.panel-default {
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-md) !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
  overflow: hidden !important;
}

.reporting .panel-heading {
  background: var(--slate-50) !important;
  color: var(--text-muted) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border-subtle) !important;
  transition: all 150ms var(--ease) !important;
}

.reporting .panel-heading:hover {
  background: var(--navy-50) !important;
  color: var(--navy-500) !important;
}

.reporting .panel-heading[aria-expanded="true"],
.reporting .panel.panel-default.is-active .panel-heading {
  background: var(--navy-500) !important;
  color: #ffffff !important;
}


/* ================================================================
   DASHBOARD — Stat cards
   ================================================================ */
.stats-row,
.stat-row {
  gap: 16px !important;
}

.stats-item,
.stat-item {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  padding: 20px !important;
  position: relative !important;
  overflow: visible !important;
  transition: box-shadow 200ms var(--ease),
              transform 200ms var(--ease) !important;
}

.stats-item:hover,
.stat-item:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px) !important;
}

/* Subtle top accent line on stat cards */
.stats-item::before,
.stat-item::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: linear-gradient(90deg, var(--navy-500) 0%, var(--sky) 100%) !important;
  opacity: 0 !important;
  transition: opacity 300ms var(--ease) !important;
}

.stats-item:hover::before,
.stat-item:hover::before {
  opacity: 1 !important;
}

/* Dashboard — ACTIVITY STREAM header */
.activity-stream-header,
#content_permanent_Dashboard .sidebar-block-title,
#content_permanent_Dashboard .sidebar.optional h2 {
  color: var(--navy-500) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding-bottom: 8px !important;
  border-bottom: 2px solid var(--navy-500) !important;
  margin-bottom: 12px !important;
}


/* ================================================================
   NEW TICKET FORM — Premium finish
   ================================================================ */

/* Page title */
h1,
.newTicket h1 {
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
}

/* Create button — gradient with depth */
.btn.btn--create,
.btn.btn--primary.btn--split--first,
.sidebar .btn.btn--action.js-submit,
.newTicket .js-submit {
  background: linear-gradient(135deg, var(--navy-500) 0%, var(--navy-600) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  padding: 10px 28px !important;
  font-size: 14px !important;
  border-radius: var(--r-md) !important;
  box-shadow:
    0 4px 12px rgba(0, 57, 114, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transition: all 200ms var(--ease) !important;
  position: relative !important;
  overflow: hidden !important;
}

.btn.btn--create:hover,
.btn.btn--primary.btn--split--first:hover,
.newTicket .js-submit:hover {
  box-shadow:
    0 6px 20px rgba(0, 57, 114, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

.btn.btn--create:active,
.btn.btn--primary.btn--split--first:active,
.newTicket .js-submit:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Cancel link */
.newTicket .js-cancel,
.cancel-action {
  color: var(--slate-400) !important;
  font-size: 13px !important;
  transition: color 150ms var(--ease) !important;
}

.newTicket .js-cancel:hover,
.cancel-action:hover {
  color: var(--red) !important;
}


/* ================================================================
   + BUTTON (top right in overviews) — Premium style
   ================================================================ */
.content .btn.btn--only-icon.btn--action {
  background: linear-gradient(135deg, var(--navy-500) 0%, var(--navy-600) 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 42px !important;
  height: 42px !important;
  box-shadow:
    0 4px 12px rgba(0, 57, 114, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transition: all 250ms var(--ease) !important;
}

.content .btn.btn--only-icon.btn--action:hover {
  box-shadow:
    0 6px 20px rgba(0, 57, 114, 0.45),
    0 0 24px rgba(0, 57, 114, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) scale(1.05) !important;
}

.content .btn.btn--only-icon.btn--action:active {
  transform: translateY(0) scale(0.95) !important;
}

.content .btn.btn--only-icon.btn--action .icon,
.content .btn.btn--only-icon.btn--action svg {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* ================================================================
   LOGIN PAGE — Final polish
   ================================================================ */
.login {
  background:
    radial-gradient(ellipse at 30% 20%, rgba(59, 130, 246, 0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(0, 57, 114, 0.06) 0%, transparent 50%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-700) 50%, var(--navy-500) 100%) !important;
}

.login .form,
.login-form,
.login .card {
  background: rgba(255, 255, 255, 0.97) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.60) !important;
  border-radius: 16px !important;
  box-shadow:
    0 25px 60px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.80) !important;
  padding: 40px !important;
}

/* "Log in to" text */
.login .auth-header,
.login h1,
.login p {
  color: rgba(255, 255, 255, 0.75) !important;
  font-weight: 400 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
}

/* Sign in button */
.login .btn.btn--primary,
.login .btn[type="submit"] {
  background: linear-gradient(135deg, var(--navy-500) 0%, var(--navy-600) 100%) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 12px !important;
  box-shadow:
    0 4px 14px rgba(0, 57, 114, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  transition: all 250ms var(--ease) !important;
}

.login .btn.btn--primary:hover,
.login .btn[type="submit"]:hover {
  box-shadow:
    0 6px 20px rgba(0, 57, 114, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-1px) !important;
}

/* Login inputs */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-md) !important;
  padding: 12px 14px !important;
  font-size: 14px !important;
  transition: all 200ms var(--ease) !important;
  background: #ffffff !important;
}

.login input:focus {
  border-color: var(--navy-500) !important;
  box-shadow: 0 0 0 3px rgba(0, 57, 114, 0.12) !important;
}

/* Forgot password link */
.login .forgot-password,
.login a[href="#password_reset"] {
  color: var(--slate-400) !important;
  font-size: 13px !important;
  transition: color 150ms var(--ease) !important;
}

.login .forgot-password:hover,
.login a[href="#password_reset"]:hover {
  color: var(--navy-500) !important;
}

/* Remember me checkbox */
.login .checkbox label {
  color: var(--slate-500) !important;
  font-size: 13px !important;
}

/* Login page — hide unwanted elements */
.login .js-footer {
  display: none !important;
}

.login .poweredBy {
  display: none !important;
}


/* ================================================================
   GLOBAL POLISH — The 10/10 details
   ================================================================ */

/* Ticket titles in table — bolder on hover */
table.table-hover tbody tr.item:hover td a {
  color: var(--navy-500) !important;
}

/* Subtle row left-border accent on hover */
table.table-hover tbody tr.item:hover {
  box-shadow: inset 3px 0 0 var(--navy-500) !important;
}

/* OPTIONS button refinement */
.btn--text,
.btn.btn--text {
  color: var(--slate-400) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  transition: color 150ms var(--ease) !important;
}

.btn--text:hover,
.btn.btn--text:hover {
  color: var(--navy-500) !important;
}

/* Dividers/HRs */
hr {
  border-color: var(--border-subtle) !important;
}

/* Links — navy accent globally */
a {
  color: var(--navy-400) !important;
}
a:hover {
  color: var(--navy-500) !important;
}

/* Select attachment link */
.attachments a,
.article-attachment a {
  color: var(--navy-400) !important;
  font-size: 12px !important;
}

/* Templates sidebar */
.content .sidebar h2,
.content .sidebar-header {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--text-primary) !important;
}

.content .sidebar p {
  color: var(--text-secondary) !important;
  font-size: 13px !important;
}

/* Notification bell — pulse animation */
@keyframes bellPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

.navigation .js-notificationsCounter:not(:empty),
.navigation .notification-counter:not(:empty) {
  animation: bellPulse 2s ease-in-out infinite !important;
}

/* ================================================================
   OVERVIEW HEADER TABS — Specific fix for a.tab.js-tab
   ================================================================ */

/* Active tab — navy override with max specificity */
a.tab.js-tab.active,
.tabs a.tab.active,
a.tab.active,
.overview-header a.tab.js-tab.active {
  background-color: var(--navy-500) !important;
  color: #ffffff !important;
  border-color: var(--navy-500) !important;
  box-shadow:
    0 2px 8px rgba(0, 57, 114, 0.30),
    0 1px 3px rgba(0, 57, 114, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
  position: relative !important;
}

/* Inactive tabs */
a.tab.js-tab:not(.active),
.tabs a.tab:not(.active) {
  background-color: transparent !important;
  color: var(--slate-600) !important;
  border-color: var(--slate-200) !important;
}

a.tab.js-tab:not(.active):hover,
.tabs a.tab:not(.active):hover {
  background-color: var(--navy-50) !important;
  color: var(--navy-500) !important;
  border-color: var(--navy-200) !important;
}

/* Badge inside active tab — glass */
a.tab.js-tab.active .badge,
a.tab.active .badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #ffffff !important;
}

/* Badge inside inactive tab — navy pill */
a.tab.js-tab:not(.active) .badge,
a.tab:not(.active) .badge {
  background: var(--navy-500) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 57, 114, 0.25) !important;
}

/* ================================================================
   DASHBOARD TABS — Final specificity fix for div.tab.active
   ================================================================ */
.tabs.tabs--big > .tab.active,
.tabs.tabs--big > div.tab.active,
div.tabs.tabs--big .tab.active,
.dashboard .tabs .tab.active,
.tabs--big .tab.active {
  background-color: var(--navy-500) !important;
  background: var(--navy-500) !important;
  color: #ffffff !important;
  box-shadow:
    0 2px 8px rgba(0, 57, 114, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

.tabs.tabs--big > .tab:not(.active),
div.tabs.tabs--big .tab:not(.active) {
  background-color: transparent !important;
  background: transparent !important;
  color: var(--slate-600) !important;
}

.tabs.tabs--big > .tab:not(.active):hover,
div.tabs.tabs--big .tab:not(.active):hover {
  background-color: var(--navy-50) !important;
  background: var(--navy-50) !important;
  color: var(--navy-500) !important;
}

/* ================================================================
   OVERFLOW & ACTION DROPDOWNS — Combined tab overflow + actions
   ================================================================ */

/* Dropdown containers — tab overflow */
.tabs .tab .dropdown-menu,
.tab-bar .dropdown-menu,
.overflow-menu,
.js-overflowMenu {
  background: var(--navy-800) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 4px !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

/* Dropdown containers — action menus */
/* Parent container must be transparent — it's always in DOM */
.dropdown.dropdown-actions,
.dropdown.dropdown--actions {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible !important;
}

/* Only the actual menu list gets the navy treatment */
.dropdown.dropdown-actions > ul.dropdown-menu,
.dropdown.dropdown--actions > ul.dropdown-menu,
ul.dropdown-menu.dropdown-menu-right {
  background: var(--navy-800) !important;
  border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: var(--r-lg) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.30),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 4px !important;
  overflow: hidden !important;
}

/* Items inside tab overflow dropdown */
.tabs .tab .dropdown-menu li a,
.tab-bar .dropdown-menu li a,
.overflow-menu li a,
.js-overflowMenu li a {
  color: rgba(255, 255, 255, 0.80) !important;
  padding: 8px 14px !important;
  border-radius: var(--r-md) !important;
  font-size: 13px !important;
  transition: all 150ms var(--ease) !important;
}

.tabs .tab .dropdown-menu li a:hover,
.tab-bar .dropdown-menu li a:hover,
.overflow-menu li a:hover,
.js-overflowMenu li a:hover {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

/* Badges inside tab overflow dropdown */
.tabs .tab .dropdown-menu .badge,
.tab-bar .dropdown-menu .badge,
.overflow-menu .badge,
.js-overflowMenu .badge {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
  min-width: 20px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10) !important;
}

/* Items inside action dropdowns */
li.js-dropdownItem,
.dropdown-menu li[role="presentation"] {
  border-radius: var(--r-md) !important;
  margin: 1px 0 !important;
  transition: background-color 150ms var(--ease) !important;
}

li.js-dropdownItem a,
li.js-dropdownItem > span,
.dropdown-menu li[role="presentation"] a {
  color: rgba(255, 255, 255, 0.80) !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  border-radius: var(--r-md) !important;
  transition: all 150ms var(--ease) !important;
}

li.js-dropdownItem:hover,
li.js-dropdownItem:hover a,
li.js-dropdownItem:hover > span,
.dropdown-menu li[role="presentation"]:hover a {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}

li.js-dropdownItem.active,
li.js-dropdownItem.active a,
li.js-dropdownItem.is-active a,
.dropdown-menu li[role="presentation"].active a {
  background: rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
}

/* Badges in action dropdown */
li.js-dropdownItem .badge,
li.js-dropdownItem span.badge,
.dropdown-menu li[role="presentation"] .badge {
  background: rgba(255, 255, 255, 0.20) !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  border-radius: 20px !important;
  padding: 1px 7px !important;
  min-width: 20px !important;
  text-align: center !important;
}

/* ================================================================
   DASHBOARD STAT COLORS — Single source of truth
   Override Zammad CSS variables. SVGs use fill:currentColor
   which inherits from these. Do NOT override .superbad-color etc
   directly — that breaks SVG opacity/path alternation.
   ================================================================ */
:root {
  --supergood-color: #336FA6 !important;
  --good-color: #6699CC !important;
  --ok-color: #F59E0B !important;
  --bad-color: #EA580C !important;
  --superbad-color: #336FA6 !important;
}

/* --- Admin panel nav-tabs fix --- */
.nav-tabs li.active {
  background: var(--navy-500) !important;
  border-color: var(--navy-500) !important;
}

.nav-tabs li.active a,
.nav-tabs li.active a:hover,
.nav-tabs li.active a:focus {
  color: #FFFFFF !important;
}

/* ============================================
   TICKET ZOOM — REFINEMENTS v1
   ============================================ */

/* --- Ticket number: prominent, navy, clickable feel --- */
.scrollPageHeader .ticket-number,
.ticketZoom-header .ticket-number {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--navy-500) !important;
  letter-spacing: 0.02em !important;
}

/* --- Ticket title: larger, bolder --- */
.scrollPageHeader .ticket-title,
.ticketZoom-header .ticket-title,
h1.ticket-title,
.ticket-title-input {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  line-height: 1.3 !important;
}

/* --- Article action bar: subtle but clear --- */
.js-article-actions {
  border-top: 1px solid var(--border-subtle) !important;
  padding: 6px 0 !important;
}

.js-article-actions .article-meta-permanent-customer,
.js-article-actions a {
  color: var(--slate-400) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  transition: color 150ms var(--ease) !important;
}

.js-article-actions a:hover {
  color: var(--navy-500) !important;
}

/* --- New article area: clean border, clear purpose --- */

/* --- Placeholder text --- */
.articleNewEdit-body[data-placeholder]:empty::before {
  color: var(--slate-400) !important;
  font-style: italic !important;
  font-size: 13px !important;
}

/* --- Sidebar action tabs (the 3 grey icons) --- */
.tabsSidebar-tab {
  padding: 10px 8px !important;
  border-radius: var(--r-md) !important;
  transition: all 150ms var(--ease) !important;
  opacity: 0.5 !important;
}

.tabsSidebar-tab:hover {
  opacity: 0.85 !important;
  background: var(--slate-100) !important;
}

.tabsSidebar-tab.active {
  opacity: 1 !important;
  background: var(--accent-light) !important;
}

.tabsSidebar-tab.active .tabsSidebar-tabIcon {
  color: var(--navy-500) !important;
}

/* --- Submit button area: spacing fix --- */
.attributeBar .js-submit,
.attributeBar .btn.btn--primary.js-submit {
  margin-left: 8px !important;
}

/* --- Ticket meta (created date, escalation) --- */
.ticketZoom-header .js-ticketMetaContainer {
  font-size: 12px !important;
  color: var(--slate-400) !important;
}

.ticketZoom-header .js-ticketMetaContainer .escalation {
  color: var(--red) !important;
  font-weight: 600 !important;
}

/* --- Date stamps between articles --- */
.ticket-article-item .article-meta-clip .article-content-meta {
  font-size: 12px !important;
  color: var(--slate-400) !important;
}

/* --- Article delivery notifications (the grey bar between articles) --- */
.ticket-article-item .is-deliveryPermanentFailed,
.ticket-article-delivery-message {
  font-size: 12px !important;
  color: var(--slate-500) !important;
  background: var(--slate-50) !important;
  border-radius: var(--r-md) !important;
  padding: 8px 16px !important;
}

/* --- Action bar: more prominent --- */
.js-article-actions .article-actions {
  display: flex !important;
  justify-content: center !important;
  gap: 24px !important;
  padding: 8px 16px !important;
  background: var(--slate-50) !important;
  border-radius: 0 0 var(--r-lg) var(--r-lg) !important;
  border-top: 1px solid var(--slate-200) !important;
}

.js-article-actions .article-actions a,
.js-article-actions .article-actions button {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 5px 12px !important;
  border-radius: var(--r-md) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--slate-500) !important;
  transition: all 150ms var(--ease) !important;
}

.js-article-actions .article-actions a:hover,
.js-article-actions .article-actions button:hover {
  color: var(--navy-500) !important;
  background: var(--navy-50) !important;
}

/* --- Update button: separation + refinement --- */
.attributeBar {
  gap: 8px !important;
}

.attributeBar .js-submitDropdown,
.attributeBar .btn.btn--split--first.js-submit,
.attributeBar .js-submit {
  margin-left: 8px !important;
}

/* --- Gap between STAY ON TAB and Update --- */
.attributeBar .buttonDropdown.dropdown--actions.dropup {
  margin-right: 16px !important;
}

/* Ensure the submit group has spacing from STAY ON TAB */
.attributeBar .btn-group {
  margin-left: 8px !important;
}


/* --- System/delivery notification articles --- */
.ticket-article-item.system {
  background: var(--slate-50) !important;
  border: 1px dashed var(--slate-200) !important;
  border-radius: 8px !important;
  padding: 6px 16px !important;
  opacity: 0.65 !important;
  margin-bottom: 12px !important;
}

.ticket-article-item.system .small.task-subline {
  font-size: 11px !important;
  color: var(--navy-500) !important;
  text-align: center !important;
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  letter-spacing: 0.02em !important;
  font-weight: 600 !important;
}

.ticket-article-item.system .js-article-actions,
.ticket-article-item.system .article-meta-clip {
  display: none !important;
}

.ticket-article-item.system .textBubble,
.ticket-article-item.system .bubble-gap,
.ticket-article-item.system .internal-border,
.ticket-article-item.system .article-content {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* --- Internal notes: monospace typography --- */
.ticket-article-item.is-internal .richtext-content,
.ticket-article-item.is-internal .textBubble-content,
.ticket-article-item.is-internal .articleNewEdit-body {
  font-family: 'SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', monospace !important;
  font-size: 13px !important;
  letter-spacing: 0.02em !important;
}

/* --- Fix article-new note input: remove double border --- */

/* --- editControls position fix for new reply form layout --- */
/* Email type: Zammad sets top:159px which was for old padding.
   Adjust to match new compact form-groups (6px padding vs 12px) */
.article-add[data-type='email'] .editControls {
  top: 110px !important;
}

/* Ensure editControls don't overlap the card content */
.article-add .editControls {
  z-index: 5 !important;
}

/* editControls icons: muted, smaller, cleaner */
.article-add .editControls-icon {
  opacity: 0.5 !important;
  transition: opacity 150ms var(--ease) !important;
}
.article-add .editControls-icon:hover {
  opacity: 1 !important;
}

/* --- Signature: contained inside card, subtle separator --- */
.article-add .textBubble .signature {
  border-top: 1px solid rgba(0,0,0,0.06) !important;
  padding-top: 8px !important;
  margin-top: 12px !important;
  color: var(--slate-500) !important;
  font-size: 13px !important;
}

/* Signature links */
.article-add .textBubble .signature a {
  color: var(--navy-400) !important;
}

/* --- Fix: editControls icons must not visually enter the card --- */
/* The card (internal-border) needs left-margin to make room for editControls */
.article-add .article-content.bubble-gap {
  margin-left: 45px !important;
}

/* Compensate: article-new width accounts for the margin */
div.article-new {
  width: calc(100% - 100px) !important;
}
/* --- Signature: ensure it doesn't overlap attachment --- */
.article-add .textBubble .signature {
  margin-bottom: 4px !important;
}

/* --- Fix signature bleeding outside card --- */
.article-add .internal-border .textBubble-content,
.article-add .internal-border .richtext-content {
  padding-bottom: 4px !important;
}

/* --- Fix: internal-border overflow visible (attachment pill needs room) --- */
.article-add .internal-border {
  overflow: visible !important;
}
.article-add .textBubble .textBubble-footer {
  margin-bottom: 4px !important;
}

/* ============================================
   ATTACHMENT BUTTON — Unified (replaces all previous attachment rules)
   DOM: .internal-border > .textBubble > .article-attachment > .attachmentPlaceholder
        > span.attachmentPlaceholder-inputHolder.fileUpload
          > input[type=file] + label.attachmentPlaceholder-label
   ============================================ */

/* Container: right-aligned, inside the card */
.article-add .article-attachment {
  padding: 4px 16px 12px !important;
  margin: 0 !important;
}

.article-add .attachmentPlaceholder {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* Hide the "Enter Note or" hint text */
.article-add .attachmentPlaceholder-hint {
  display: none !important;
}

/* The file input wrapper */
.article-add .attachmentPlaceholder-inputHolder {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
}

/* The label IS the visible button — hide original text, show "Attach Files" */
.article-add .attachmentPlaceholder-label {
  font-size: 0 !important;
  color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--navy-50) !important;
  border: 1px solid var(--navy-200) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  transition: all 150ms var(--ease) !important;
  white-space: nowrap !important;
}

.article-add .attachmentPlaceholder-label::before {
  content: '\1F4CE' !important;
  font-size: 13px !important;
}

.article-add .attachmentPlaceholder-label::after {
  content: 'Attach Files' !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--navy-500) !important;
  letter-spacing: 0.02em !important;
}

.article-add .attachmentPlaceholder-label:hover {
  background: var(--navy-100) !important;
  border-color: var(--navy-300) !important;
  box-shadow: 0 2px 6px rgba(0, 57, 114, 0.12) !important;
  transform: translateY(-1px) !important;
}

/* Hide the native file input (it triggers via the label) */
.article-add .attachmentPlaceholder-inputHolder input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
}

/* --- FORCE right alignment: every parent in the chain --- */
.article-add .article-attachment,
.article-add .article-attachment .attachmentPlaceholder,
.article-add .article-attachment .attachmentPlaceholder .attachmentPlaceholder-inputHolder,
.article-add .article-attachment .attachmentPlaceholder span.fileUpload {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}

/* ============================================
   NEW TICKET FORM — Premium polish
   DOM: .newTicket > .box--newTicket > .page-content
        > .tabs.type-tabs (tabs)
        > form.ticket-create
            > .ticket-form-top (Title, Customer, Text)
            > .formset-inset > .ticket-form-middle + .ticket-form-bottom
            > .form-controls (Cancel + Create)
   ============================================ */

/* --- Page container --- */
.newTicket .box.box--newTicket {
  background: var(--bg-card) !important;
  border-radius: var(--r-xl) !important;
  box-shadow: var(--shadow-md) !important;
  padding: 32px 40px !important;
  margin: 24px auto !important;
}

/* --- Page title --- */
.newTicket .page-header h1 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--slate-900) !important;
  letter-spacing: -0.02em !important;
}

/* --- Type tabs: fix icon alignment --- */
.tabs.type-tabs .tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  vertical-align: middle !important;
}

.tabs.type-tabs .tab .icon,
.tabs.type-tabs .tab svg,
.tabs.type-tabs .tab .tab-icon {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  vertical-align: middle !important;
  position: relative !important;
  top: 0 !important;
}

/* --- Form sections: unified white background --- */
.newTicket .ticket-form-top,
.newTicket .article-form-top,
.newTicket .ticket-form-middle,
.newTicket .ticket-form-bottom {
  background: transparent !important;
}

/* --- Formset-inset: remove the grey background break --- */
.newTicket .formset-inset {
  background: var(--bg-card) !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}

/* --- Form labels: consistent with system --- */
.newTicket .formGroup-label,
.newTicket .form-group label,
.newTicket .form-group-label {
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--slate-400) !important;
  margin-bottom: 4px !important;
}

/* --- Form inputs: recessed premium style --- */
.newTicket .form-control,
.newTicket input[type="text"],
.newTicket textarea,
.newTicket select {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-md) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  color: var(--text-primary) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
  transition: all 200ms var(--ease) !important;
}

.newTicket .form-control:focus,
.newTicket input:focus,
.newTicket textarea:focus,
.newTicket select:focus {
  background: #FFFFFF !important;
  border-color: var(--navy-400) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03), 0 0 0 3px var(--accent-ring) !important;
  outline: none !important;
}

/* --- TAGS field: remove blue highlight, match system --- */
.newTicket .form-group.tags,
.newTicket .token-input,
.newTicket .tokenfield {
  background: var(--slate-50) !important;
  border-color: var(--slate-200) !important;
}

.newTicket .token-input:focus,
.newTicket .tokenfield.focus {
  background: #FFFFFF !important;
  border-color: var(--navy-400) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}

/* Remove Zammad's blue highlight on tags parent */
.newTicket .form-group.is-focused,
.newTicket .form-group.has-focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- Owner/State/Priority section: no grey break --- */
.newTicket .horizontal.two-columns {
  background: transparent !important;
  gap: 16px !important;
}

/* --- Attachment link in new ticket: match reply form style --- */
.newTicket .attachmentPlaceholder-label {
  font-size: 0 !important;
  color: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: var(--navy-50) !important;
  border: 1px solid var(--navy-200) !important;
  border-radius: 20px !important;
  padding: 6px 16px !important;
  cursor: pointer !important;
  transition: all 150ms var(--ease) !important;
}

.newTicket .attachmentPlaceholder-label::before {
  content: '\1F4CE' !important;
  font-size: 13px !important;
}

.newTicket .attachmentPlaceholder-label::after {
  content: 'Attach Files' !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--navy-500) !important;
  letter-spacing: 0.02em !important;
}

.newTicket .attachmentPlaceholder-label:hover {
  background: var(--navy-100) !important;
  border-color: var(--navy-300) !important;
  box-shadow: 0 2px 6px rgba(0, 57, 114, 0.12) !important;
  transform: translateY(-1px) !important;
}

.newTicket .attachmentPlaceholder-hint {
  display: none !important;
}

.newTicket .attachmentPlaceholder {
  display: flex !important;
  justify-content: flex-end !important;
}

.newTicket .attachmentPlaceholder-inputHolder input[type="file"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
}

/* --- Form controls bar: clean separator --- */
.newTicket .form-controls {
  border-top: 1px solid var(--slate-200) !important;
  padding-top: 20px !important;
  margin-top: 24px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: transparent !important;
}

/* Cancel link */
.newTicket .js-cancel {
  color: var(--slate-400) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.newTicket .js-cancel:hover {
  color: var(--red) !important;
}

/* --- New Ticket fixes round 2 --- */

/* TAGS: kill Zammad's blue highlight band */
.newTicket .form-group.tags,
.newTicket .form-group:last-child,
.newTicket .controls .tag-field,
.newTicket .tokenfield,
.newTicket .form-group[data-attribute-name="tag_list"] {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Tags input field itself */
.newTicket .tokenfield .token-input,
.newTicket .form-group[data-attribute-name="tag_list"] input {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* Owner/State/Priority: restore two-column layout */
.newTicket .ticket-form-middle.horizontal.two-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* Priority spans full width (3rd item) */
.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:nth-child(3) {
  grid-column: 1 / 2 !important;
}

/* Attach Files in new ticket: force right */
.newTicket .attachmentPlaceholder {
  display: flex !important;
  justify-content: flex-end !important;
  width: 100% !important;
}
.newTicket .attachmentPlaceholder span.fileUpload {
  display: flex !important;
  justify-content: flex-end !important;
}

/* --- New Ticket: tab icon vertical alignment fix --- */
.tabs.type-tabs .tab .icon,
.tabs.type-tabs .tab svg {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  top: 0 !important;
  position: relative !important;
  display: inline-flex !important;
  align-self: center !important;
}

/* The tab label text: ensure same baseline */
.tabs.type-tabs .tab {
  line-height: 1 !important;
}

/* --- Customer field: match other inputs --- */
.newTicket .form-group[data-attribute-name="customer_id"] .form-control,
.newTicket .form-group[data-attribute-name="customer_id"] select,
.newTicket .form-group[data-attribute-name="customer_id"] .js-input {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
  padding: 10px 14px !important;
  font-size: 14px !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* Customer dropdown chevron: proper alignment */
.newTicket .form-group[data-attribute-name="customer_id"] .controls::after,
.newTicket .form-group[data-attribute-name="customer_id"] select {
  padding-right: 32px !important;
}

/* Customer field focus */
.newTicket .form-group[data-attribute-name="customer_id"] .form-control:focus,
.newTicket .form-group[data-attribute-name="customer_id"] .js-input:focus {
  background: #FFFFFF !important;
  border-color: var(--navy-400) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03), 0 0 0 3px var(--accent-ring) !important;
}

/* --- New Ticket: Owner/State/Priority proper 2-col grid --- */
.newTicket .ticket-form-middle.horizontal.two-columns {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px 24px !important;
}

/* Owner: full row */
.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:first-child {
  grid-column: 1 / -1 !important;
}

/* State + Priority: side by side */
.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:nth-child(2),
.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:nth-child(3) {
  grid-column: auto !important;
}

/* Make selects full width inside their grid cell */
.newTicket .ticket-form-middle select,
.newTicket .ticket-form-middle .form-control {
  width: 100% !important;
}

/* --- New Ticket: Owner/State/Priority ALL in one row --- */
.newTicket .ticket-form-middle.horizontal.two-columns {
  grid-template-columns: 1fr 1fr 1fr !important;
}

.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:first-child,
.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:nth-child(2),
.newTicket .ticket-form-middle.horizontal.two-columns > .form-group:nth-child(3) {
  grid-column: auto !important;
}

/* --- Tags input: match system input height/style --- */
.newTicket .form-group[data-attribute-name="tag_list"] .token-input,
.newTicket .form-group[data-attribute-name="tag_list"] .tokenfield,
.newTicket .form-group[data-attribute-name="tag_list"] .form-control {
  padding: 10px 14px !important;
  min-height: 44px !important;
  font-size: 14px !important;
  width: 100% !important;
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
}

/* --- Customer chevron: inside the border, not overlapping --- */
.newTicket .form-group[data-attribute-name="customer_id"] .controls {
  position: relative !important;
}

.newTicket .form-group[data-attribute-name="customer_id"] .icon-arrow-down,
.newTicket .form-group[data-attribute-name="customer_id"] .arrow,
.newTicket .form-group[data-attribute-name="customer_id"] select {
  padding-right: 36px !important;
}

/* If chevron is a pseudo-element or icon, push it inside */
.newTicket .form-group[data-attribute-name="customer_id"] .icon,
.newTicket .form-group[data-attribute-name="customer_id"] svg.icon {
  right: 12px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  position: absolute !important;
  pointer-events: none !important;
  color: var(--slate-400) !important;
  fill: var(--slate-400) !important;
  width: 14px !important;
  height: 14px !important;
}

/* --- Tags tokenfield: kill native highlight, match system --- */
.newTicket div.tokenfield.form-control,
.newTicket .tokenfield.form-control {
  background: var(--slate-50) !important;
  border: 1px solid var(--slate-200) !important;
  border-radius: var(--r-md) !important;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
  padding: 6px 14px !important;
  min-height: 44px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.newTicket div.tokenfield.form-control:focus-within,
.newTicket div.tokenfield.form-control.focus,
.newTicket div.tokenfield.form-control:focus {
  background: #FFFFFF !important;
  border-color: var(--navy-400) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.03), 0 0 0 3px var(--accent-ring) !important;
  outline: none !important;
}

/* The input inside tokenfield */
.newTicket div.tokenfield .token-input {
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  outline: none !important;
  padding: 4px 0 !important;
  font-size: 14px !important;
  min-height: auto !important;
}

/* ============================================
   MODALS / CONFIRMATION DIALOGS — Premium
   ============================================ */

/* Modal backdrop — clean, no blur (D30 revised) */
.modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.fade.in,
div.modal-backdrop,
div.modal-backdrop.in {
  background: rgba(0, 13, 31, 0.45) !important;
  opacity: 1 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: opacity 150ms ease !important;
}
html[data-theme="dark"] .modal-backdrop,
html[data-theme="dark"] .modal-backdrop.in,
html[data-theme="dark"] .modal-backdrop.fade.in,
html[data-theme="dark"] div.modal-backdrop,
html[data-theme="dark"] div.modal-backdrop.in {
  background: rgba(0, 0, 0, 0.55) !important;
}

/* Modal container */
.modal-dialog,
.modal .modal-dialog {
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow:
    0 20px 60px rgba(0, 13, 31, 0.25),
    0 8px 20px rgba(0, 13, 31, 0.15) !important;
  border: none !important;
}

.modal-content,
.modal .modal-content {
  border: none !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

/* Modal header: gradient navy */
.modal .modal-header,
.modal header,
.modal-header {
  background: linear-gradient(135deg, var(--navy-600) 0%, var(--navy-500) 100%) !important;
  color: #FFFFFF !important;
  padding: 16px 24px !important;
  border-bottom: none !important;
}

.modal .modal-header h1,
.modal .modal-header h2,
.modal .modal-header h3,
.modal .modal-header .modal-title,
.modal-header .modal-title {
  color: #FFFFFF !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* Close X button */
.modal .modal-header .close,
.modal .js-close,
.modal-header .close {
  color: rgba(255,255,255,0.7) !important;
  opacity: 1 !important;
  font-size: 20px !important;
  font-weight: 300 !important;
  transition: color 150ms var(--ease) !important;
  text-shadow: none !important;
}

.modal .modal-header .close:hover,
.modal .js-close:hover,
.modal-header .close:hover {
  color: #FFFFFF !important;
}

/* Modal body */
.modal .modal-body,
.modal-body {
  padding: 24px !important;
  font-size: 14px !important;
  color: var(--slate-700) !important;
  line-height: 1.6 !important;
}

/* Modal footer / button area */
.modal .modal-footer,
.modal-footer,
.modal .form-controls {
  padding: 16px 24px !important;
  background: var(--slate-50) !important;
  border-top: 1px solid var(--slate-200) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Cancel/secondary link in modals */
.modal .js-cancel,
.modal .btn--text,
.modal .cancel-action,
.modal a.align-left,
.modal-footer .btn-default,
.modal-footer a {
  color: var(--slate-400) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  transition: color 150ms var(--ease) !important;
}

.modal .js-cancel:hover,
.modal .btn--text:hover,
.modal a.align-left:hover,
.modal-footer a:hover {
  color: var(--slate-600) !important;
}

/* Danger/Discard button */
.modal .btn--danger,
.modal .btn-danger,
.modal .btn.btn--danger {
  background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25) !important;
  transition: all 150ms var(--ease) !important;
}

.modal .btn--danger:hover,
.modal .btn-danger:hover {
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  transform: translateY(-1px) !important;
}

.modal .btn--danger:active,
.modal .btn-danger:active {
  transform: translateY(0) scale(0.98) !important;
}

/* Primary/Submit button in modals */
.modal .btn--primary,
.modal .btn.btn--primary,
.modal .btn.btn--success {
  background: linear-gradient(135deg, var(--navy-500) 0%, var(--navy-600) 100%) !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: var(--r-md) !important;
  padding: 10px 24px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(0, 57, 114, 0.25) !important;
  transition: all 150ms var(--ease) !important;
}

.modal .btn--primary:hover,
.modal .btn.btn--primary:hover {
  box-shadow: 0 4px 14px rgba(0, 57, 114, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* ============================================
   SIDEBAR — Border enterprise (Research D32)
   ============================================ */
.navigation {
  box-shadow: none !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Logo container — arriba del searchbar */
.navigation .search {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: transparent !important;
}

.navigation .search form.search-holder {
  width: 100% !important;
}

.navigation .logo.js-toggleNotifications {
  display: inline-flex !important;
  align-items: center;
  justify-content: flex-start;
  width: auto !important;
  padding: 4px 0 !important;
  cursor: pointer;
  position: relative;
  background: transparent !important;
  margin-left: 0px;
  padding-left: 0px;
}

.navigation .logo.js-toggleNotifications img.custom-logo {
  width: 100%;
  max-height: 38px;
  object-fit: contain;
}

/* Ocultar SVG del pájaro cuando se reemplaza por logo */
.navigation .logo.js-toggleNotifications svg.icon-logo {
  display: none !important;
}

/* B30 — Force logo visible during search focus (Zammad hides it natively) */
.navigation .search .logo,
.navigation .search .logo.js-toggleNotifications,
.navigation.vertical .search .logo,
.navigation .search.focused .logo,
.navigation .search.is-focused .logo,
.navigation .search.has-focus .logo,
.navigation.vertical.is-not-collapsed .search .logo {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: relative !important;
  width: auto !important;
  min-height: 30px !important;
}

/* ============================================
   DARK MODE — Navy palette (D34)
   Trigger: html[data-theme="dark"]
   ============================================ */

/* --- Variables root override --- */
html[data-theme="dark"] {
  --bg-page: #091628 !important;
  --bg-card: #0f2035 !important;
  --text-primary: #d6e4f0 !important;
  --text-secondary: #7a9abb !important;
  --text-muted: #4a6d8c !important;
  --border: #1a3450 !important;
  --border-subtle: rgba(100,170,240,0.08) !important;
  --accent-light: rgba(0,57,114,0.35) !important;
  --sidebar-bg: #091628 !important;
  --nav-bg: #060f1e !important;
  --accent-ring: rgba(59,130,246,0.25) !important;
  --s-new-bg: #0c2545; --s-new-text: #93c5fd;
  --s-open-bg: #2a2210; --s-open-text: #fbbf24;
  --s-pending-bg: #2a1510; --s-pending-text: #fb923c;
  --s-closed-bg: #0c2a18; --s-closed-text: #4ade80;
}

/* --- Body and main containers --- */
html[data-theme="dark"] body,
html[data-theme="dark"] .content,
html[data-theme="dark"] .main-content,
html[data-theme="dark"] #app {
  background: #091628 !important;
}

/* --- Ticket Zoom containers --- */
html[data-theme="dark"] .ticketZoom,
html[data-theme="dark"] .ticketZoom-header,
html[data-theme="dark"] .ticketZoom-controls {
  background: #091628 !important;
  color: #d6e4f0 !important;
}

/* --- Main flex containers --- */
html[data-theme="dark"] .main,
html[data-theme="dark"] .main.no-padding,
html[data-theme="dark"] .flex {
  background: #091628 !important;
}

/* --- Article cards --- */
html[data-theme="dark"] .ticket-article-item,
html[data-theme="dark"] .article-content,
html[data-theme="dark"] .ticket-article,
html[data-theme="dark"] .article-new,
html[data-theme="dark"] .textBubble,
html[data-theme="dark"] .textBubble-content {
  background: #0f2035 !important;
  color: #d6e4f0 !important;
}

/* --- Action bars (set to internal, reply, forward, split) --- */
html[data-theme="dark"] .js-article-actions,
html[data-theme="dark"] .article-actions,
html[data-theme="dark"] .js-article-action {
  background: #0a1a2e !important;
  color: #7a9abb !important;
}

/* --- Right sidebar panel — paint ONLY inner content, leave tabsSidebar transparent --- */
/* tabsSidebar + holder stay transparent so native collapse behavior is preserved (same as light mode) */
html[data-theme="dark"] .tabsSidebar,
html[data-theme="dark"] .tabsSidebar-holder {
  background: transparent !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .tabsSidebar .sidebar,
html[data-theme="dark"] .sidebar-content,
html[data-theme="dark"] .tabsSidebar-tab {
  background: #0b1c30 !important;
  color: #d6e4f0 !important;
}

/* --- Selects/inputs in right sidebar --- */
html[data-theme="dark"] .tabsSidebar select,
html[data-theme="dark"] .tabsSidebar input,
html[data-theme="dark"] .tabsSidebar .controls {
  background: #132a42 !important;
  color: #d6e4f0 !important;
  border-color: #1a3450 !important;
}

/* --- Bottom attribute bar (CLOSE TAB / Update) --- */
html[data-theme="dark"] .attributeBar,
html[data-theme="dark"] .attributeBar-inner,
html[data-theme="dark"] .js-attributeBar,
html[data-theme="dark"] .attributeBar-draft {
  background: #0a1a2e !important;
  border-color: #1a3450 !important;
  color: #d6e4f0 !important;
}

/* --- Tab bar inferior --- */
html[data-theme="dark"] .taskbar,
html[data-theme="dark"] .tasks-navigation,
html[data-theme="dark"] .taskbar-action,
html[data-theme="dark"] .navigation-menu-item {
  background: #060f1e !important;
}

/* --- Overview sidebar --- */
html[data-theme="dark"] .sidebar-overview,
html[data-theme="dark"] .js-overviewNavigatorContainer,
html[data-theme="dark"] .overview-navigator {
  background: #091628 !important;
  color: #d6e4f0 !important;
}

/* --- Scroll page header (sticky bar on scroll) --- */
html[data-theme="dark"] .scrollPageHeader,
html[data-theme="dark"] .scrollPageAlert,
html[data-theme="dark"] .tabsSidebar-sidebarSpacer,
html[data-theme="dark"] .tabsSidebar-tabsSpacer {
  background: #091628 !important;
  color: #d6e4f0 !important;
  border-color: #1a3450 !important;
}

/* --- Sidebar icon strip (right side) — transparent, inherits page bg like light mode --- */
html[data-theme="dark"] .tabsSidebar-tabs,
html[data-theme="dark"] .tabsSidebar-tabs .tab {
  background: transparent !important;
}
/* Icons use muted slate, hover uses bright blue — matches light mode pattern */
html[data-theme="dark"] .tabsSidebar-tabs .tab .icon,
html[data-theme="dark"] .tabsSidebar-tabs .tab svg {
  color: #4a6d8c !important;
  fill: #4a6d8c !important;
}
html[data-theme="dark"] .tabsSidebar-tabs .tab:hover .icon,
html[data-theme="dark"] .tabsSidebar-tabs .tab:hover svg,
html[data-theme="dark"] .tabsSidebar-tabs .tab.is-active .icon,
html[data-theme="dark"] .tabsSidebar-tabs .tab.is-active svg {
  color: #93c5fd !important;
  fill: #93c5fd !important;
}

/* --- Article container background — transparent behind cards --- */
html[data-theme="dark"] .ticket-article,
html[data-theme="dark"] .ticket-article-view,
html[data-theme="dark"] .article-view {
  background: transparent !important;
}

html[data-theme="dark"] .ticketZoom-body,
html[data-theme="dark"] .scrollPageContent {
  background: #091628 !important;
}

/* --- Action bars — subtle dark --- */
html[data-theme="dark"] .js-article-actions,
html[data-theme="dark"] .article-actions {
  background: #0c1e33 !important;
  border-color: #1a3450 !important;
}

/* --- System notifications (email routing) --- */
html[data-theme="dark"] .ticket-article-item.is-system {
  background: rgba(12,37,69,0.5) !important;
  border-color: #1a3450 !important;
}

html[data-theme="dark"] .ticket-article-item.is-system .textBubble-content,
html[data-theme="dark"] .ticket-article-item.is-system .textBubble-content a,
html[data-theme="dark"] .ticket-article-item.is-system a {
  color: #93c5fd !important;
  opacity: 1 !important;
}

/* --- System notifications — force visibility in dark mode --- */
html[data-theme="dark"] .ticket-article-item.is-system,
html[data-theme="dark"] .ticket-article-item.is-system .textBubble,
html[data-theme="dark"] .ticket-article-item.is-system .textBubble-content,
html[data-theme="dark"] .ticket-article-item.system,
html[data-theme="dark"] .ticket-article-item.system .textBubble,
html[data-theme="dark"] .ticket-article-item.system .textBubble-content {
  opacity: 1 !important;
  color: #93c5fd !important;
  background: rgba(12,37,69,0.5) !important;
}

html[data-theme="dark"] .ticket-article-item.is-system .textBubble-content a,
html[data-theme="dark"] .ticket-article-item.system .textBubble-content a {
  color: #93c5fd !important;
  opacity: 1 !important;
}

/* --- System notification subline text --- */
html[data-theme="dark"] .ticket-article-item.system .task-subline,
html[data-theme="dark"] .ticket-article-item.system small {
  color: #336FA6 !important;
}

/* --- Action bars — transparent to match parent card (D34 fix) --- */
html[data-theme="dark"] .js-article-actions,
html[data-theme="dark"] .js-article-actions .article-content.article-actions {
  background: transparent !important;
  border-color: rgba(100,170,240,0.08) !important;
}

/* --- Internal notes — dark mode (D34 fix v3) --- */
html[data-theme="dark"] .ticket-article-item.is-internal {
  background: rgba(245,158,11,0.06) !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}

html[data-theme="dark"] .ticket-article-item.is-internal .article-content,
html[data-theme="dark"] .ticket-article-item.is-internal .textBubble,
html[data-theme="dark"] .ticket-article-item.is-internal .textBubble-content {
  background: transparent !important;
  color: #c4a35a !important;
}

html[data-theme="dark"] .ticket-article-item.is-internal .js-article-actions,
html[data-theme="dark"] .ticket-article-item.is-internal .js-article-actions .article-content.article-actions {
  background: transparent !important;
  border-color: rgba(255,255,255,0.08) !important;
}

html[data-theme="dark"] .ticket-article-item.is-internal .article-meta-clip.top,
html[data-theme="dark"] .ticket-article-item.is-internal .article-meta-clip {
  border-top: 0.5px solid rgba(255,255,255,0.08) !important;
}

/* --- SEE MORE/LESS — light mode pill button + gradient fade --- */
.textBubble-overflowContainer,
.textBubble .textBubble-overflowContainer,
.textBubble-overflowContainer.hide {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

.textBubble-overflowContainer::before,
.textBubble .textBubble-overflowContainer::before,
.textBubble-overflowContainer.hide::before {
  background: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.8) 40%, #FFFFFF 100%) !important;
  background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,0.8) 40%, #FFFFFF 100%) !important;
  display: block !important;
}

.textBubble-overflowContainer.is-open,
.textBubble-overflowContainer.is-open::before {
  background: transparent !important;
  background-image: none !important;
  display: block !important;
}

.btn.btn--text.js-toggleFold,
.ticket-article-item .btn.btn--text.js-toggleFold {
  background: linear-gradient(135deg, #003972 0%, #004a8f 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 6px 20px !important;
  margin: 8px auto 0 !important;
  display: block !important;
  width: fit-content !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 2px 6px rgba(0,57,114,0.25) !important;
  transition: all 150ms ease !important;
}

.btn.btn--text.js-toggleFold:hover,
.ticket-article-item .btn.btn--text.js-toggleFold:hover {
  background: linear-gradient(135deg, #004a8f 0%, #003060 100%) !important;
  box-shadow: 0 4px 12px rgba(0,57,114,0.35) !important;
  transform: translateY(-1px) !important;
}

/* --- SEE MORE/LESS — navy gradient fade + pill button (D34 v4 final) --- */
html[data-theme="dark"] .textBubble-overflowContainer,
html[data-theme="dark"] .textBubble .textBubble-overflowContainer,
html[data-theme="dark"] .textBubble-overflowContainer.hide {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}

html[data-theme="dark"] .textBubble-overflowContainer::before,
html[data-theme="dark"] .textBubble .textBubble-overflowContainer::before,
html[data-theme="dark"] .textBubble-overflowContainer.hide::before {
  background: linear-gradient(rgba(15,32,53,0), rgba(15,32,53,0.8) 40%, #0f2035 100%) !important;
  background-image: linear-gradient(rgba(15,32,53,0), rgba(15,32,53,0.8) 40%, #0f2035 100%) !important;
  display: block !important;
}

html[data-theme="dark"] .textBubble-overflowContainer.is-open,
html[data-theme="dark"] .textBubble-overflowContainer.is-open::before {
  background: transparent !important;
  background-image: none !important;
  display: block !important;
}

html[data-theme="dark"] .btn.btn--text.js-toggleFold,
html[data-theme="dark"] .ticket-article-item .btn.btn--text.js-toggleFold {
  background: #132a42 !important;
  color: #93c5fd !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 6px !important;
  padding: 6px 20px !important;
  margin: 8px auto 0 !important;
  display: block !important;
  width: fit-content !important;
  text-align: center !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
}

/* --- Reply composer — dark mode (D34) --- */
html[data-theme="dark"] .article-new,
html[data-theme="dark"] div.article-new {
  background: transparent !important;
  border-color: transparent !important;
}

html[data-theme="dark"] .article-new form.article-add,
html[data-theme="dark"] .article-new form.article-add.is-internal {
  background: transparent !important;
  border-color: #1a3450 !important;
}

html[data-theme="dark"] .article-new .articleNewEdit-body,
html[data-theme="dark"] .article-new .richtext-content,
html[data-theme="dark"] .article-new .richtext,
html[data-theme="dark"] .article-new .js-writeArea,
html[data-theme="dark"] .article-new [contenteditable],
html[data-theme="dark"] .article-new textarea {
  background: #0f2035 !important;
  color: #d6e4f0 !important;
}

html[data-theme="dark"] .article-new .editControls,
html[data-theme="dark"] .article-new .article-content,
html[data-theme="dark"] .article-new .bubble-gap {
  background: transparent !important;
  border-color: #1a3450 !important;
}

/* --- Reply form borders — navy instead of amber/cream --- */
html[data-theme="dark"] .article-new .article-meta-clip,
html[data-theme="dark"] .article-new .article-meta-clip.top,
html[data-theme="dark"] .article-new .article-meta-clip.bottom {
  background: transparent !important;
  border-color: #1a3450 !important;
}

/* --- Reply composer — outer wrapper transparent (D34 fix) --- */
html[data-theme="dark"] .article-new .article-content.bubble-gap,
html[data-theme="dark"] .article-new div.article-content,
html[data-theme="dark"] .article-new .internal-border {
  background: transparent !important;
}

/* --- Attachment area — only pill has bg, rest transparent (D34 fix v2) --- */
html[data-theme="dark"] .article-new .attachments,
html[data-theme="dark"] .article-new .article-attachment,
html[data-theme="dark"] .article-new div.article-attachment {
  background: transparent !important;
}

html[data-theme="dark"] .article-new .attachmentPlaceholder {
  background: transparent !important;
}

html[data-theme="dark"] .article-new .attachmentPlaceholder-hint {
  background: transparent !important;
  color: #4a6d8c !important;
}

html[data-theme="dark"] .article-new .attachmentPlaceholder-inputHolder,
html[data-theme="dark"] .article-new .attachmentPlaceholder-inputHolder.fileUpload {
  background: transparent !important;
}


/* ================================================================
   DARK MODE — Composer fixes (B20 resolved)
   ================================================================ */
html[data-theme="dark"] .articleNewEdit-body:empty::before {
  content: "Create New Note..." !important;
  color: #4a6d8c !important;
  font-style: italic !important;
  pointer-events: none !important;
}
html[data-theme="dark"] .article-new .internal-border {
  border: 2px solid rgba(245, 158, 11, 0.35) !important;
  border-radius: 10px !important;
}
html[data-theme="dark"] .article-new .textBubble,
html[data-theme="dark"] .article-new .textBubble.js-writeArea,
html[data-theme="dark"] .article-new .article-content.bubble-gap {
  border-radius: 10px !important;
}
html[data-theme="dark"] .attachmentPlaceholder-label {
  background: #1a3450 !important;
  color: #a3c4e0 !important;
  border: 1px solid #2a4a6b !important;
  border-radius: 20px !important;
}
html[data-theme="dark"] .attachmentPlaceholder-label::after {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .attachmentPlaceholder-label::before {
  color: #a3c4e0 !important;
}

/* --- Attachment pill: overflow fix + hover (B20) --- */
html[data-theme="dark"] .article-new .attachmentPlaceholder-inputHolder,
html[data-theme="dark"] .attachmentPlaceholder-inputHolder {
  overflow: visible !important;
}
html[data-theme="dark"] .article-new .attachmentPlaceholder-label:hover {
  background: #1e3d5a !important;
  border: 1px solid #3a5a7b !important;
  border-radius: 20px !important;
}
html[data-theme="dark"] .article-new .article-attachment,
html[data-theme="dark"] .article-new .attachmentPlaceholder {
  border-radius: 0 0 10px 10px !important;
}

/* --- Dark mode: ticket number white + spacing --- */
html[data-theme="dark"] .ticket-number,
html[data-theme="dark"] .scrollPageHeader .ticket-number,
html[data-theme="dark"] .ticketZoom-header .ticket-number {
  color: #ffffff !important;
  margin-left: 4px !important;
}

/* ================================================================
   DARK MODE — Nav dropdown unified tone
   ================================================================ */
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light {
  background: #060f1e !important;
  border: 1px solid #1a3450 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li,
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li > a,
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li > a > span,
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li > a .flex,
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li > a .u-textTruncate,
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li span {
  background: transparent !important;
  background-color: transparent !important;
  color: #d6e4f0 !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li:hover {
  background: rgba(0, 57, 114, 0.25) !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li:hover > a,
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li:hover span {
  background: transparent !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li.divider {
  background: #1a3450 !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li.dropdown-header {
  color: #4a6d8c !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu .dropdown-menu.dropdown-menu--light > li.dropdown-menu-item--toggle {
  background: transparent !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .navigation.vertical .user-menu li.user.dropup,
html[data-theme="dark"] .navigation.vertical .user-menu li.user.dropup.open {
  background: transparent !important;
}
/* --- Dark mode toggle switch --- */
html[data-theme="dark"] .dropdown-menu-item--toggle .zammad-switch label {
  background: #336FA6 !important;
}
html[data-theme="dark"] .dropdown-menu-item--toggle .zammad-switch label::after {
  background: #ffffff !important;
}
html[data-theme="dark"] .dropdown-menu-item--toggle .zammad-switch input:not(:checked) + label {
  background: #1a3450 !important;
}
html[data-theme="dark"] .dropdown-menu-item--toggle .zammad-switch input:not(:checked) + label::after {
  background: #7a9abb !important;
}


/* ================================================================
   DARK MODE — Taskbar + Nav cleanup
   ================================================================ */
/* Taskbar tab names transparent */
html[data-theme="dark"] .tasks .nav-tab .nav-tab-name,
html[data-theme="dark"] .tasks .nav-tab .u-textTruncate,
html[data-theme="dark"] .tasks .nav-tab .flex,
html[data-theme="dark"] .tasks .nav-tab-name.u-textTruncate.flex {
  background: transparent !important;
  background-color: transparent !important;
}
/* Separator between ticket tabs only */
html[data-theme="dark"] .navigation.vertical .tasks .nav-tab.task + .nav-tab.task {
  border-top: 1px solid #1a3450 !important;
}
/* Remove separator from Dashboard/Overviews */
html[data-theme="dark"] .navigation.vertical .menu-item.js-dashboardMenuItem,
html[data-theme="dark"] .navigation.vertical .menu-item.js-overviewsMenuItem {
  border-bottom: none !important;
}
/* Remove border under logo */
html[data-theme="dark"] .navigation .logo,
html[data-theme="dark"] .navigation .logo.js-toggleNotifications,
html[data-theme="dark"] .navigation .brand {
  border-bottom: none !important;
}


/* ═══════════════════════════════════════════════════════════════
   DARK MODE — SECONDARY SIDEBAR (Overview List)
   Trigger: html[data-theme="dark"]
   Overrides light mode selectors from section 6.8
   Light mode hover uses inset box-shadow 3px navy for left accent.
   Dark mode changes it to dark navy (#0a1525) for shadow effect.
   ═══════════════════════════════════════════════════════════════ */

/* --- Kill hover/active margin shift (Zammad native expands -10px) --- */
html[data-theme="dark"] .nav-pills.nav-stacked > li > a:hover,
html[data-theme="dark"] .nav-pills.nav-stacked > li > a:focus,
html[data-theme="dark"] .nav-pills.nav-stacked > li.active > a,
html[data-theme="dark"] .nav-pills.nav-stacked > li.active > a:hover,
html[data-theme="dark"] .nav-pills.nav-stacked > li.active > a:focus,
html[data-theme="dark"] .nav-pills.nav-stacked .nav-pills-placeholder {
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 8px !important;
  padding-right: 12px !important;
}

/* --- ALL links base (inactive) — override light #1e3a5f --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li > a,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked li a.horizontal,
html[data-theme="dark"] .sidebar .nav.nav-pills.nav-stacked li a,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li a {
  color: #7a9abb !important;
  background: transparent !important;
  border-top-color: #1a3450 !important;
}

/* --- ALL spans inside links — force color (not inherit) --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li > a > span.local,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li > a > span.u-textTruncate,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li > a > span.local.u-textTruncate,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li > a > span.local,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li > a > span.u-textTruncate {
  color: #7a9abb !important;
  background: transparent !important;
}

/* --- ACTIVE item — override light var(--navy-500) bg --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.active > a,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked li.active a.horizontal,
html[data-theme="dark"] .sidebar .nav.nav-pills.nav-stacked li.active a,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li.active a {
  background: rgba(0,57,114,0.35) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  box-shadow: none !important;
  border-top-color: #1a3450 !important;
}
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.active > a > span.local,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.active > a > span.local.u-textTruncate,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li.active > a > span.local {
  color: #ffffff !important;
}

/* --- HOVER inactive — navy tint + DARK left accent (shadow effect) --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li:not(.active) > a:hover,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li:not(.active) > a:focus,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked li:not(.active) a.horizontal:hover,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li:not(.active) a:hover,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li:not(.active) a:focus {
  background: rgba(0,57,114,0.20) !important;
  color: #d6e4f0 !important;
  border-top-color: #1a3450 !important;
  box-shadow: inset 3px 0 0 #1a3450 !important;
  border-radius: 8px !important;
}
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li:not(.active) > a:hover > span.local,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li:not(.active) > a:hover > span.local.u-textTruncate,
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li:not(.active) > a:hover > span.local {
  color: #d6e4f0 !important;
}

/* --- HOVER on active (no visual change, just kill shift) --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.active > a:hover,
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.active > a:focus {
  background: rgba(0,57,114,0.35) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

/* --- Channel separator (GLOBAL header) --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.channel-separator {
  border-top-color: #1a3450 !important;
}
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.channel-separator > span {
  color: #4a6d8c !important;
}


/* --- NUCLEAR FIX: Force ALL sidebar link text same color --- */
/* Targets every element inside sidebar links EXCEPT badges */
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li:not(.channel-separator) > a *:not(.badge):not(.badge--text) {
  color: #7a9abb !important;
  background: transparent !important;
}
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li.active:not(.channel-separator) > a *:not(.badge):not(.badge--text) {
  color: #ffffff !important;
}
html[data-theme="dark"] .sidebar .nav-pills.nav-stacked li:not(.active):not(.channel-separator) > a:hover *:not(.badge):not(.badge--text) {
  color: #d6e4f0 !important;
}


/* --- GLOBAL items: smaller font + left-aligned (dark mode) --- */
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.channel-separator ~ li > a {
  justify-content: flex-start !important;
  text-align: left !important;
  padding-left: 3px !important;
}
html[data-theme="dark"] ul.nav.nav-pills.nav-stacked > li.channel-separator ~ li > a > span.local.u-textTruncate {
  font-size: 11px !important;
}


/* --- Sidebar: reduce width + padding (dark mode) --- */
html[data-theme="dark"] .sidebar-overview .sidebar,
html[data-theme="dark"] .overview-navigator .sidebar {
  width: 248px !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}



/* ================================================================
   DARK MODE — PHASE 2: All Remaining Views
   Primitive token overrides + explicit component rules
   Covers: table, tabs, dashboard, reporting, admin, 
   new ticket, modals, forms, scrollbars, login
   ================================================================ */

/* --- Primitive token overrides (catch-all) --- */
html[data-theme="dark"] {
  --slate-50:  #0b1c30 !important;
  --slate-100: #132a42 !important;
  --slate-200: #1a3450 !important;
  --slate-300: #1a3450 !important;
  --slate-400: #4a6d8c !important;
  --slate-500: #6f8faa !important;
  --slate-600: #7a9abb !important;
  --slate-700: #a3c4e0 !important;
  --slate-800: #c4dae8 !important;
  --slate-900: #d6e4f0 !important;
  --navy-50:  rgba(0,57,114,0.20) !important;
  --navy-100: rgba(0,57,114,0.30) !important;
  --navy-200: #1a3450 !important;
  --navy-300: #2a4a6b !important;
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2) !important;
  --shadow-md:  0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2) !important;
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5), 0 6px 6px rgba(0,0,0,0.3) !important;
  --shadow-sidebar: 4px 0 8px rgba(0,0,0,0.4), 8px 0 20px rgba(0,0,0,0.2) !important;
}

/* ── TICKET TABLE ── */
html[data-theme="dark"] .table-overview {
  background: #091628 !important;
}
html[data-theme="dark"] table.table.table-hover.table--light,
html[data-theme="dark"] table.table.table-hover {
  background: #0f2035 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
html[data-theme="dark"] table.table-hover thead th.js-tableHead,
html[data-theme="dark"] table.table-hover thead th {
  background: #132a42 !important;
  color: #4a6d8c !important;
  border-bottom: 1px solid #1a3450 !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item {
  background: #0f2035 !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item:hover {
  background: rgba(0,57,114,0.25) !important;
  box-shadow: inset 3px 0 0 #336FA6 !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item td {
  color: #7a9abb !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item td a {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item:hover td a {
  color: #93c5fd !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item td .user-popover {
  color: #7a9abb !important;
}
html[data-theme="dark"] table.table-hover tbody tr.item td.align-right {
  color: #4a6d8c !important;
}

/* ── OVERVIEW HEADER + TITLE ── */
html[data-theme="dark"] .overview-header {
  background: transparent !important;
  border-bottom: none !important;
}
html[data-theme="dark"] .table-overview h1,
html[data-theme="dark"] h1 {
  color: #d6e4f0 !important;
}

/* ── OVERVIEW TOPBAR TABS ── */
html[data-theme="dark"] a.tab.js-tab:not(.active),
html[data-theme="dark"] .tabs a.tab:not(.active) {
  color: #7a9abb !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] a.tab.js-tab:not(.active):hover,
html[data-theme="dark"] .tabs a.tab:not(.active):hover {
  background: rgba(0,57,114,0.20) !important;
  color: #d6e4f0 !important;
  border-color: #2a4a6b !important;
}
html[data-theme="dark"] a.tab.js-tab:not(.active) .badge,
html[data-theme="dark"] a.tab:not(.active) .badge {
  background: #1a3450 !important;
  color: #7a9abb !important;
  box-shadow: none !important;
}

/* ── DASHBOARD TABS ── */
html[data-theme="dark"] .tabs.tabs--big > .tab:not(.active),
html[data-theme="dark"] div.tabs.tabs--big .tab:not(.active) {
  color: #7a9abb !important;
}
html[data-theme="dark"] .tabs.tabs--big > .tab:not(.active):hover,
html[data-theme="dark"] div.tabs.tabs--big .tab:not(.active):hover {
  background: rgba(0,57,114,0.20) !important;
  color: #d6e4f0 !important;
}

/* ── DASHBOARD STAT CARDS ── */
html[data-theme="dark"] .stats-item,
html[data-theme="dark"] .stat-item {
  background: #0f2035 !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .stats-item:hover,
html[data-theme="dark"] .stat-item:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .stats-item *,
html[data-theme="dark"] .stat-item * {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .stats-item small,
html[data-theme="dark"] .stat-item small,
html[data-theme="dark"] .stats-item .text-muted,
html[data-theme="dark"] .stat-item .text-muted {
  color: #4a6d8c !important;
}

/* ── DASHBOARD ACTIVITY STREAM ── */
html[data-theme="dark"] .activity-stream-header,
html[data-theme="dark"] #content_permanent_Dashboard .sidebar-block-title,
html[data-theme="dark"] #content_permanent_Dashboard .sidebar.optional h2 {
  color: #93c5fd !important;
  border-bottom-color: #1a3450 !important;
}
html[data-theme="dark"] #content_permanent_Dashboard .sidebar.optional {
  background: #0b1c30 !important;
  border-left-color: #1a3450 !important;
}
html[data-theme="dark"] .activity-entry,
html[data-theme="dark"] .activity-text,
html[data-theme="dark"] .activity-entry a,
html[data-theme="dark"] .js-activityContent {
  color: #7a9abb !important;
}
html[data-theme="dark"] .activity-entry a strong,
html[data-theme="dark"] .activity-entry strong {
  color: #93c5fd !important;
}
html[data-theme="dark"] .activity-entry small,
html[data-theme="dark"] .activity-entry .activity-time {
  color: #4a6d8c !important;
}

/* ── REPORTING ── */
html[data-theme="dark"] .reporting .panel.panel-default {
  border-color: #1a3450 !important;
  background: #0f2035 !important;
}
html[data-theme="dark"] .reporting .panel-heading {
  background: #132a42 !important;
  color: #4a6d8c !important;
  border-bottom-color: #1a3450 !important;
}
html[data-theme="dark"] .reporting .panel-heading:hover {
  background: rgba(0,57,114,0.20) !important;
  color: #7a9abb !important;
}
html[data-theme="dark"] .reporting .panel-body {
  background: #0f2035 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .reporting .tabs {
  background: #0f2035 !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .reporting .tabs .tab:not(.active) {
  color: #7a9abb !important;
}
html[data-theme="dark"] .reporting .tabs .tab:not(.active):hover {
  background: rgba(0,57,114,0.20) !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .reporting .nav.nav-tabs {
  background: #0b1c30 !important;
}
html[data-theme="dark"] .reporting .nav.nav-tabs > li > a {
  color: #7a9abb !important;
}
html[data-theme="dark"] .reporting .nav.nav-tabs > li > a:hover {
  background: rgba(0,57,114,0.20) !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .reporting table {
  background: #0f2035 !important;
}
html[data-theme="dark"] .reporting table thead th {
  background: #132a42 !important;
  color: #4a6d8c !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .reporting table tbody td {
  color: #7a9abb !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .reporting table tbody td a {
  color: #d6e4f0 !important;
}

/* ── ADMIN PANEL ── */
html[data-theme="dark"] .content--manage,
html[data-theme="dark"] .manage,
html[data-theme="dark"] .page-content {
  background: #091628 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .content-sidebar,
html[data-theme="dark"] .content-sidebar .sidebar-navigation {
  background: #0b1c30 !important;
  border-right-color: #1a3450 !important;
}
html[data-theme="dark"] .content-sidebar a {
  color: #7a9abb !important;
}
html[data-theme="dark"] .content-sidebar a:hover {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .content-sidebar a.active,
html[data-theme="dark"] .content-sidebar .active > a {
  background: rgba(0,57,114,0.35) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] .content-sidebar h2,
html[data-theme="dark"] .content-sidebar .sidebar-header {
  color: #4a6d8c !important;
}
html[data-theme="dark"] .nav-tabs {
  border-bottom-color: #1a3450 !important;
}
html[data-theme="dark"] .nav-tabs li:not(.active) a {
  color: #7a9abb !important;
  border-color: #1a3450 !important;
  background: transparent !important;
}
html[data-theme="dark"] .nav-tabs li:not(.active) a:hover {
  color: #d6e4f0 !important;
  background: rgba(0,57,114,0.15) !important;
  border-color: #2a4a6b !important;
}
html[data-theme="dark"] .page-content h2,
html[data-theme="dark"] .page-content h3 {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .page-content dt,
html[data-theme="dark"] .page-content label,
html[data-theme="dark"] .page-content .key {
  color: #4a6d8c !important;
}
html[data-theme="dark"] .page-content dd,
html[data-theme="dark"] .page-content .value {
  color: #7a9abb !important;
}
html[data-theme="dark"] .page-content .panel,
html[data-theme="dark"] .page-content .box,
html[data-theme="dark"] .settings-list,
html[data-theme="dark"] .channel-email {
  background: #0f2035 !important;
  border-color: #1a3450 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .settings-list table td,
html[data-theme="dark"] .page-content table td {
  color: #7a9abb !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html[data-theme="dark"] .settings-list table td a,
html[data-theme="dark"] .page-content table td a {
  color: #93c5fd !important;
}

/* ── FORMS / INPUTS — global dark ── */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="url"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control {
  background: #132a42 !important;
  color: #d6e4f0 !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] .form-control:focus {
  background: #1a3450 !important;
  border-color: #336FA6 !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.25) !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: #4a6d8c !important;
}

/* ── NEW TICKET FORM ── */
html[data-theme="dark"] .newTicket .box.box--newTicket {
  background: #0f2035 !important;
}
html[data-theme="dark"] .newTicket .page-header h1 {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .newTicket .formGroup-label,
html[data-theme="dark"] .newTicket .form-group label {
  color: #4a6d8c !important;
}
html[data-theme="dark"] .newTicket .formset-inset {
  background: #0f2035 !important;
}
html[data-theme="dark"] .tabs.type-tabs {
  background: #132a42 !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .tabs.type-tabs .tab:not(.active) {
  color: #7a9abb !important;
}
html[data-theme="dark"] .tabs.type-tabs .tab:not(.active):hover {
  background: rgba(0,57,114,0.20) !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .newTicket .attachmentPlaceholder-label {
  background: #1a3450 !important;
  border-color: #2a4a6b !important;
}
html[data-theme="dark"] .newTicket .attachmentPlaceholder-label::after {
  color: #93c5fd !important;
}
html[data-theme="dark"] .newTicket .attachmentPlaceholder-label:hover {
  background: #234060 !important;
  border-color: #3a5a7b !important;
}

/* ── MODALS ── */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .modal .modal-content {
  background: #0f2035 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .modal-body {
  background: #0f2035 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .modal-footer {
  background: #0b1c30 !important;
  border-top-color: #1a3450 !important;
}
html[data-theme="dark"] .modal label {
  color: #d6e4f0 !important;
}

/* ── DROPDOWN MENUS (generic) ── */
html[data-theme="dark"] .dropdown-menu {
  background: #0f2035 !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .dropdown-menu > li > a {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .dropdown-menu > li > a:hover {
  background: rgba(0,57,114,0.25) !important;
  color: #ffffff !important;
}

/* ── POPOVER ── */
html[data-theme="dark"] .popover {
  background: #0f2035 !important;
  border-color: #1a3450 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .popover .arrow::after {
  border-top-color: #0f2035 !important;
}

/* ── CHECKBOXES / RADIO ── */
html[data-theme="dark"] .checkbox label,
html[data-theme="dark"] .radio label {
  color: #d6e4f0 !important;
}

/* ── TAGS ── */
html[data-theme="dark"] .tag,
html[data-theme="dark"] .label.label-tag {
  background: rgba(0,57,114,0.25) !important;
  color: #93c5fd !important;
}

/* ── SCROLLBARS ── */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background-color: #1a3450 !important;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background-color: #2a4a6b !important;
}

/* ── SELECTION ── */
html[data-theme="dark"] ::selection {
  background-color: rgba(0,57,114,0.35) !important;
  color: #d6e4f0 !important;
}

/* ── HR / DIVIDERS ── */
html[data-theme="dark"] hr {
  border-color: #1a3450 !important;
}

/* ── SEARCH HIGHLIGHT ── */
html[data-theme="dark"] mark,
html[data-theme="dark"] .highlight {
  background-color: rgba(59,130,246,0.25) !important;
  color: #d6e4f0 !important;
}

/* ── NO ENTRIES ── */
html[data-theme="dark"] .no-entries,
html[data-theme="dark"] .nothing {
  color: #4a6d8c !important;
}

/* ── CANCEL LINK ── */
html[data-theme="dark"] .newTicket .js-cancel,
html[data-theme="dark"] .cancel-action {
  color: #4a6d8c !important;
}

/* ── LOGIN PAGE ── */
html[data-theme="dark"] .login .form,
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .login .card {
  background: rgba(15,32,53,0.95) !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .login input[type="text"],
html[data-theme="dark"] .login input[type="email"],
html[data-theme="dark"] .login input[type="password"] {
  background: #132a42 !important;
  border-color: #1a3450 !important;
  color: #d6e4f0 !important;
}


/* ================================================================
   DARK MODE — Dashboard (real DOM classes)
   Zammad uses .stat-widget (not .stat-item/.stats-item)
   Zammad native dark uses --background-primary, --text-normal
   ================================================================ */

/* --- Override Zammad native dark mode vars --- */
html[data-theme="dark"] {
  --background-primary: #091628 !important;
  --background-secondary: #0f2035 !important;
  --text-normal: #d6e4f0 !important;
  --text-muted: #4a6d8c !important;
}

/* --- Stat cards: .stat-widget is the real class --- */
html[data-theme="dark"] .stat-widget {
  background: #0f2035 !important;
  border: 1px solid #1a3450 !important;
  border-radius: 10px !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .stat-widget:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
html[data-theme="dark"] .stat-widget * {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .stat-widget small,
html[data-theme="dark"] .stat-widget .text-muted {
  color: #4a6d8c !important;
}

/* --- First Steps tab (inactive) --- */
html[data-theme="dark"] .tabs.tabs--big .tab:not(.active) {
  color: #7a9abb !important;
  background: transparent !important;
}
html[data-theme="dark"] .tabs.tabs--big .tab:not(.active):hover {
  color: #d6e4f0 !important;
  background: rgba(0,57,114,0.20) !important;
}


/* ================================================================
   DARK MODE — Dropdown overflow fix
   .flex class inside dropdowns was inheriting #091628 bg
   from the broad html[data-theme="dark"] .flex rule
   Fix: force transparent on all span/flex inside dropdown menus
   ================================================================ */
html[data-theme="dark"] .dropdown-menu .flex,
html[data-theme="dark"] .dropdown-menu span.flex,
html[data-theme="dark"] .dropdown-menu span.flex.u-textTruncate,
html[data-theme="dark"] .dropdown-menu li span,
html[data-theme="dark"] .dropdown-menu li a span {
  background: transparent !important;
  background-color: transparent !important;
}


/* ================================================================
   DARK MODE — New Ticket form (real DOM)
   All intermediate containers transparent.
   Only card bg (#0f2035) + input bg (#091628) visible.
   ================================================================ */

/* --- Kill ALL intermediate containers --- */
html[data-theme="dark"] .newTicket .form-group,
html[data-theme="dark"] .newTicket .formGroup,
html[data-theme="dark"] .newTicket .ticket-form-top,
html[data-theme="dark"] .newTicket .ticket-form-middle,
html[data-theme="dark"] .newTicket .ticket-form-bottom,
html[data-theme="dark"] .newTicket .article-form-top,
html[data-theme="dark"] .newTicket .formset-inset,
html[data-theme="dark"] .newTicket .form-controls,
html[data-theme="dark"] .newTicket .horizontal,
html[data-theme="dark"] .newTicket .horizontal.two-columns,
html[data-theme="dark"] .newTicket .controls,
html[data-theme="dark"] .newTicket .richtext,
html[data-theme="dark"] .newTicket .richtext-content,
html[data-theme="dark"] .newTicket .attachmentPlaceholder,
html[data-theme="dark"] .newTicket .attachmentPlaceholder-inputHolder,
html[data-theme="dark"] .newTicket .article-attachment,
html[data-theme="dark"] .newTicket .textBubble,
html[data-theme="dark"] .newTicket .bubble-gap,
html[data-theme="dark"] .newTicket .internal-border {
  background: transparent !important;
  background-color: transparent !important;
}

/* --- Card bg --- */
html[data-theme="dark"] .newTicket .box.box--newTicket {
  background: #0f2035 !important;
}

/* --- Inputs recessed --- */
html[data-theme="dark"] .newTicket input,
html[data-theme="dark"] .newTicket textarea,
html[data-theme="dark"] .newTicket select,
html[data-theme="dark"] .newTicket .form-control,
html[data-theme="dark"] .newTicket [contenteditable],
html[data-theme="dark"] .newTicket .articleNewEdit-body {
  background: #091628 !important;
  border: 1px solid #1a3450 !important;
  color: #d6e4f0 !important;
  border-radius: 6px !important;
}

/* --- Token/tags field --- */
html[data-theme="dark"] .newTicket .token-input,
html[data-theme="dark"] .newTicket .tokenfield {
  background: #091628 !important;
  border: 1px solid #1a3450 !important;
}

/* --- Labels --- */
html[data-theme="dark"] .newTicket label,
html[data-theme="dark"] .newTicket .formGroup-label,
html[data-theme="dark"] .newTicket .form-group label {
  color: #7a9abb !important;
}

/* --- New Ticket: page-content MUST be transparent inside card --- */
html[data-theme="dark"] .newTicket .page-content,
html[data-theme="dark"] .newTicket .page-content * :not(input):not(textarea):not(select):not([contenteditable]):not(.articleNewEdit-body):not(.form-control):not(.token-input):not(.tokenfield):not(.tabs):not(.tab):not(.btn):not(.badge):not(.attachmentPlaceholder-label) {
  background: transparent !important;
  background-color: transparent !important;
}


/* ================================================================
   DARK MODE — Focus states + autocompletes (global fix)
   Light mode has #FFFFFF !important on focus — must override
   with higher specificity using html[data-theme="dark"]
   ================================================================ */

/* --- ALL input focus: dark bg, navy glow --- */
html[data-theme="dark"] .newTicket input:focus,
html[data-theme="dark"] .newTicket textarea:focus,
html[data-theme="dark"] .newTicket select:focus,
html[data-theme="dark"] .newTicket .form-control:focus,
html[data-theme="dark"] .newTicket [contenteditable]:focus,
html[data-theme="dark"] input.form-control:focus,
html[data-theme="dark"] textarea.form-control:focus,
html[data-theme="dark"] .form-control:focus {
  background: #0b1c30 !important;
  border-color: #336FA6 !important;
  box-shadow: 0 0 0 3px rgba(51,111,166,0.25) !important;
  color: #d6e4f0 !important;
}

/* --- Token/tags focus: kill white border + bg --- */
html[data-theme="dark"] .tokenfield.focus,
html[data-theme="dark"] .tokenfield:focus-within,
html[data-theme="dark"] .newTicket .tokenfield.focus,
html[data-theme="dark"] .newTicket .token-input:focus,
html[data-theme="dark"] .tokenfield .token-input:focus {
  background: #091628 !important;
  border-color: #336FA6 !important;
  box-shadow: 0 0 0 3px rgba(51,111,166,0.25) !important;
  color: #d6e4f0 !important;
}

/* --- Customer/CC recipientList focus --- */
html[data-theme="dark"] .recipientList-input:focus,
html[data-theme="dark"] .newTicket .recipientList-input:focus {
  background: #091628 !important;
  border-color: #336FA6 !important;
  box-shadow: 0 0 0 3px rgba(51,111,166,0.25) !important;
  color: #d6e4f0 !important;
}

/* --- Kill Zammad form-group highlight wrapper --- */
html[data-theme="dark"] .form-group.is-focused,
html[data-theme="dark"] .form-group.has-focus,
html[data-theme="dark"] .newTicket .form-group.is-focused,
html[data-theme="dark"] .newTicket .form-group.has-focus {
  background: transparent !important;
  box-shadow: none !important;
}

/* --- jQuery UI Autocomplete (tags, customer) --- */
html[data-theme="dark"] .ui-autocomplete,
html[data-theme="dark"] .ui-menu,
html[data-theme="dark"] ul.ui-autocomplete,
html[data-theme="dark"] .ui-widget-content {
  background: #0f2035 !important;
  border: 1px solid #1a3450 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .ui-menu-item,
html[data-theme="dark"] .ui-menu-item a,
html[data-theme="dark"] .ui-menu-item .ui-menu-item-wrapper {
  background: transparent !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .ui-menu-item:hover,
html[data-theme="dark"] .ui-menu-item a:hover,
html[data-theme="dark"] .ui-state-active,
html[data-theme="dark"] .ui-state-focus,
html[data-theme="dark"] .ui-menu-item .ui-state-active {
  background: rgba(0,57,114,0.30) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* --- Zammad custom select dropdowns (js-shadow) --- */
html[data-theme="dark"] .js-shadow + .js-optionsList,
html[data-theme="dark"] .searchableSelect .js-optionsList,
html[data-theme="dark"] .select-box .dropdown-menu {
  background: #0f2035 !important;
  border: 1px solid #1a3450 !important;
}
html[data-theme="dark"] .js-optionsList .js-option,
html[data-theme="dark"] .js-optionsList li {
  background: transparent !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .js-optionsList .js-option:hover,
html[data-theme="dark"] .js-optionsList .js-option.is-selected,
html[data-theme="dark"] .js-optionsList li:hover {
  background: rgba(0,57,114,0.30) !important;
  color: #ffffff !important;
}



/* ================================================================
   FONT SYSTEM — Candara (single variable for future changes)
   To change font sitewide: only edit --font-primary
   ================================================================ */
/* Default: Candara (applies to dark mode) */
:root {
  --font-primary: 'Candara', 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif !important;
}
/* ================================================================
   INTER POLISH — Light mode only (D50 — UniFi-style typography)
   Weight 300 base / 400 headings+buttons / 500 bold
   Letter-spacing -0.011em / tabular-nums / optical sizing
   ================================================================ */
html:not([data-theme="dark"]) {
  --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  font-feature-settings: "kern" !important;
  font-variant-ligatures: no-common-ligatures !important;
  font-variant-numeric: slashed-zero !important;
  font-synthesis: none !important;
  font-optical-sizing: auto !important;
  text-rendering: optimizeLegibility !important;
}

/* Base: weight 300 + tight spacing */
html:not([data-theme="dark"]) body,
html:not([data-theme="dark"]) #app,
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) .form-control,
html:not([data-theme="dark"]) a,
html:not([data-theme="dark"]) span,
html:not([data-theme="dark"]) p,
html:not([data-theme="dark"]) td,
html:not([data-theme="dark"]) th,
html:not([data-theme="dark"]) li,
html:not([data-theme="dark"]) .menu-item,
html:not([data-theme="dark"]) .sidebar,
html:not([data-theme="dark"]) .sidebar-block,
html:not([data-theme="dark"]) .nav-tab-name,
html:not([data-theme="dark"]) .tab-name,
html:not([data-theme="dark"]) .u-textTruncate,
html:not([data-theme="dark"]) .activity-entry,
html:not([data-theme="dark"]) .stat-widget,
html:not([data-theme="dark"]) .dropdown-menu,
html:not([data-theme="dark"]) .settings-list,
html:not([data-theme="dark"]) .newTicket,
html:not([data-theme="dark"]) .reporting,
html:not([data-theme="dark"]) .modal-body {
  font-weight: 300 !important;
  letter-spacing: -0.011em !important;
}

/* Headings: weight 400 for hierarchy */
html:not([data-theme="dark"]) h1,
html:not([data-theme="dark"]) h2,
html:not([data-theme="dark"]) h3,
html:not([data-theme="dark"]) .ticket-title,
html:not([data-theme="dark"]) .modal-title,
html:not([data-theme="dark"]) .page-header-title {
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}

/* Buttons + labels: weight 400 for readability at small sizes */
html:not([data-theme="dark"]) button,
html:not([data-theme="dark"]) .btn,
html:not([data-theme="dark"]) label,
html:not([data-theme="dark"]) .formGroup-label,
html:not([data-theme="dark"]) .form-group label {
  font-weight: 400 !important;
  letter-spacing: -0.011em !important;
}

/* Bold/emphasis: weight 500 */
html:not([data-theme="dark"]) strong,
html:not([data-theme="dark"]) b {
  font-weight: 500 !important;
}

/* Tabular nums: aligned columns in tables + ticket numbers */
html:not([data-theme="dark"]) td,
html:not([data-theme="dark"]) th,
html:not([data-theme="dark"]) .ticket-number,
html:not([data-theme="dark"]) .stat-widget,
html:not([data-theme="dark"]) .state-badge {
  font-variant-numeric: tabular-nums slashed-zero !important;
}

/* Size scale: -1px across the board */
html:not([data-theme="dark"]) body { font-size: 12px !important; }
html:not([data-theme="dark"]) .sidebar .menu-item { font-size: 12px !important; }
html:not([data-theme="dark"]) td, html:not([data-theme="dark"]) th { font-size: 12px !important; }
html:not([data-theme="dark"]) input,
html:not([data-theme="dark"]) textarea,
html:not([data-theme="dark"]) select,
html:not([data-theme="dark"]) .form-control { font-size: 13px !important; }
html:not([data-theme="dark"]) label,
html:not([data-theme="dark"]) .formGroup-label { font-size: 11px !important; }
html:not([data-theme="dark"]) .btn { font-size: 12px !important; }
html:not([data-theme="dark"]) .ticket-title { font-size: 17px !important; }
html:not([data-theme="dark"]) .ticket-number { font-size: 11px !important; }
html:not([data-theme="dark"]) h1 { font-size: 21px !important; }
html:not([data-theme="dark"]) h2 { font-size: 17px !important; }
html:not([data-theme="dark"]) h3 { font-size: 15px !important; }
html:not([data-theme="dark"]) .state-badge { font-size: 10px !important; }
html:not([data-theme="dark"]) .nav-tab-name,
html:not([data-theme="dark"]) .tab-name { font-size: 12px !important; }
html:not([data-theme="dark"]) .stat-widget .stat-label { font-size: 11px !important; }
html:not([data-theme="dark"]) .modal-title { font-size: 15px !important; }
html:not([data-theme="dark"]) .dropdown-menu li a,
html:not([data-theme="dark"]) .dropdown-menu li span { font-size: 12px !important; }

/* Nuclear font override — covers everything */
body, html, #app,
input, textarea, select, button,
.form-control, .btn,
a, span, p, h1, h2, h3, h4, h5, h6,
label, dt, dd, li, td, th,
.menu-item, .nav-tab-name, .u-textTruncate,
.tab, .tabs, .stat-widget,
.sidebar, .sidebar-block,
.ticket-title, .ticket-number,
.activity-entry, .activity-text,
.modal, .modal-content, .modal-header, .modal-body,
.dropdown-menu, .dropdown-menu li,
.popover, .tooltip-inner,
.panel, .panel-heading, .panel-body,
.page-header, .page-content,
.content-sidebar, .settings-list,
.newTicket, .newTicket *,
.reporting, .reporting *,
.navigation.vertical *,
.state-badge,
.formGroup-label, .form-group label,
[contenteditable] {
  font-family: var(--font-primary) !important;
}


/* ================================================================
   DARK MODE — Admin panel + toggles + remaining grays
   ================================================================ */

/* --- Toggle switches (enable/disable) --- */
html[data-theme="dark"] .zammad-switch label {
  background: #1a3450 !important;
}
html[data-theme="dark"] .zammad-switch label::after {
  background: #4a6d8c !important;
}
html[data-theme="dark"] .zammad-switch input:checked + label {
  background: #336FA6 !important;
}
html[data-theme="dark"] .zammad-switch input:checked + label::after {
  background: #ffffff !important;
}

/* --- Admin: condition boxes / filter builders --- */
html[data-theme="dark"] .ticket_selector,
html[data-theme="dark"] .filter,
html[data-theme="dark"] .controls--row,
html[data-theme="dark"] .horizontal-filter,
html[data-theme="dark"] .ticket_selector .horizontal {
  background: #132a42 !important;
  border-color: #1a3450 !important;
}

/* --- Admin: selects inside condition builders --- */
html[data-theme="dark"] .ticket_selector select,
html[data-theme="dark"] .filter select,
html[data-theme="dark"] .controls--row select {
  background: #091628 !important;
  color: #d6e4f0 !important;
  border-color: #1a3450 !important;
}

/* --- Admin: multi-select / option list --- */
html[data-theme="dark"] select[multiple],
html[data-theme="dark"] select[size] {
  background: #091628 !important;
  color: #d6e4f0 !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] select[multiple] option,
html[data-theme="dark"] select[size] option {
  background: #091628 !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] select[multiple] option:checked,
html[data-theme="dark"] select[size] option:checked {
  background: rgba(0,57,114,0.35) !important;
  color: #ffffff !important;
}

/* --- Admin: table rows (Chat, etc.) --- */
html[data-theme="dark"] .settings-list tr,
html[data-theme="dark"] .settings-list td,
html[data-theme="dark"] .page-content table tr,
html[data-theme="dark"] .page-content table td {
  background: transparent !important;
}
html[data-theme="dark"] .settings-list tr:hover,
html[data-theme="dark"] .page-content table tr:hover {
  background: rgba(0,57,114,0.15) !important;
}

/* --- Admin: + Add rows --- */
html[data-theme="dark"] .settings-list-action-cell,
html[data-theme="dark"] .settings-list tfoot td,
html[data-theme="dark"] .page-content tfoot td {
  background: transparent !important;
  border-top-color: #1a3450 !important;
}

/* --- Admin: heading toggle buttons (inactive tabs) --- */
html[data-theme="dark"] .nav-tabs li:not(.active) {
  background: transparent !important;
}
html[data-theme="dark"] .nav-tabs li:not(.active) a {
  color: #7a9abb !important;
  background: transparent !important;
  border-color: #1a3450 !important;
}
html[data-theme="dark"] .nav-tabs li:not(.active) a:hover {
  color: #d6e4f0 !important;
  background: rgba(0,57,114,0.15) !important;
}

/* --- Admin: Save/Reset buttons area --- */
html[data-theme="dark"] .btn--danger,
html[data-theme="dark"] .btn.btn--danger {
  background: #DC2626 !important;
  color: #ffffff !important;
}

/* --- Admin: description/help text --- */
html[data-theme="dark"] .page-content p,
html[data-theme="dark"] .page-content .help-text,
html[data-theme="dark"] .page-content .text-muted {
  color: #7a9abb !important;
}

/* ================================================================
   DARK MODE — Modal scroll fix + remaining grays
   ================================================================ */

/* --- Modal scroll: allow body to scroll --- */
html[data-theme="dark"] .modal,
html[data-theme="dark"] .modal-dialog {
  max-height: 90vh !important;
  overflow-y: auto !important;
}
html[data-theme="dark"] .modal-body {
  max-height: 80vh !important;
  overflow-y: auto !important;
}

/* --- Override Zammad native dark vars (remaining grays) --- */
html[data-theme="dark"] {
  --background-primary-alt: #132a42 !important;
  --border-alt: #1a3450 !important;
  --background-secondary: #0f2035 !important;
}

/* --- Settings-list headers (GROUP, READ, etc.) --- */
html[data-theme="dark"] .settings-list th,
html[data-theme="dark"] .settings-list thead th {
  background: #132a42 !important;
  color: #4a6d8c !important;
  border-color: #1a3450 !important;
}

/* --- Settings-list cells --- */
html[data-theme="dark"] .settings-list td,
html[data-theme="dark"] .settings-list th {
  border-color: #1a3450 !important;
}

/* --- Checkbox containers in modals/admin --- */
html[data-theme="dark"] .checkbox-replacement,
html[data-theme="dark"] .radio-replacement {
  border-color: #1a3450 !important;
}

/* --- Modal body: reduce height + sticky footer --- */
html[data-theme="dark"] .modal-body {
  max-height: 70vh !important;
  overflow-y: auto !important;
  padding-bottom: 20px !important;
}
html[data-theme="dark"] .modal .form-controls,
html[data-theme="dark"] .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: #0f2035 !important;
  padding: 16px 20px !important;
  border-top: 1px solid #1a3450 !important;
  z-index: 10 !important;
}

/* ================================================================
   LIGHT/STANDARD MODE — Modal scroll fix (structural only)
   Same scroll behavior as dark mode, no color overrides.
   Scoped with :not([data-theme="dark"]) so it only applies in light.
   Uses existing theme tokens (var(--bg-card), var(--border-subtle))
   for sticky footer background — no new colors introduced.
   ================================================================ */
html:not([data-theme="dark"]) .modal,
html:not([data-theme="dark"]) .modal-dialog {
  max-height: 90vh !important;
  overflow-y: auto !important;
}
html:not([data-theme="dark"]) .modal-body {
  max-height: 70vh !important;
  overflow-y: auto !important;
  padding-bottom: 20px !important;
}
html:not([data-theme="dark"]) .modal .form-controls,
html:not([data-theme="dark"]) .modal-footer {
  position: sticky !important;
  bottom: 0 !important;
  background: var(--bg-card) !important;
  padding: 16px 20px !important;
  border-top: 1px solid var(--border-subtle) !important;
  z-index: 10 !important;
}


/* ================================================================
   DARK MODE — Search Results (TAREA 4)
   Container is inside .navigation.vertical — must match nav bg.
   .flex class bleeds bg into spans — force transparent.
   task-state classes add unwanted colors — override all.
   ================================================================ */

/* Container — beat .navigation.vertical .global-search-menu */
html[data-theme="dark"] .navigation.vertical .global-search-menu {
  background: #060f1e !important;
  border: none !important;
  box-shadow: none !important;
}

/* Show Search Details — transparent bg */
html[data-theme="dark"] .global-search-detail-link,
html[data-theme="dark"] a.global-search-detail-link,
html[data-theme="dark"] .navigation.vertical .global-search-detail-link,
html[data-theme="dark"] .search.focused .global-search-detail-link,
html[data-theme="dark"] .search.open .global-search-detail-link {
  background: transparent !important;
  color: #7a9abb !important;
  border-bottom: 1px solid rgba(26,52,80,0.4) !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .global-search-detail-link:hover {
  background: rgba(0,57,114,0.30) !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .global-search-detail-link::before,
html[data-theme="dark"] .global-search-detail-link::after {
  background: transparent !important;
}

/* Kill .flex bg bleed inside search menu (Regla 21) */
html[data-theme="dark"] .global-search-menu .flex,
html[data-theme="dark"] .global-search-menu div.nav-tab-name.flex,
html[data-theme="dark"] .global-search-detail-link .flex,
html[data-theme="dark"] .global-search-detail-link div.nav-tab-name.flex {
  background: transparent !important;
}

/* Result items — kill task-state colors */
html[data-theme="dark"] .global-search-result li a,
html[data-theme="dark"] .global-search-result li a.nav-tab,
html[data-theme="dark"] .global-search-result li a.nav-tab--search,
html[data-theme="dark"] .global-search-result li a[class*="task-state"] {
  color: #d6e4f0 !important;
  background: transparent !important;
  border-bottom: 1px solid rgba(26,52,80,0.4) !important;
}
html[data-theme="dark"] .global-search-result li a:hover,
html[data-theme="dark"] .global-search-result li a[class*="task-state"]:hover {
  background: rgba(0,57,114,0.25) !important;
  color: #ffffff !important;
}

/* Spans inside results */
html[data-theme="dark"] .global-search-result span.nav-tab-name,
html[data-theme="dark"] .global-search-result div.nav-tab-name {
  color: #d6e4f0 !important;
  background: transparent !important;
}
html[data-theme="dark"] .global-search-result .nav-tab-icon {
  color: #4a6d8c !important;
}

/* Active/selected result */
html[data-theme="dark"] .global-search-result li.is-active a,
html[data-theme="dark"] .global-search-result li a.is-active {
  background: rgba(0,57,114,0.35) !important;
  color: #ffffff !important;
}



/* ================================================================
   MOBILE APP — /mobile/ overrides (DARK MODE SCOPED)
   Zammad mobile is a separate Vue SPA with Tailwind CSS.
   Our CSS is injected via nginx sub_filter into /mobile/ too.
   data-test-id attrs are stripped in prod — use Tailwind utility
   classes directly (verified against compiled mobile-*.css).
   ALL RULES SCOPED to html[data-theme="dark"] to avoid breaking
   desktop light mode (section a, #app a are too broad unscoped).
   Zammad mobile uses dark mode by default.
   Added: 2026-04-14 (v3 — scoped)
   ================================================================ */

/* --- Override Tailwind color variables at root (nuclear) --- */
html[data-theme="dark"] {
  --color-pink: #003972 !important;
  --color-pink-100: rgba(0,57,114,0.15) !important;
  --color-pink-300: rgba(0,57,114,0.35) !important;
  --color-pink-500: #003972 !important;
  --color-orange: #336FA6 !important;
  /* Mobile Home text uses --color-blue (#23a2cd cyan) — force light gray */
  --color-blue: rgba(255,255,255,0.87) !important;
  --color-blue-800: rgba(255,255,255,0.87) !important;
}

/* --- Mobile: .text-blue utility override (belt + suspenders) --- */
html[data-theme="dark"] .text-blue,
html[data-theme="dark"] .text-blue-800,
html[data-theme="dark"] a.text-blue,
html[data-theme="dark"] a .text-blue,
html[data-theme="dark"] section .text-blue,
html[data-theme="dark"] section a.text-blue {
  color: rgba(255,255,255,0.87) !important;
}

/* --- Mobile NUCLEAR: direct <a> in menu containers --- */
/* Zammad mobile has `a { color: var(--color-blue) }` global rule.
   Override by targeting anchors inside known menu containers. */
html[data-theme="dark"] #app a,
html[data-theme="dark"] #app a:link,
html[data-theme="dark"] #app a:visited,
html[data-theme="dark"] #app section a,
html[data-theme="dark"] #app section a:link,
html[data-theme="dark"] #app section a:visited,
html[data-theme="dark"] #app [class*="bg-gray"] a,
html[data-theme="dark"] #app [class*="bg-gray"] a:link,
html[data-theme="dark"] #app [class*="bg-gray"] a:visited,
html[data-theme="dark"] #app a[class*="cursor-pointer"],
html[data-theme="dark"] #app a[class*="border-b"] {
  color: rgba(255,255,255,0.87) !important;
}

/* Keep home title + Edit link styling */
html[data-theme="dark"] #app .text-white {
  color: #ffffff !important;
}

/* --- Icon backgrounds: Tailwind utility override --- */
html[data-theme="dark"] .bg-pink {
  background-color: #003972 !important;
}
html[data-theme="dark"] .bg-orange {
  background-color: #336FA6 !important;
}
html[data-theme="dark"] .bg-pink-100 {
  background-color: rgba(0,57,114,0.15) !important;
}
html[data-theme="dark"] .bg-pink-300 {
  background-color: rgba(0,57,114,0.35) !important;
}
html[data-theme="dark"] .bg-pink-500 {
  background-color: #003972 !important;
}

/* --- Article bubbles: customer (bg-blue) --- */
html[data-theme="dark"] .Article .content.bg-blue {
  background-color: #0f2035 !important;
  border-color: #1a3450 !important;
  color: #d6e4f0 !important;
}

/* --- Article bubbles: agent (bg-white) --- */
html[data-theme="dark"] .Article .content.bg-white {
  background-color: #132a42 !important;
  border-color: #1a3450 !important;
  color: #d6e4f0 !important;
}

/* --- Article bubbles: internal notes (bg-black) --- */
html[data-theme="dark"] .Article .content.bg-black {
  background-color: rgba(245,158,11,0.06) !important;
  border-color: rgba(196,163,90,0.3) !important;
  color: #c4a35a !important;
}

/* --- Article username --- */
html[data-theme="dark"] .Article [class*="font-bold"] span {
  color: rgba(255,255,255,0.60) !important;
}

/* --- Mobile: ALL link text white (kill blue) --- */
html[data-theme="dark"] section a,
html[data-theme="dark"] section a span,
html[data-theme="dark"] section a[class*="cursor-pointer"],
html[data-theme="dark"] section a[class*="cursor-pointer"] span,
html[data-theme="dark"] section li a,
html[data-theme="dark"] section li a span {
  color: rgba(255,255,255,0.87) !important;
}

/* --- Mobile: counters/numbers lighter --- */
html[data-theme="dark"] section a [class*="text-right"],
html[data-theme="dark"] section a span:last-child {
  color: rgba(255,255,255,0.50) !important;
}

/* --- Mobile: "Ticket overviews" text --- */
html[data-theme="dark"] .bg-pink ~ span,
html[data-theme="dark"] [class*="bg-pink"] ~ span,
html[data-theme="dark"] [class*="section-menu"] span {
  color: rgba(255,255,255,0.87) !important;
}

/* --- Mobile: chevron arrows lighter --- */
html[data-theme="dark"] section svg[class*="icon"],
html[data-theme="dark"] section [class*="icon-small"] {
  color: rgba(255,255,255,0.30) !important;
  fill: rgba(255,255,255,0.30) !important;
}

/* --- Section headers --- */
html[data-theme="dark"] section header {
  color: rgba(255,255,255,0.60) !important;
}

/* DARK MODE — Richtext editor in triggers/modals */
html[data-theme="dark"] .richtext.form-control [contenteditable] {
  background: #0f2035 !important;
  color: #d6e4f0 !important;
  border: 1px solid #1a3450 !important;
  border-radius: 6px !important;
  padding: 16px !important;
}
html[data-theme="dark"] .richtext.form-control [contenteditable] div {
  background: transparent !important;
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .richtext.form-control [contenteditable] p,
html[data-theme="dark"] .richtext.form-control [contenteditable] span,
html[data-theme="dark"] .richtext.form-control [contenteditable] strong,
html[data-theme="dark"] .richtext.form-control [contenteditable] a {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .richtext.form-control [contenteditable] img {
  opacity: 0.9 !important;
}
html[data-theme="dark"] .richtext.form-control [contenteditable] div[style*="fff8e1"],
html[data-theme="dark"] .richtext.form-control [contenteditable] div[style*="background"] {
  background: rgba(245,158,11,0.1) !important;
  border-color: #c4a35a !important;
  color: #c4a35a !important;
}
html[data-theme="dark"] .richtext.form-control [contenteditable] div[style*="fff8e1"] strong {
  color: #c4a35a !important;
}

/* ================================================================
   ARTICLE META — FROM/TO/SUBJECT + CHANNEL bar (D51)
   Light: celeste #E6EFF8 / Dark: #132a42 + nuclear transparent children
   ================================================================ */

/* --- Light mode --- */
html:not([data-theme="dark"]) .article-meta.top,
html:not([data-theme="dark"]) .article-meta.bottom {
  background: #E6EFF8 !important;
  border-radius: 8px !important;
}
html:not([data-theme="dark"]) .article-meta.top td,
html:not([data-theme="dark"]) .article-meta.top th,
html:not([data-theme="dark"]) .article-meta.bottom td,
html:not([data-theme="dark"]) .article-meta.bottom th {
  color: #0F172A !important;
  border-color: rgba(0, 57, 114, 0.08) !important;
}
html:not([data-theme="dark"]) .article-meta.top td:first-child,
html:not([data-theme="dark"]) .article-meta.bottom td:first-child {
  color: var(--navy-500) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}
html:not([data-theme="dark"]) .article-meta.top a,
html:not([data-theme="dark"]) .article-meta.bottom a {
  color: var(--navy-400) !important;
}
html:not([data-theme="dark"]) .article-meta.top span,
html:not([data-theme="dark"]) .article-meta.bottom span,
html:not([data-theme="dark"]) .article-meta.top div,
html:not([data-theme="dark"]) .article-meta.bottom div {
  color: #0F172A !important;
}
html:not([data-theme="dark"]) .article-meta.bottom .article-meta-value,
html:not([data-theme="dark"]) .article-meta.bottom .flex {
  color: #0F172A !important;
}

/* --- Dark mode --- */
html[data-theme="dark"] .article-meta.top,
html[data-theme="dark"] .article-meta.bottom {
  background: #132a42 !important;
  border-radius: 8px !important;
  border: none !important;
}
html[data-theme="dark"] .article-meta.top *,
html[data-theme="dark"] .article-meta.bottom * {
  background: transparent !important;
}
html[data-theme="dark"] .article-meta.top .horizontal,
html[data-theme="dark"] .article-meta.top .article-meta-row,
html[data-theme="dark"] .article-meta.top .flex,
html[data-theme="dark"] .article-meta.top .article-meta-value,
html[data-theme="dark"] .article-meta.top .article-meta-key,
html[data-theme="dark"] .article-meta.bottom .horizontal,
html[data-theme="dark"] .article-meta.bottom .article-meta-row,
html[data-theme="dark"] .article-meta.bottom .flex,
html[data-theme="dark"] .article-meta.bottom .article-meta-value,
html[data-theme="dark"] .article-meta.bottom .article-meta-key {
  background: transparent !important;
}
html[data-theme="dark"] .article-meta.top td,
html[data-theme="dark"] .article-meta.top th,
html[data-theme="dark"] .article-meta.bottom td,
html[data-theme="dark"] .article-meta.bottom th {
  color: #d6e4f0 !important;
  border-color: rgba(26, 52, 80, 0.5) !important;
}
html[data-theme="dark"] .article-meta.top td:first-child,
html[data-theme="dark"] .article-meta.bottom td:first-child {
  color: #4a6d8c !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.05em !important;
}
html[data-theme="dark"] .article-meta.top span,
html[data-theme="dark"] .article-meta.bottom span,
html[data-theme="dark"] .article-meta.top div,
html[data-theme="dark"] .article-meta.bottom div {
  color: #d6e4f0 !important;
}
html[data-theme="dark"] .article-meta.top a,
html[data-theme="dark"] .article-meta.bottom a {
  color: #93c5fd !important;
}
html[data-theme="dark"] .article-meta.top .article-meta-key,
html[data-theme="dark"] .article-meta.bottom .article-meta-key {
  color: #4a6d8c !important;
}

/* ================================================================
   DARK MODE — Font weight polish (D52)
   Same weight hierarchy as light: 300 base / 400 headings+buttons / 500 bold
   Font stays Candara. Letter-spacing -0.011em for tightness.
   ================================================================ */

/* Base: weight 400 (Regular) + tight spacing */
html[data-theme="dark"] body,
html[data-theme="dark"] #app,
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] a,
html[data-theme="dark"] span,
html[data-theme="dark"] p,
html[data-theme="dark"] td,
html[data-theme="dark"] th,
html[data-theme="dark"] li,
html[data-theme="dark"] .menu-item,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar-block,
html[data-theme="dark"] .nav-tab-name,
html[data-theme="dark"] .tab-name,
html[data-theme="dark"] .u-textTruncate,
html[data-theme="dark"] .activity-entry,
html[data-theme="dark"] .stat-widget,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .settings-list,
html[data-theme="dark"] .newTicket,
html[data-theme="dark"] .reporting,
html[data-theme="dark"] .modal-body {
  font-weight: 400 !important;
  letter-spacing: -0.011em !important;
}

/* Headings: weight 400 for hierarchy */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .ticket-title,
html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .page-header-title {
  font-weight: 400 !important;
  letter-spacing: -0.015em !important;
}

/* Buttons + labels: weight 400 */
html[data-theme="dark"] button,
html[data-theme="dark"] .btn,
html[data-theme="dark"] label,
html[data-theme="dark"] .formGroup-label,
html[data-theme="dark"] .form-group label {
  font-weight: 400 !important;
  letter-spacing: -0.011em !important;
}

/* Bold: weight 500 */
html[data-theme="dark"] strong,
html[data-theme="dark"] b {
  font-weight: 500 !important;
}