/* =========================================================================
   Nexora Theme — design overrides
   Loaded last in admin asset chain (after style.css). Adds design tokens
   and re-skins Bootstrap 3 + custom components without rewriting style.css.
   ========================================================================= */


/* ---------- Design tokens ------------------------------------------------ */
:root {
  /* Brand */
  --nx-primary-50:  #EFF6FF;
  --nx-primary-100: #DBEAFE;
  --nx-primary-200: #BFDBFE;
  --nx-primary-300: #93C5FD;
  --nx-primary-400: #60A5FA;
  --nx-primary-500: #3B82F6;
  --nx-primary-600: #2563EB;
  --nx-primary-700: #1D4ED8;
  --nx-primary-800: #1E40AF;
  --nx-primary-900: #1E3A8A;

  /* Accent (deal green) */
  --nx-accent-50:  #ECFDF5;
  --nx-accent-100: #D1FAE5;
  --nx-accent-500: #10B981;
  --nx-accent-600: #059669;
  --nx-accent-700: #047857;

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

  /* Semantic */
  --nx-success: #059669;
  --nx-success-bg: #ECFDF5;
  --nx-warning: #D97706;
  --nx-warning-bg: #FFFBEB;
  --nx-danger:  #DC2626;
  --nx-danger-bg: #FEF2F2;
  --nx-info:    #0284C7;
  --nx-info-bg: #F0F9FF;

  /* Surfaces */
  --nx-bg:        #F8FAFC;
  --nx-surface:   #FFFFFF;
  --nx-surface-2: #F1F5F9;
  --nx-border:    #E2E8F0;
  --nx-border-strong: #CBD5E1;

  /* Text */
  --nx-text:        #0F172A;
  --nx-text-muted:  #475569;
  --nx-text-subtle: #64748B;

  /* Radius */
  --nx-radius-sm: 6px;
  --nx-radius-md: 8px;
  --nx-radius-lg: 12px;
  --nx-radius-xl: 16px;

  /* Shadows */
  --nx-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.04);
  --nx-shadow:    0 1px 3px 0 rgb(15 23 42 / 0.06), 0 1px 2px -1px rgb(15 23 42 / 0.04);
  --nx-shadow-md: 0 4px 12px -2px rgb(15 23 42 / 0.08), 0 2px 4px -2px rgb(15 23 42 / 0.04);
  --nx-shadow-lg: 0 12px 32px -8px rgb(15 23 42 / 0.12), 0 4px 8px -4px rgb(15 23 42 / 0.06);
  --nx-shadow-ring: 0 0 0 3px rgb(37 99 235 / 0.18);

  /* Motion */
  --nx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --nx-dur:  180ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --nx-dur: 0.01ms; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- Base typography --------------------------------------------- */
body {
  font-family: "Fira Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--nx-bg);
  color: var(--nx-text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

code, kbd, pre, samp,
.tw-font-mono { font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  font-family: "Fira Sans", "Inter", sans-serif;
  color: var(--nx-text);
  letter-spacing: -0.01em;
}

a { color: var(--nx-primary-600); transition: color var(--nx-dur) var(--nx-ease); }
a:hover, a:focus { color: var(--nx-primary-700); }

/* ---------- App shell --------------------------------------------------- */
#wrapper { background: var(--nx-bg); }

#header {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-border);
  box-shadow: var(--nx-shadow-sm);
}

#header li > a.active {
  background: var(--nx-primary-50);
  color: var(--nx-primary-700);
  border-radius: 999px;
}

.navbar-nav > li > a {
  color: var(--nx-neutral-500);
  transition: color var(--nx-dur) var(--nx-ease), background var(--nx-dur) var(--nx-ease);
}
.navbar-nav > li > a:hover,
.navbar-nav > li > a:focus,
.navbar-nav .open > a,
.navbar-nav .open > a:hover,
.navbar-nav .open > a:focus {
  color: var(--nx-primary-600);
  background: transparent;
}

/* ---------- Sidebar ----------------------------------------------------- */
.sidebar {
  background: var(--nx-surface);
  border-right-color: var(--nx-border);
  box-shadow: 1px 0 0 0 transparent;
}

.sidebar > ul.nav > li {
  border-left-color: transparent !important;
}

.sidebar ul.nav li a {
  color: var(--nx-neutral-600);
  font-weight: 500;
  border: 1px solid transparent;
  border-radius: var(--nx-radius-md);
  transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}

.sidebar ul.nav li a i.menu-icon {
  color: var(--nx-neutral-400);
  transition: color var(--nx-dur) var(--nx-ease);
}

.sidebar > ul.nav > li:hover > a:first-child,
.sidebar > ul.nav > li:focus-within > a:first-child {
  background: var(--nx-neutral-100);
  border-color: transparent;
  box-shadow: none;
  color: var(--nx-text);
}
.sidebar > ul.nav > li:hover > a:first-child .menu-icon,
.sidebar > ul.nav > li:focus-within > a:first-child .menu-icon { color: var(--nx-primary-600); }

.sidebar > ul.nav > li.active > a:first-child {
  background: var(--nx-primary-50);
  color: var(--nx-primary-700);
  border-color: transparent;
  box-shadow: inset 3px 0 0 0 var(--nx-primary-600);
}
.sidebar > ul.nav > li.active > a:first-child .menu-icon { color: var(--nx-primary-600); }

.sidebar ul.nav li.active > a,
.sidebar ul.nav > li > a:hover,
.sidebar ul.nav > li > a:focus {
  color: var(--nx-text);
}

.sidebar ul.nav li .nav-second-level li a {
  color: var(--nx-neutral-600);
  border-radius: var(--nx-radius-sm);
}
.sidebar ul.nav li .nav-second-level li.active a,
.sidebar ul.nav li .nav-second-level li a:hover,
.sidebar ul.nav li .nav-second-level li a:focus {
  color: var(--nx-primary-700);
}
.sidebar ul.nav li .nav-second-level li.active a { font-weight: 600; }

.sidebar-user-profile .profile {
  border-color: var(--nx-border) !important;
  background: var(--nx-surface) !important;
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-sm) !important;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.sidebar-user-profile .profile:hover,
.sidebar-user-profile .profile:focus {
  border-color: var(--nx-primary-200) !important;
  box-shadow: var(--nx-shadow-md) !important;
}

/* ---------- Panels (Bootstrap 3 cards) ---------------------------------- */
.panel,
.panel-default {
  border-color: var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow);
  background: var(--nx-surface);
}
.panel + .panel { margin-top: 16px; }

.panel-heading,
.panel-default > .panel-heading {
  background: var(--nx-surface);
  border-color: var(--nx-border);
  border-top-left-radius: var(--nx-radius-lg);
  border-top-right-radius: var(--nx-radius-lg);
  padding: 14px 18px;
}

.panel-title { font-weight: 600; color: var(--nx-text); }

.panel-body { padding: 18px; }

.panel-footer {
  background: var(--nx-neutral-50);
  border-color: var(--nx-border);
  border-bottom-left-radius: var(--nx-radius-lg);
  border-bottom-right-radius: var(--nx-radius-lg);
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  border-radius: var(--nx-radius-md);
  font-weight: 500;
  letter-spacing: 0;
  transition: background var(--nx-dur) var(--nx-ease),
              color var(--nx-dur) var(--nx-ease),
              border-color var(--nx-dur) var(--nx-ease),
              box-shadow var(--nx-dur) var(--nx-ease),
              transform var(--nx-dur) var(--nx-ease);
}
.btn:focus-visible { outline: none; box-shadow: var(--nx-shadow-ring); }

.btn-primary,
.btn-info {
  background: var(--nx-primary-600);
  border-color: var(--nx-primary-600);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-info:hover, .btn-info:focus {
  background: var(--nx-primary-700);
  border-color: var(--nx-primary-700);
  color: #fff;
}
.btn-primary:active, .btn-info:active {
  background: var(--nx-primary-800) !important;
  border-color: var(--nx-primary-800) !important;
}

.btn-success {
  background: var(--nx-accent-600);
  border-color: var(--nx-accent-600);
  color: #fff;
}
.btn-success:hover, .btn-success:focus {
  background: var(--nx-accent-700);
  border-color: var(--nx-accent-700);
  color: #fff;
}

.btn-warning {
  background: var(--nx-warning);
  border-color: var(--nx-warning);
  color: #fff;
}
.btn-warning:hover, .btn-warning:focus {
  background: #B45309;
  border-color: #B45309;
  color: #fff;
}

.btn-danger {
  background: var(--nx-danger);
  border-color: var(--nx-danger);
  color: #fff;
}
.btn-danger:hover, .btn-danger:focus {
  background: #B91C1C;
  border-color: #B91C1C;
  color: #fff;
}

.btn-default {
  background: var(--nx-surface);
  border-color: var(--nx-border-strong);
  color: var(--nx-text);
}
.btn-default:hover, .btn-default:focus {
  background: var(--nx-neutral-100);
  border-color: var(--nx-neutral-300);
  color: var(--nx-text);
}

.btn-link { color: var(--nx-primary-600); }
.btn-link:hover, .btn-link:focus { color: var(--nx-primary-700); }

/* ---------- Forms ------------------------------------------------------- */
.form-control {
  border-color: var(--nx-border-strong);
  border-radius: var(--nx-radius-md);
  color: var(--nx-text);
  box-shadow: none;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.form-control:focus {
  border-color: var(--nx-primary-500);
  box-shadow: var(--nx-shadow-ring);
  outline: none;
}
.form-control::placeholder { color: var(--nx-neutral-400); }

.has-error .form-control { border-color: var(--nx-danger); }
.has-error .form-control:focus { box-shadow: 0 0 0 3px rgb(220 38 38 / 0.18); }

label, .control-label { color: var(--nx-text); font-weight: 500; }

/* ---------- Badges & legacy Bootstrap utilities ------------------------ */
/* labels.css already styles .label-* with modern soft pills. We only
   override the legacy Bootstrap .bg-* utility classes used inline in chrome. */

.bg-primary { background-color: var(--nx-primary-600) !important; color: #fff !important; }
.bg-success { background-color: var(--nx-accent-600) !important; color: #fff !important; }
.bg-warning { background-color: var(--nx-warning)    !important; color: #fff !important; }
.bg-danger  { background-color: var(--nx-danger)     !important; color: #fff !important; }
.bg-info    { background-color: var(--nx-info)       !important; color: #fff !important; }

.badge-primary { background-color: var(--nx-primary-600) !important; color: #fff !important; }
.badge-success { background-color: var(--nx-accent-600) !important; color: #fff !important; }
.badge-warning { background-color: var(--nx-warning) !important;    color: #fff !important; }
.badge-danger  { background-color: var(--nx-danger) !important;     color: #fff !important; }
.badge-info    { background-color: var(--nx-info) !important;       color: #fff !important; }

/* Soft pill variants — useful additions used by some lists */
.label.label-soft-primary, .badge.label-soft-primary { background: var(--nx-primary-50);  color: var(--nx-primary-700); }
.label.label-soft-success, .badge.label-soft-success { background: var(--nx-accent-50);   color: var(--nx-accent-700); }
.label.label-soft-warning, .badge.label-soft-warning { background: var(--nx-warning-bg);  color: var(--nx-warning); }
.label.label-soft-danger,  .badge.label-soft-danger  { background: var(--nx-danger-bg);   color: var(--nx-danger); }

/* ---------- Alerts ------------------------------------------------------ */
.alert {
  border-radius: var(--nx-radius-md);
  border-width: 1px;
  padding: 12px 16px;
}
.alert-success { background: var(--nx-success-bg); border-color: rgb(5 150 105 / 0.25); color: var(--nx-accent-700); }
.alert-warning { background: var(--nx-warning-bg); border-color: rgb(217 119 6 / 0.25);  color: #92400E; }
.alert-danger  { background: var(--nx-danger-bg);  border-color: rgb(220 38 38 / 0.25);  color: #991B1B; }
.alert-info    { background: var(--nx-info-bg);    border-color: rgb(2 132 199 / 0.25);  color: #075985; }

/* ---------- Tables ----------------------------------------------------- */
.table {
  color: var(--nx-text);
}
.table > thead > tr > th {
  background: var(--nx-neutral-50);
  border-bottom: 1px solid var(--nx-border);
  color: var(--nx-text-muted);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
  border-top: 1px solid var(--nx-border);
}
.table-hover > tbody > tr:hover { background: var(--nx-neutral-50); }
.table-striped > tbody > tr:nth-of-type(odd) { background: var(--nx-neutral-50); }

.dataTables_wrapper .dataTables_filter input {
  border-radius: var(--nx-radius-md);
  border-color: var(--nx-border-strong);
  padding: 6px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--nx-primary-500);
  box-shadow: var(--nx-shadow-ring);
  outline: none;
}

/* ---------- Dropdowns -------------------------------------------------- */
.dropdown-menu {
  border-color: var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-md);
  padding: 6px;
}
.dropdown-menu > li > a {
  border-radius: var(--nx-radius-sm);
  color: var(--nx-text);
  padding: 8px 10px;
  transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease);
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background: var(--nx-primary-50);
  color: var(--nx-primary-700);
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background: var(--nx-primary-600);
  color: #fff;
}
.dropdown-header {
  color: var(--nx-text-subtle);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 8px 10px 4px;
}
.dropdown-menu .divider { background: var(--nx-border); margin: 6px 0; }

/* ---------- Modals ----------------------------------------------------- */
.modal-content {
  border: 0;
  border-radius: var(--nx-radius-xl);
  box-shadow: var(--nx-shadow-lg);
}
.modal-header {
  background: var(--nx-surface);
  border-bottom: 1px solid var(--nx-border);
  border-top-left-radius: var(--nx-radius-xl);
  border-top-right-radius: var(--nx-radius-xl);
  padding: 16px 20px;
}
.modal-title { font-weight: 600; color: var(--nx-text); }
.modal-body  { padding: 20px; }
.modal-footer {
  background: var(--nx-neutral-50);
  border-top: 1px solid var(--nx-border);
  border-bottom-left-radius: var(--nx-radius-xl);
  border-bottom-right-radius: var(--nx-radius-xl);
}
.modal-backdrop.in { opacity: 0.45; background: var(--nx-neutral-900); }

/* ---------- Tabs ------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--nx-border);
  margin-bottom: 16px;
}
.nav-tabs > li > a {
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--nx-text-muted);
  border-radius: 0;
  padding: 10px 14px;
  font-weight: 500;
  margin-right: 4px;
}
.nav-tabs > li > a:hover { background: transparent; color: var(--nx-text); border-bottom-color: var(--nx-border-strong); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  background: transparent;
  color: var(--nx-primary-700);
  border: 0;
  border-bottom: 2px solid var(--nx-primary-600);
}

/* ---------- Pagination ------------------------------------------------- */
.pagination > li > a,
.pagination > li > span {
  color: var(--nx-text-muted);
  border-color: var(--nx-border);
  margin: 0 2px;
  border-radius: var(--nx-radius-sm) !important;
}
.pagination > li > a:hover { background: var(--nx-neutral-100); color: var(--nx-text); }
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
  background: var(--nx-primary-600);
  border-color: var(--nx-primary-600);
  color: #fff;
}

/* ---------- Tooltips, popovers ----------------------------------------- */
.tooltip-inner {
  background: var(--nx-neutral-900);
  border-radius: var(--nx-radius-sm);
  padding: 6px 10px;
  font-size: 12px;
}
.tooltip.top .tooltip-arrow,
.tooltip.bottom .tooltip-arrow { border-top-color: var(--nx-neutral-900); border-bottom-color: var(--nx-neutral-900); }

.popover {
  border-color: var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-md);
}
.popover-title { background: var(--nx-neutral-50); border-bottom-color: var(--nx-border); font-weight: 600; }

/* ---------- Notifications icon dot ------------------------------------- */
.navbar-nav > li a > .icon-total-indicator {
  background: var(--nx-danger);
  color: #fff;
}

/* ---------- Search input in header ------------------------------------- */
#top_search input#search_input {
  background: var(--nx-neutral-100) !important;
  border: 1px solid transparent !important;
  border-radius: var(--nx-radius-lg) !important;
  transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease) !important;
}
#top_search input#search_input:hover { background: var(--nx-neutral-200) !important; }
#top_search input#search_input:focus {
  background: var(--nx-surface) !important;
  border-color: var(--nx-primary-500) !important;
  box-shadow: var(--nx-shadow-ring) !important;
}

/* ---------- Quick-create plus button ----------------------------------- */
.tw-bg-primary-600 { background-color: var(--nx-primary-600) !important; }
.tw-bg-primary-700 { background-color: var(--nx-primary-700) !important; }

/* ---------- Cards / utility surfaces ----------------------------------- */
.card,
.tw-card {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow);
}

/* ---------- Focus-visible ring (a11y) ---------------------------------- */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--nx-shadow-ring);
}

/* ---------- Scrollbar (subtle) ----------------------------------------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--nx-neutral-300);
  border-radius: 999px;
  border: 2px solid var(--nx-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--nx-neutral-400); }

/* ---------- Dashboard widgets / KPI cards ------------------------------ */
.top_stats_wrapper {
  padding: 18px 20px 20px;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow);
  transition: box-shadow var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.top_stats_wrapper:hover {
  border-color: var(--nx-primary-200);
  box-shadow: var(--nx-shadow-md);
  transform: translateY(-1px);
}

.top_stats_wrapper .tw-font-semibold,
.top_stats_wrapper .tw-font-medium { color: var(--nx-text); }
.top_stats_wrapper .text-neutral-600 { color: var(--nx-text-muted) !important; }

.progress {
  background: var(--nx-neutral-100);
  border-radius: 999px;
  box-shadow: none;
  height: 6px;
}
.progress-bar-mini { height: 6px; }
.progress-bar { border-radius: 999px; box-shadow: none; }
.progress-bar-success { background-color: var(--nx-accent-600); }
.progress-bar-info    { background-color: var(--nx-primary-600); }
.progress-bar-warning { background-color: var(--nx-warning); }
.progress-bar-danger  { background-color: var(--nx-danger); }
.progress-bar-default { background-color: var(--nx-neutral-400); }

.widget {
  background: transparent;
}

.widget-dragger:before { color: var(--nx-neutral-300) !important; }
.widget-dragger:hover:before { color: var(--nx-primary-500) !important; }

/* Dashboard chart cards (panels reused) — already styled above */

/* ---------- Page-level chrome ------------------------------------------ */
/* For top-of-page titles like clients/manage.php, leads/manage_leads.php. */
.content > .row > .col-md-12 > .tw-mb-6:first-child h4,
.content h4.tw-font-bold {
  font-family: "Fira Sans", "Inter", sans-serif;
  letter-spacing: -0.015em;
}

/* Stat strip row used on list pages (clients, leads, etc.) */
.content .tw-grid > .tw-bg-white.tw-border.tw-rounded-lg,
.content .tw-grid > .tw-bg-white.tw-shadow-sm {
  background: var(--nx-surface);
  border-color: var(--nx-border) !important;
  border-radius: var(--nx-radius-lg) !important;
  box-shadow: var(--nx-shadow-sm) !important;
  transition: box-shadow var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease);
}
.content .tw-grid > .tw-bg-white.tw-border.tw-rounded-lg:hover,
.content .tw-grid > .tw-bg-white.tw-shadow-sm:hover {
  border-color: var(--nx-primary-200) !important;
  box-shadow: var(--nx-shadow-md) !important;
  transform: translateY(-1px);
}

/* Page section card pattern */
.nx-card,
.nx-section {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow);
  padding: 18px 20px;
}

.nx-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.nx-page-header .nx-page-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--nx-text);
  margin: 0;
  letter-spacing: -0.015em;
}
.nx-page-header .nx-page-subtitle {
  font-size: 0.875rem;
  color: var(--nx-text-subtle);
  margin-top: 4px;
}
.nx-page-header .nx-page-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ---------- DataTables polish ------------------------------------------ */
.dataTables_wrapper {
  font-family: inherit;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background: var(--nx-surface);
  border: 1px solid var(--nx-border-strong);
  border-radius: var(--nx-radius-md);
  color: var(--nx-text);
  padding: 6px 12px;
  font-size: 13px;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--nx-primary-500);
  box-shadow: var(--nx-shadow-ring);
  outline: none;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
  color: var(--nx-text-subtle);
  font-size: 13px;
  font-weight: 500;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--nx-radius-sm) !important;
  margin: 0 1px !important;
  color: var(--nx-text-muted) !important;
  border: 1px solid transparent !important;
  background: transparent !important;
  padding: 6px 10px !important;
  transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--nx-neutral-100) !important;
  color: var(--nx-text) !important;
  border-color: var(--nx-border) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--nx-primary-600) !important;
  color: #fff !important;
  border-color: var(--nx-primary-600) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  color: var(--nx-neutral-300) !important;
  background: transparent !important;
  border-color: transparent !important;
  cursor: not-allowed;
}

table.dataTable {
  border-collapse: separate !important;
  border-spacing: 0;
}
table.dataTable thead th,
table.dataTable thead td {
  background: var(--nx-neutral-50);
  border-bottom: 1px solid var(--nx-border) !important;
  color: var(--nx-text-muted);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 12px 14px;
}
table.dataTable tbody td {
  padding: 14px;
  border-top: 1px solid var(--nx-border) !important;
  vertical-align: middle;
  color: var(--nx-text);
}
table.dataTable tbody tr {
  transition: background var(--nx-dur) var(--nx-ease);
}
table.dataTable tbody tr:hover {
  background: var(--nx-neutral-50) !important;
}
table.dataTable tbody tr.selected {
  background: var(--nx-primary-50) !important;
}

/* DataTables sort indicator */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc {
  cursor: pointer;
}
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  color: var(--nx-primary-600) !important;
}

/* ---------- Profile sidebar (customer/lead profile pages) -------------- */
/* Small sidebar at left used in client.php / leads/profile.php */
.customer_profile .md\:tw-max-w-64,
.customer_profile [class*="tw-max-w-64"] {
  position: relative;
}
.customer_profile h4,
.customer_profile [class*="tw-text-lg"] {
  letter-spacing: -0.01em;
}

/* ---------- Empty states ----------------------------------------------- */
.no-data-found,
.empty-state,
.dataTables_empty {
  text-align: center;
  padding: 32px 20px;
  color: var(--nx-text-subtle);
  background: var(--nx-neutral-50);
  border: 1px dashed var(--nx-border-strong);
  border-radius: var(--nx-radius-md);
  font-size: 13.5px;
}

/* ---------- Switches / checkboxes -------------------------------------- */
input[type="checkbox"]:not(.tgl):not(.app-switch),
input[type="radio"] {
  accent-color: var(--nx-primary-600);
}

/* Bootstrap-style toggle switch (.app-switch is used in several settings pages) */
.app-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
}
.app-switch input { opacity: 0; width: 0; height: 0; }
.app-switch .app-switch-slider {
  position: absolute;
  inset: 0;
  background: var(--nx-neutral-300);
  border-radius: 999px;
  transition: background var(--nx-dur) var(--nx-ease);
  cursor: pointer;
}
.app-switch .app-switch-slider::before {
  content: "";
  position: absolute;
  height: 16px; width: 16px;
  left: 2px; bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--nx-dur) var(--nx-ease);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.15);
}
.app-switch input:checked + .app-switch-slider { background: var(--nx-primary-600); }
.app-switch input:checked + .app-switch-slider::before { transform: translateX(16px); }

/* ---------- Action toolbar (filters above tables) ---------------------- */
.dt-toolbar,
.table-toolbar,
.dt-buttons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.dt-buttons .btn {
  border-radius: var(--nx-radius-md);
}

/* ---------- Search/filter bar ------------------------------------------ */
.dropdown-form-checkboxes,
.dropdown-form-radios {
  padding: 10px;
}

/* ---------- Tooltips arrow color fix ----------------------------------- */
.tooltip.top .tooltip-arrow {
  border-top-color: var(--nx-neutral-900) !important;
  border-bottom-color: transparent !important;
}
.tooltip.bottom .tooltip-arrow {
  border-bottom-color: var(--nx-neutral-900) !important;
  border-top-color: transparent !important;
}
.tooltip.left .tooltip-arrow  { border-left-color:  var(--nx-neutral-900) !important; }
.tooltip.right .tooltip-arrow { border-right-color: var(--nx-neutral-900) !important; }

/* ---------- Kanban / pipeline cards ------------------------------------ */
.kan-ban-col {
  background: var(--nx-neutral-50);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  padding: 14px;
}
.kan-ban-col .panel_s,
.kan-ban-col .panel {
  border-radius: var(--nx-radius-md);
  margin-bottom: 10px;
  box-shadow: var(--nx-shadow-sm);
  border: 1px solid var(--nx-border);
  transition: transform var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.kan-ban-col .panel_s:hover,
.kan-ban-col .panel:hover {
  transform: translateY(-1px);
  box-shadow: var(--nx-shadow-md);
  border-color: var(--nx-primary-200);
}

/* ---------- File upload areas ------------------------------------------ */
#dropzoneDragArea,
.dropzoneDragArea,
form.dropzone {
  background: var(--nx-surface) !important;
  border: 2px dashed var(--nx-border-strong) !important;
  border-radius: var(--nx-radius-lg) !important;
  color: var(--nx-text-muted);
  transition: background var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
#dropzoneDragArea:hover,
.dropzoneDragArea:hover,
form.dropzone:hover {
  background: var(--nx-primary-50) !important;
  border-color: var(--nx-primary-400) !important;
  color: var(--nx-primary-700);
}
.dropzone .dz-preview .dz-image {
  border-radius: var(--nx-radius-sm) !important;
}

/* ---------- Notifications panel ---------------------------------------- */
.navbar-nav > li > .dropdown-menu.notifications {
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-lg);
  padding: 4px;
}
.navbar-nav > li > .dropdown-menu.notifications li:hover {
  background: var(--nx-neutral-50);
  border-radius: var(--nx-radius-sm);
}

/* ---------- Tabs polish ------------------------------------------------ */
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--nx-primary-700) !important;
  border-bottom: 2px solid var(--nx-primary-600) !important;
  margin-bottom: -1px !important;
  font-weight: 600;
}
.nav-tabs-horizontal .nav-tabs {
  border-bottom-color: var(--nx-border);
}

/* Vertical tabs (used in settings pages) */
.tab-content-1,
.tabs-vertical > .nav-stacked > li > a {
  padding: 9px 12px;
  border-radius: var(--nx-radius-md);
  color: var(--nx-text-muted);
  font-weight: 500;
}
.tabs-vertical > .nav-stacked > li.active > a,
.tabs-vertical > .nav-stacked > li > a:hover,
.tabs-vertical > .nav-stacked > li > a:focus {
  background: var(--nx-primary-50);
  color: var(--nx-primary-700);
}

/* ---------- Select2 / bootstrap-select polish -------------------------- */
.bootstrap-select > .dropdown-toggle.btn-default {
  background: var(--nx-surface);
  border-color: var(--nx-border-strong);
  color: var(--nx-text);
  border-radius: var(--nx-radius-md);
}
.bootstrap-select > .dropdown-toggle.btn-default:focus {
  border-color: var(--nx-primary-500) !important;
  box-shadow: var(--nx-shadow-ring) !important;
  outline: none !important;
}
.bootstrap-select.open > .dropdown-toggle.btn-default {
  background: var(--nx-surface);
  border-color: var(--nx-primary-500);
  box-shadow: var(--nx-shadow-ring);
}

/* ---------- Sidebar setup-menu badge (warning) ------------------------- */
#setup-menu-item .menu-badge { background: var(--nx-warning) !important; color: #fff !important; }

/* ---------- Card shadow tightening on hover for clickable rows --------- */
.panel_s:has(a[href]),
.panel:has(a[href]),
.list-group-item[href] {
  transition: box-shadow var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}

/* ---------- Misc cleanup ----------------------------------------------- */
hr { border-color: var(--nx-border); }
.text-muted { color: var(--nx-text-subtle) !important; }
.text-success { color: var(--nx-accent-700) !important; }
.text-danger  { color: var(--nx-danger) !important; }
.text-warning { color: var(--nx-warning) !important; }
.text-info    { color: var(--nx-info) !important; }
.text-primary { color: var(--nx-primary-700) !important; }
.text-dark    { color: var(--nx-text) !important; }

/* Bootstrap default link color in tables */
table a:not(.btn) { color: var(--nx-primary-700); }
table a:not(.btn):hover { color: var(--nx-primary-800); }

/* =========================================================================
   Nexora — Industrial / Editorial layer
   Bolder aesthetic per frontend-design skill: distinctive mono pairing,
   op-text labels, dot-grid backdrop, sharper details.
   ========================================================================= */

:root {
  --nx-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nx-grid-color: rgb(15 23 42 / 0.045);
  --nx-grid-color-strong: rgb(15 23 42 / 0.08);
}

/* Subtle dot-grid backdrop on the app shell */
body.no-modal-open #wrapper::before,
#wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle at 1px 1px, var(--nx-grid-color) 1px, transparent 0);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at top, rgb(0 0 0 / 0.6), transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at top, rgb(0 0 0 / 0.6), transparent 70%);
}
#wrapper > * { position: relative; z-index: 1; }
body.modal-open #wrapper::before { display: none; }
/* When a modal is open, drop the wrapper-child stacking context so .modal
   (z-index 1050) and its body-level .modal-backdrop (z-index 1040) layer
   correctly. Without this, the backdrop paints above the modal because the
   modal is trapped inside `#wrapper > *`'s `z-index: 1` stacking context. */
body.modal-open #wrapper > * { z-index: auto; }

/* Op-text label utility: small, uppercase, tracked, mono */
.nx-op,
.nx-eyebrow,
.tw-uppercase.tw-tracking-wider,
[data-op-label] {
  font-family: var(--nx-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-text-subtle);
}

/* Mono numeric utility — for KPIs, prices, IDs, timestamps */
.nx-mono,
.tabular-nums,
.font-mono { font-family: var(--nx-mono); font-variant-numeric: tabular-nums; }

/* Sharper radii (industrial feel) on shell elements */
.nx-card,
.nx-section,
.nx-card-body,
.nx-card-heading {
  border-radius: 10px;
}

/* ---------- Asymmetric page header ------------------------------------- */
.nx-page-header {
  position: relative;
  margin-bottom: 28px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nx-border);
}
.nx-page-header::before {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--nx-primary-600);
}
.nx-page-header .nx-page-title {
  font-size: 1.625rem;
  font-weight: 600;
  letter-spacing: -0.022em;
  line-height: 1.15;
}
.nx-page-header .nx-page-subtitle {
  font-family: var(--nx-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--nx-text-subtle);
  margin-top: 6px;
}

.nx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.nx-eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nx-primary-600);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 0.15);
}

/* ---------- KPI tile (used by stat strips) ----------------------------- */
.nx-kpi {
  position: relative;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: 10px;
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
  transition: border-color var(--nx-dur) var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease), transform var(--nx-dur) var(--nx-ease);
}
.nx-kpi::after {
  content: "";
  position: absolute;
  inset: -1px auto auto -1px;
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, var(--nx-primary-600), transparent);
}
.nx-kpi:hover {
  border-color: var(--nx-primary-300);
  box-shadow: var(--nx-shadow-md);
  transform: translateY(-1px);
}
.nx-kpi-label {
  font-family: var(--nx-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-text-subtle);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.nx-kpi-value {
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.875rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--nx-text);
  line-height: 1;
}
.nx-kpi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--nx-text-subtle);
}
.nx-kpi-trend {
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 999px;
}
.nx-kpi-trend.up   { background: var(--nx-accent-50);  color: var(--nx-accent-700); }
.nx-kpi-trend.down { background: var(--nx-danger-bg);  color: var(--nx-danger); }
.nx-kpi-trend.flat { background: var(--nx-neutral-100); color: var(--nx-text-muted); }

/* ---------- Mono-treatment for legacy stat strip on list pages -------- */
.content .tw-grid > .tw-bg-white.tw-border.tw-rounded-lg .tw-font-semibold,
.top_stats_wrapper .tw-flex.tw-justify-between > .tw-font-semibold {
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

/* ---------- ID/code chips ---------------------------------------------- */
.nx-id-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--nx-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--nx-neutral-100);
  color: var(--nx-text-muted);
  border: 1px solid var(--nx-border);
}

/* ---------- Refined sidebar treatment --------------------------------- */
.sidebar {
  background:
    linear-gradient(180deg, var(--nx-surface) 0%, var(--nx-surface) 70%, var(--nx-neutral-50) 100%);
}
.sidebar > ul.nav > li.active > a:first-child {
  box-shadow: inset 2px 0 0 0 var(--nx-primary-600);
}
.sidebar ul.nav li a {
  font-size: 13.5px;
  letter-spacing: 0;
}
.sidebar > ul.nav > li.active > a:first-child .menu-text {
  font-weight: 600;
}

/* ---------- Refined header: brand mark accents ------------------------- */
#header {
  background:
    linear-gradient(180deg, var(--nx-surface), var(--nx-surface));
  border-bottom: 1px solid var(--nx-border);
}
#header .logo-text {
  font-family: var(--nx-mono);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nx-text);
}

/* ---------- Search input refined --------------------------------------- */
#top_search input#search_input {
  font-size: 13px;
  border-radius: 8px !important;
}
#top_search::after {
  content: attr(data-shortcut);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--nx-mono);
  font-size: 10px;
  font-weight: 500;
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--nx-neutral-200);
  color: var(--nx-text-subtle);
  letter-spacing: 0.04em;
  pointer-events: none;
}

/* ---------- Buttons sharpened ------------------------------------------ */
.btn {
  border-radius: 8px;
  font-size: 13px;
  letter-spacing: 0.005em;
}
.btn-xs, .btn-sm { border-radius: 6px; }

.btn-primary,
.btn-info {
  box-shadow: 0 1px 2px rgb(37 99 235 / 0.18), inset 0 1px 0 rgb(255 255 255 / 0.12);
}
.btn-primary:hover,
.btn-info:hover {
  box-shadow: 0 2px 6px -1px rgb(37 99 235 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.14);
}
.btn-primary:active,
.btn-info:active {
  box-shadow: inset 0 2px 4px rgb(15 23 42 / 0.18) !important;
  transform: translateY(0.5px);
}

/* ---------- Tables: tighter, more editorial --------------------------- */
table.dataTable thead th,
.table > thead > tr > th {
  font-family: var(--nx-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-text-subtle);
  padding: 11px 14px;
}
.table > tbody > tr > td { padding: 12px 14px; }
.table > tbody > tr > td.nx-id,
table.dataTable tbody td.nx-id {
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--nx-text-muted);
}

/* ---------- Modal refinements ----------------------------------------- */
.modal-content { border-radius: 12px; }
.modal-header,
.modal-footer { border-radius: 0; }
.modal-header { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.modal-footer { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.modal-title { letter-spacing: -0.01em; }

/* ---------- Status pills with marker dot ------------------------------ */
.label-soft-success::before,
.label-soft-warning::before,
.label-soft-danger::before,
.label-soft-primary::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
  margin-right: 6px;
}
.label-soft-success::before { background: var(--nx-accent-600); }
.label-soft-warning::before { background: var(--nx-warning); }
.label-soft-danger::before  { background: var(--nx-danger); }
.label-soft-primary::before { background: var(--nx-primary-600); }

/* ---------- Subtle marker line on page panels ------------------------- */
.panel_s,
.panel,
.panel-default {
  position: relative;
}

/* ---------- Numbers everywhere: tabular nums --------------------------- */
.invoice-number,
.estimate-number,
.proposal-number,
.contract-number,
.id-number,
[data-table-id] td:first-child {
  font-family: var(--nx-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.005em;
}

/* ---------- Avatars: refined ring -------------------------------------- */
.staff-profile-image-small,
.client-profile-image-small,
.staff-profile-image-xs {
  border: 1px solid var(--nx-border);
}

/* ---------- Selectors / dropdowns: tighter ---------------------------- */
.selectpicker.btn-default,
.bootstrap-select > .dropdown-toggle.btn-default {
  font-size: 13px;
}

/* ---------- Sidebar nav animation: scale on hover ---------------------- */
.sidebar ul.nav li a {
  position: relative;
}
.sidebar > ul.nav > li > a:first-child::before {
  content: "";
  position: absolute;
  inset: 0 0 0 0;
  border-radius: var(--nx-radius-md);
  background: transparent;
  transition: background var(--nx-dur) var(--nx-ease);
}

/* ---------- "Live" presence indicator (used in chrome) ----------------- */
.nx-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--nx-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-text-subtle);
}
.nx-live-dot::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--nx-accent-600);
  box-shadow: 0 0 0 4px rgb(5 150 105 / 0.15);
  animation: nxPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes nxPulse {
  0%, 100% { box-shadow: 0 0 0 4px rgb(5 150 105 / 0.15); }
  50%      { box-shadow: 0 0 0 6px rgb(5 150 105 / 0.05); }
}

/* ---------- Section divider with op-label ----------------------------- */
.nx-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
}
.nx-divider::before { content: ""; height: 1px; flex: 1; background: var(--nx-border); }
.nx-divider::after  { content: ""; height: 1px; flex: 5; background: var(--nx-border); }
.nx-divider > .nx-divider-label {
  font-family: var(--nx-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nx-text-subtle);
}

/* =========================================================================
   Nexora — Motion layer (paired with assets/js/nexora-motion.js)
   Reveal classes are hidden ONLY when JS marks <body class="js-motion-ready">,
   so a no-JS or failed-load fallback still shows the page normally.
   ========================================================================= */

/* Reveal/stagger source states — only opt-in classes are hidden. The page
   shell (.content > .row, sidebar items) is NEVER hidden by CSS; the JS
   animates them with gsap.fromTo() so first paint shows real content and
   a CDN/GSAP failure can never leave the page blank. */
body.js-motion-ready .nx-reveal,
body.js-motion-ready .nx-reveal-up,
body.js-motion-ready .nx-reveal-fade,
body.js-motion-ready .nx-reveal-scale {
  opacity: 0;
  will-change: opacity, transform;
}
body.js-motion-ready .nx-reveal-up    { transform: translate3d(0, 12px, 0); }
body.js-motion-ready .nx-reveal-scale { transform: scale(0.985); }

/* Stagger groups: child auto-detection by JS via .nx-stagger > * */
body.js-motion-ready .nx-stagger > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  will-change: opacity, transform;
}

/* Hover lift utility (CSS-only, works without GSAP) */
.nx-lift {
  transition: transform var(--nx-dur) var(--nx-ease),
              box-shadow var(--nx-dur) var(--nx-ease),
              border-color var(--nx-dur) var(--nx-ease);
}
.nx-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--nx-shadow-md);
}

/* Pressable utility — subtle press feedback for clickable cards */
.nx-pressable {
  transition: transform 120ms var(--nx-ease), box-shadow var(--nx-dur) var(--nx-ease);
}
.nx-pressable:active { transform: translateY(1px) scale(0.998); }

/* Top page-load progress bar (GSAP drives the width) */
.nx-pagebar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, var(--nx-primary-500), var(--nx-accent-500));
  z-index: 10000;
  pointer-events: none;
  box-shadow: 0 0 8px rgb(37 99 235 / 0.4);
}

/* ---------- Skeleton loaders ------------------------------------------- */
.nx-skeleton {
  position: relative;
  background: var(--nx-neutral-100);
  border-radius: var(--nx-radius-sm);
  overflow: hidden;
}
.nx-skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg,
    transparent 0,
    rgb(255 255 255 / 0.6) 50%,
    transparent 100%);
  animation: nxShimmer 1.4s linear infinite;
}
.nx-skeleton--text   { height: 12px; margin: 6px 0; }
.nx-skeleton--title  { height: 18px; width: 40%; margin: 8px 0; }
.nx-skeleton--avatar { width: 36px; height: 36px; border-radius: 999px; }
.nx-skeleton--row    { height: 44px; margin-bottom: 8px; border-radius: var(--nx-radius-md); }
@keyframes nxShimmer {
  100% { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .nx-skeleton::after { animation: none; }
}

/* ---------- Toast container -------------------------------------------- */
.nx-toast-stack {
  position: fixed;
  z-index: 11000;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(420px, calc(100vw - 40px));
}
.nx-toast {
  pointer-events: auto;
  background: var(--nx-surface);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-radius-lg);
  box-shadow: var(--nx-shadow-lg);
  padding: 12px 14px 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 260px;
  font-size: 13px;
  border-left: 3px solid var(--nx-primary-600);
}
.nx-toast--success { border-left-color: var(--nx-accent-600); }
.nx-toast--warning { border-left-color: var(--nx-warning); }
.nx-toast--danger  { border-left-color: var(--nx-danger); }
.nx-toast-title {
  font-weight: 600;
  color: var(--nx-text);
  margin-bottom: 2px;
}
.nx-toast-body { color: var(--nx-text-muted); }
.nx-toast-close {
  background: none;
  border: 0;
  color: var(--nx-text-subtle);
  font-size: 16px;
  line-height: 1;
  padding: 0 0 0 8px;
  cursor: pointer;
}

/* ---------- Timeline / activity feed ----------------------------------- */
.nx-timeline {
  position: relative;
  padding-left: 22px;
}
.nx-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--nx-border);
  border-radius: 999px;
}
.nx-timeline-item {
  position: relative;
  padding: 4px 0 18px;
}
.nx-timeline-item::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--nx-surface);
  border: 2px solid var(--nx-primary-600);
  box-shadow: 0 0 0 3px var(--nx-primary-50);
}
.nx-timeline-item--success::before { border-color: var(--nx-accent-600); box-shadow: 0 0 0 3px var(--nx-accent-50); }
.nx-timeline-item--warning::before { border-color: var(--nx-warning);     box-shadow: 0 0 0 3px var(--nx-warning-bg); }
.nx-timeline-item--danger::before  { border-color: var(--nx-danger);      box-shadow: 0 0 0 3px var(--nx-danger-bg); }
.nx-timeline-time {
  font-family: var(--nx-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--nx-text-subtle);
  text-transform: uppercase;
}
.nx-timeline-title { font-weight: 600; color: var(--nx-text); margin-top: 2px; }
.nx-timeline-body  { color: var(--nx-text-muted); margin-top: 2px; }

/* ---------- Stepper (used in setup wizards / multi-step forms) --------- */
.nx-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nx-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--nx-neutral-100);
  color: var(--nx-text-subtle);
  font-size: 12.5px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.nx-step .nx-step-num {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--nx-surface);
  color: var(--nx-text-muted);
  font-family: var(--nx-mono);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--nx-border);
}
.nx-step--active {
  background: var(--nx-primary-50);
  color: var(--nx-primary-700);
  border-color: var(--nx-primary-200);
}
.nx-step--active .nx-step-num {
  background: var(--nx-primary-600);
  color: #fff;
  border-color: var(--nx-primary-600);
}
.nx-step--done {
  background: var(--nx-accent-50);
  color: var(--nx-accent-700);
}
.nx-step--done .nx-step-num {
  background: var(--nx-accent-600);
  color: #fff;
  border-color: var(--nx-accent-600);
}
.nx-step-sep {
  flex: 0 0 16px;
  height: 1px;
  background: var(--nx-border);
}

/* ---------- Chip group (filter chips, tag input) ----------------------- */
.nx-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--nx-neutral-100);
  border: 1px solid var(--nx-border);
  color: var(--nx-text-muted);
  font-size: 12px;
  font-weight: 500;
  transition: background var(--nx-dur) var(--nx-ease), color var(--nx-dur) var(--nx-ease), border-color var(--nx-dur) var(--nx-ease);
}
.nx-chip:hover { background: var(--nx-surface); color: var(--nx-text); border-color: var(--nx-border-strong); }
.nx-chip--active {
  background: var(--nx-primary-600);
  border-color: var(--nx-primary-600);
  color: #fff;
}
.nx-chip-x {
  margin-left: 2px;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity var(--nx-dur) var(--nx-ease);
}
.nx-chip-x:hover { opacity: 1; }

/* ---------- Empty state v2 (with icon slot) ---------------------------- */
.nx-empty {
  text-align: center;
  padding: 40px 24px;
  background: var(--nx-surface);
  border: 1px dashed var(--nx-border-strong);
  border-radius: var(--nx-radius-lg);
}
.nx-empty-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 14px;
  border-radius: 14px;
  background: var(--nx-primary-50);
  color: var(--nx-primary-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
.nx-empty-title { font-size: 16px; font-weight: 600; color: var(--nx-text); margin-bottom: 4px; }
.nx-empty-body  { font-size: 13.5px; color: var(--nx-text-muted); max-width: 420px; margin: 0 auto 14px; }

/* ---------- Code block (used in API/dev pages) ------------------------- */
.nx-code {
  font-family: var(--nx-mono);
  font-size: 12.5px;
  background: var(--nx-neutral-900);
  color: #E2E8F0;
  border-radius: var(--nx-radius-md);
  padding: 14px 16px;
  overflow-x: auto;
  border: 1px solid var(--nx-neutral-800);
  line-height: 1.6;
}
.nx-code-inline {
  font-family: var(--nx-mono);
  font-size: 0.9em;
  background: var(--nx-neutral-100);
  border: 1px solid var(--nx-border);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--nx-text);
}

/* ---------- Sweetalert2 / NoUIslider polish (used by Perfex) ----------- */
.swal2-popup {
  border-radius: var(--nx-radius-xl) !important;
  font-family: inherit !important;
  box-shadow: var(--nx-shadow-lg) !important;
  border: 1px solid var(--nx-border) !important;
}
.swal2-title { color: var(--nx-text) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.swal2-html-container { color: var(--nx-text-muted) !important; }
.swal2-styled.swal2-confirm {
  background: var(--nx-primary-600) !important;
  border-radius: var(--nx-radius-md) !important;
  box-shadow: 0 1px 2px rgb(37 99 235 / 0.18) !important;
}
.swal2-styled.swal2-cancel  {
  background: var(--nx-neutral-100) !important;
  color: var(--nx-text) !important;
  border-radius: var(--nx-radius-md) !important;
}

/* ---------- Datepicker / TimePicker tightening ------------------------- */
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active {
  background: var(--nx-primary-600) !important;
  border-radius: var(--nx-radius-sm) !important;
  color: #fff !important;
}
.bootstrap-datetimepicker-widget table td:hover {
  background: var(--nx-primary-50) !important;
  color: var(--nx-primary-700) !important;
  border-radius: var(--nx-radius-sm) !important;
}

/* ---------- Card click-area focus ring (keyboard a11y) ----------------- */
.nx-card[tabindex]:focus-visible,
.nx-kpi[tabindex]:focus-visible,
.panel[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--nx-shadow-ring);
  border-color: var(--nx-primary-500);
}

/* ---------- Dropdown menu motion-ready (GSAP overrides BS3 default) ---- */
body.js-motion-ready .dropdown.open > .dropdown-menu,
body.js-motion-ready .dropdown-menu.show {
  /* JS animates these in; keep CSS noop so we don't double-animate */
}

/* Sidebar items animate via gsap.fromTo() — no CSS pre-hide to avoid flash. */

/* ---------- Modal entrance source state -------------------------------- */
body.js-motion-ready .modal.in .modal-dialog {
  /* GSAP overrides; ensure base fade works if GSAP fails */
}

/* ---------- Subtle gradient sheen on primary KPI tile ------------------ */
.nx-kpi--primary {
  background:
    linear-gradient(135deg, var(--nx-primary-600) 0%, var(--nx-primary-700) 100%) !important;
  border-color: var(--nx-primary-700) !important;
  color: #fff;
}
.nx-kpi--primary .nx-kpi-label,
.nx-kpi--primary .nx-kpi-foot { color: rgb(255 255 255 / 0.78) !important; }
.nx-kpi--primary .nx-kpi-value { color: #fff !important; }
.nx-kpi--primary::after {
  background: linear-gradient(90deg, rgb(255 255 255 / 0.4), transparent);
}

/* ---------- Float-alert close button — Bootstrap 3's `.close { float: right }`
   gets dropped on flex-ish containers / when something resets float, so the
   × renders inline before the message ("×Updated"). Anchor it absolutely
   inside the alert and reserve right padding for the message. */
.float-alert { position: relative; padding-right: 36px; }
.float-alert .close {
  position: absolute;
  top: 8px;
  right: 12px;
  float: none !important;
  margin: 0;
  line-height: 1;
}

/* ---------- Make print clean (strip dot-grid, motion, shadows) --------- */
@media print {
  #wrapper::before { display: none !important; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    box-shadow: none !important;
  }
  .nx-pagebar, .nx-toast-stack { display: none !important; }
}

/* Voice configuration: scoped to avoid changing unrelated Perfex forms. */
.nexora-settings { max-width: 1440px; margin-inline: auto; }
.nexora-settings h1, .nexora-settings h2 { color: #0f172a; }
.nexora-settings .form-group { margin-block: 14px; }
.nexora-settings .form-group > label { display: block; line-height: 1.5; }
.nexora-settings .form-group > small { display: block; margin-block-start: 6px; }
.nexora-settings input:focus, .nexora-settings textarea:focus, .nexora-settings select:focus { outline: 2px solid #2563eb; outline-offset: 2px; }
@media (max-width: 767px) { .nexora-settings .btn { margin-block: 4px; white-space: normal; } }
.nexora-settings .nexora-connection-check { display: inline-block; margin-inline-end: 8px; }

.nexora-studio #wf-canvas { min-height: 480px; overflow: auto; position: relative; }
.nexora-studio #wf-canvas .wf-node { position: absolute; }
.nexora-studio #wf-canvas svg { width: 1600px; height: 1200px; transform-origin: 0 0; }
.nexora-studio .wf-node:focus-within { outline: 3px solid #2563eb; outline-offset: 3px; }
.nexora-studio .wf-node button { min-width: 32px; min-height: 32px; }
@media (prefers-reduced-motion: reduce) { .nexora-studio * { scroll-behavior: auto !important; transition: none !important; } }

.nexora-operations { max-width: 1600px; margin-inline: auto; }
.nexora-operations h1 { font-size: 28px; color: #0f172a; }
.nexora-operations h2 { font-size: 19px; color: #334155; }
.nexora-operations .nexora-metric-title { font-size: 15px; }
.nexora-operations .nexora-metric-value { font-size: 32px; font-variant-numeric: tabular-nums; margin-block: 8px 0; color: #2563eb; }
.nexora-operations .nexora-operation-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.nexora-operations .table td, .nexora-operations .table th { text-align: start; }
.nexora-operations .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
.nexora-operations .table form { margin: 0; }
@media (max-width: 767px) { .nexora-operations h1 { font-size: 24px; } .nexora-operations .panel-body { padding: 15px; } }
.nexora-studio #wf-canvas { height: 480px; touch-action: none; }
.nexora-studio #wf-nodes { position: absolute; inset: 0; width: 1600px; height: 1200px; transform-origin: 0 0; }
.nexora-studio #wf-edges { position: absolute; inset: 0; pointer-events: none; transform-origin: 0 0; }
.nexora-studio .nexora-wf-node { position: absolute; width: 175px; min-height: 70px; background: #fff; border: 1px solid #94a3b8; border-radius: 8px; box-shadow: 0 2px 7px #0f172a18; text-align: start; padding: 12px; touch-action: none; }
.nexora-studio .nexora-wf-node small { display: block; margin-block-start: 6px; color: #475569; }
.nexora-studio .nexora-wf-node:focus-visible, .nexora-studio .nexora-wf-node.selected { outline: 3px solid #2563eb; outline-offset: 3px; }
.nexora-operations .nexora-usage-filter { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-block: 12px; }
.nexora-operations .nexora-usage-filter .form-control { width: auto; min-width: 140px; }
@media (max-width: 991px) { .nexora-studio [class*="col-md-"] { width: 100%; float: none; clear: both; } .nexora-studio #wf-canvas { height: 480px; } }

/* Scoped CRM tools: credentials stay within this one response. */
.nexora-tools label{display:block;margin-top:12px}.nexora-tools .nexora-tool-actions{padding-top:32px;display:flex;flex-wrap:wrap;gap:8px}.nexora-tools .nexora-one-time{white-space:pre-wrap;overflow-wrap:anywhere;direction:ltr;text-align:left}.nexora-tools code{overflow-wrap:anywhere}.nexora-tools .table-responsive{max-width:100%}.nexora-tools select[multiple]{min-height:100px}.nexora-tools li{margin-bottom:10px}

/* New operational views inherit the active staff language direction. */
.nexora-tools,.nexora-sip,.nexora-automation,.nexora-widget,#provider-workspace{overflow-wrap:anywhere}
.nexora-tools pre,.nexora-tools code,.nexora-sip code,.nexora-widget pre,.nexora-studio pre{direction:ltr;text-align:left;unicode-bidi:plaintext}
.nexora-studio #wf-canvas{direction:ltr}.nexora-studio .nexora-wf-node{white-space:normal}
[dir="rtl"] .nexora-studio .nexora-wf-node,[dir="rtl"] .nexora-tools table,[dir="rtl"] .nexora-automation table,[dir="rtl"] #provider-workspace table{direction:rtl;text-align:right}
.nexora-tools :focus-visible,.nexora-sip :focus-visible,.nexora-automation :focus-visible,.nexora-widget :focus-visible,#provider-workspace :focus-visible,.nexora-studio :focus-visible{outline:3px solid #2563eb;outline-offset:2px}
@media(max-width:767px){.nexora-tools .btn,.nexora-sip .btn,.nexora-automation .btn,#provider-workspace .btn{white-space:normal;margin-block:4px}.nexora-widget .form-inline .form-group{display:block;margin-inline:0;margin-block:10px}.nexora-widget .bootstrap-select{max-width:100%}.nexora-tools .nexora-tool-actions{padding-top:12px}}
.content[dir="rtl"].nexora-settings .row>[class*="col-"],.content[dir="rtl"].nexora-studio .row>[class*="col-"],.content[dir="rtl"].nexora-tools .row>[class*="col-"],.content[dir="rtl"].nexora-sip .row>[class*="col-"],.content[dir="rtl"].nexora-automation .row>[class*="col-"],.content[dir="rtl"].nexora-widget .row>[class*="col-"],#provider-workspace[dir="rtl"] .row>[class*="col-"]{float:right}
.content[dir="rtl"] th,.content[dir="rtl"] td{text-align:right}.nexora-phones input[type="tel"],.nexora-phones input[type="url"]{direction:ltr}
.nexora-mcp{max-width:1200px;overflow-wrap:anywhere}.nexora-mcp label{display:block;margin-block-start:12px}.nexora-mcp .form-control{max-width:100%}.nexora-mcp :focus-visible{outline:3px solid #2563eb;outline-offset:2px}@media(max-width:767px){.nexora-mcp .btn{white-space:normal;margin-block:4px}}

/* Knowledge-base panels: narrow viewports wrap headings and unbroken identifiers. */
.nexora-kb{min-width:0;overflow-wrap:anywhere}.nexora-kb .panel-body{min-width:0}.nexora-kb-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.nexora-kb-header h4{flex:1 1 180px;min-width:0}.nexora-kb-header .btn-group{display:flex;flex-wrap:wrap;gap:4px;max-width:100%}.nexora-kb .btn{white-space:normal;overflow-wrap:anywhere}.nexora-kb-preview{max-height:420px;max-width:100%;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;unicode-bidi:plaintext}.nexora-kb-metadata{width:100%;table-layout:fixed}.nexora-kb-metadata th{width:35%}.nexora-kb table td,.nexora-kb table th{white-space:normal;overflow-wrap:anywhere}.nexora-kb-delete{display:inline}.nexora-kb .form-control{min-width:0;max-width:100%}.nexora-kb :focus-visible{outline:3px solid #2563eb;outline-offset:2px}.nexora-kb[dir="rtl"] .row>[class*="col-"]{float:right}@media(max-width:767px){.nexora-kb .form-inline{display:flex;flex-wrap:wrap;gap:8px;min-width:0;max-width:100%}.nexora-kb .form-inline .form-group{min-width:0;max-width:100%}.nexora-kb .form-inline input{max-width:100%}.nexora-kb-header .btn-group{width:100%}.nexora-kb input[type="file"]{height:auto;min-height:34px}}

/* Workspace configuration: bounded metadata previews and small screens. */
.nexora-workspace .nexora-workspace-preview{max-height:480px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}
.nexora-workspace .form-control{max-width:100%}
.nexora-workspace dd,.nexora-workspace code{overflow-wrap:anywhere;word-break:break-word}

.nexora-pbx h1{overflow-wrap:anywhere}.nexora-pbx fieldset{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end}.nexora-pbx fieldset label{flex:1 1 200px;min-width:0}.nexora-pbx .form-control{max-width:100%}.nexora-pbx td{overflow-wrap:anywhere}.nexora-pbx button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}
.nexora-messaging .form-control{max-width:100%}.nexora-messaging #message-variable-fields{margin-top:15px}.nexora-messaging #message-variable-inputs label{display:block;margin-top:10px}.nexora-messaging td{overflow-wrap:anywhere}.nexora-messaging button:focus-visible{outline:3px solid #2563eb;outline-offset:2px}

/* Conversation filters retain readable labels and native keyboard focus. */
.nexora-conversations .form-inline { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.nexora-conversations .form-group { min-width:160px; max-width:100%; }
.nexora-conversations .form-group > label { display:block; text-align:start; }
.nexora-conversations .form-group .form-control { max-width:100%; }
.nexora-conversations :focus-visible { outline:3px solid #2563eb; outline-offset:2px; }
@media(max-width:767px) { .nexora-conversations .form-group,.nexora-conversations .form-group .form-control { width:100%; } }

/* Conversation detail remains readable with provider IDs and multilingual transcripts. */
.nexora-conversation-detail .nexora-conversation-heading { flex-wrap: wrap; gap: 12px; }
.nexora-conversation-detail .nexora-conversation-heading .btn-group { display: flex; flex-wrap: wrap; gap: 4px; }
.nexora-conversation-detail table { table-layout: fixed; width: 100%; }
.nexora-conversation-detail th { width: 34%; }
.nexora-conversation-detail td, .nexora-conversation-detail p { overflow-wrap: anywhere; }
.nexora-conversation-detail pre { max-width: 100%; max-height: 520px; overflow: auto; }
.nexora-conversation-detail .nav-tabs { display: flex; flex-wrap: wrap; }
.nexora-conversation-detail .nexora-transcript-entry { padding: 12px; margin-bottom: 12px; border-inline-start: 3px solid #5975b7; background: #f5f7fb; border-radius: 4px; }
.nexora-conversation-detail .nexora-transcript-entry p { margin: 6px 0 0; white-space: normal; }

/* Native batch campaign usability; scoped to its page. */

    .nexora-batches .batch-shell { background:#ffffff; color:#0f172a; padding:24px; border-radius:16px; box-shadow:0 10px 35px rgba(15,23,42,0.12); }
    .nexora-batches .batch-top { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; }
    .nexora-batches .batch-heading { margin:0; font-size:26px; font-weight:700; color:#0f172a; }
    .nexora-batches .batch-subtle { color:#475569; margin:4px 0 0; }
    .nexora-batches .batch-btn { border:1px solid #e2e8f0; background:#f8fafc; color:#0f172a; border-radius:12px; padding:10px 18px; font-weight:700; box-shadow:0 10px 25px rgba(15,23,42,0.08); transition:all .15s ease; }
    .nexora-batches .batch-btn:hover { transform:translateY(-1px); background:#e2e8f0; }
    .nexora-batches .search-row { margin-bottom:18px; }
    .nexora-batches .batch-search { width:100%; border-radius:12px; border:1px solid #e2e8f0; background:#ffffff; color:#0f172a; padding:11px 14px; box-shadow:0 4px 12px rgba(15,23,42,0.04); }
    .nexora-batches .batch-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
    .nexora-batches .batch-card { background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:14px; box-shadow:0 10px 22px rgba(15,23,42,0.08); transition:all .15s ease; }
    .nexora-batches .batch-card.batch-card-click { cursor:pointer; }
    .nexora-batches .batch-card.batch-card-click:hover { box-shadow:0 14px 26px rgba(15,23,42,0.12); transform:translateY(-2px); }
    .nexora-batches .batch-card h5 { margin:0 0 8px; font-size:18px; font-weight:700; color:#0f172a; word-break:break-word; }
    .nexora-batches .batch-meta { color:#475569; font-size:13px; margin-bottom:4px; }
    .nexora-batches .pill-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; }
    .nexora-batches .pill { display:inline-flex; align-items:center; gap:6px; padding:6px 11px; border-radius:999px; font-size:12px; font-weight:700; }
    .nexora-batches .pill-success { background:#d1fae5; color:#065f46; }
    .nexora-batches .pill-muted { background:#e2e8f0; color:#0f172a; }
    .nexora-batches .pill-dark { background:#f1f5f9; color:#0f172a; }
    .nexora-batches .status-badge { padding:5px 9px; border-radius:8px; font-weight:600; font-size:12px; display:inline-flex; align-items:center; gap:6px; border:1px solid transparent; }
    .nexora-batches .status-ok { background:#d1fae5; color:#065f46; border-color:#34d399; }
    .nexora-batches .status-warn { background:#e0f2fe; color:#075985; border-color:#38bdf8; }
    .nexora-batches .status-bad { background:#fee2e2; color:#b91c1c; border-color:#fca5a5; }
    .nexora-batches .batch-form { margin-top:18px; display:none; background:#ffffff; border:1px solid #e2e8f0; border-radius:16px; padding:18px; box-shadow:0 10px 25px rgba(15,23,42,0.08); }
    .nexora-batches .form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
    .nexora-batches .dark-field { background:#ffffff; border:1px solid #e2e8f0; color:#0f172a; border-radius:10px; box-shadow:0 4px 12px rgba(15,23,42,0.05); }
    .nexora-batches .field-label { color:#0f172a; font-weight:600; margin-bottom:6px; display:block; }
    .nexora-batches .upload-box { border:1px dashed #cbd5e1; border-radius:12px; padding:14px; background:#f8fafc; }
    .nexora-batches .upload-actions { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
    .nexora-batches .upload-btn { background:#0f172a; color:#ffffff; border:1px solid #0f172a; border-radius:10px; padding:8px 14px; font-weight:600; }
    .nexora-batches .template-btn { background:#e2e8f0; color:#0f172a; border:1px solid #cbd5e1; border-radius:10px; padding:8px 14px; font-weight:600; }
    .nexora-batches .upload-hint { color:#475569; margin:0 0 8px; font-size:13px; }
    .nexora-batches .upload-preview { background:#ffffff; border:1px solid #e2e8f0; border-radius:10px; padding:0; color:#0f172a; font-size:13px; max-height:260px; overflow:auto; box-shadow:0 4px 12px rgba(15,23,42,0.04); }
    .nexora-batches .preview-empty { padding:12px 14px; color:#475569; }
    .nexora-batches .preview-table { width:100%; border-collapse:separate; border-spacing:0; }
    .nexora-batches .preview-table thead th { position:sticky; top:0; background:#f8fafc; z-index:1; padding:10px 12px; font-size:12px; color:#0f172a; border-bottom:1px solid #e2e8f0; }
    .nexora-batches .preview-pill { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px; background:#e2e8f0; color:#0f172a; font-weight:700; font-size:11px; margin-bottom:6px; }
    .nexora-batches .preview-pill .fa-phone { color:#16a34a; }
    .nexora-batches .preview-table tbody td { padding:12px; border-bottom:1px solid #e2e8f0; font-size:13px; vertical-align:top; white-space:pre-wrap; }
    .nexora-batches .preview-table tbody tr:nth-child(even) { background:#f8fafc; }
    .nexora-batches .preview-missing { color:#94a3b8; }
    .nexora-batches .timing-row { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px; }
    .nexora-batches .timing-option { background:#f8fafc; border:1px solid #e2e8f0; border-radius:12px; padding:10px 12px; display:flex; align-items:center; gap:8px; cursor:pointer; }
    .nexora-batches .schedule-input { max-width:260px; }
    .nexora-batches .form-footer { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
    .nexora-batches .ghost-btn { background:#e2e8f0; color:#0f172a; border:1px solid #cbd5e1; border-radius:12px; padding:10px 16px; font-weight:700; }
    .nexora-batches .primary-btn { background:#16a34a; color:#ffffff; border:none; border-radius:12px; padding:10px 18px; font-weight:700; box-shadow:0 8px 22px rgba(22,163,74,0.28); }
    .nexora-batches .subdued { color:#475569; font-size:12px; margin-top:6px; }
    .nexora-batches .manual-toggle { color:#2563eb; cursor:pointer; font-size:12px; }
    .nexora-batches .manual-area { display:none; margin-top:8px; }
    .nexora-batches .recipient-source-row { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
    .nexora-batches .recipient-source { display:flex; align-items:center; gap:8px; border:1px solid #dbe3ee; background:#f8fafc; border-radius:10px; padding:9px 12px; font-weight:600; }
    .nexora-batches .segment-panel { display:none; border:1px solid #e2e8f0; border-radius:12px; padding:14px; background:#ffffff; margin-bottom:12px; }
    .nexora-batches .segment-panel.active { display:block; }
    .nexora-batches .segment-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-top:10px; }
    .nexora-batches .segment-count { font-size:13px; color:#475569; }
    .nexora-batches .detail-actions { display:flex; gap:8px; justify-content:flex-end; flex-wrap:wrap; }

.nexora-batches .batch-grid,.nexora-batches .form-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.nexora-batches .batch-top,.nexora-batches .upload-actions{flex-wrap:wrap}
.nexora-batches .batch-shell{min-width:0}.nexora-batches .batch-meta,.nexora-batches #detail-id{overflow-wrap:anywhere}.nexora-batches .form-grid>*{min-width:0}.nexora-batches #selected-preview-leads{display:flex;flex-direction:column;gap:8px}.nexora-batches #selected-preview-leads label{margin-inline:0;padding-inline:24px 0}.nexora-batches [role=button]:focus-visible,.nexora-batches button:focus-visible{outline:3px solid var(--nx-primary-600);outline-offset:3px}.nexora-batches[dir=rtl] .preview-table{text-align:right}.nexora-batches .manual-toggle{background:none;border:0;padding:0}.nexora-batches .batch-response{max-height:320px;overflow:auto}.nexora-batches .batch-detail-table{max-height:360px;overflow:auto}
@media(max-width:480px){.nexora-batches .batch-shell{padding:12px}.nexora-batches .batch-form{padding:10px}.nexora-batches .batch-heading{font-size:22px}.nexora-batches .form-footer{flex-wrap:wrap}.nexora-batches .batch-top>div{min-width:0}.nexora-batches .modal-dialog{margin:10px}.nexora-batches .upload-actions button{max-width:100%}}

/* Agent read-only detail: long provider IDs must not expand the mobile page. */
.nexora-agent-detail .nexora-agent-detail-heading { flex-wrap: wrap; gap: 12px; }
.nexora-agent-detail table { table-layout: fixed; width: 100%; }
.nexora-agent-detail th { width: 34%; }
.nexora-agent-detail td { overflow-wrap: anywhere; }
.nexora-agent-detail pre { max-width: 100%; max-height: 420px; overflow: auto; }

.nexora-trigger-bindings .panel-body { overflow-wrap: anywhere; }
.nexora-trigger-bindings .table-responsive { max-width: 100%; }
.nexora-trigger-bindings pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; }
.nexora-trigger-bindings .bootstrap-select { max-width: 100%; }

.nexora-audiences .panel-body { overflow-wrap: anywhere; }
.nexora-audiences pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; }
.nexora-audiences .bootstrap-select { max-width: 100%; }

/* Shared keyboard and narrow-screen behavior for native voice administration. */
:is(.nexora-settings,.nexora-products,.nexora-tools,.nexora-sip,.nexora-pbx,.nexora-messaging,.nexora-automation,.nexora-mcp,.nexora-trigger-bindings,.nexora-audiences) :focus-visible { outline:3px solid var(--nx-primary-600); outline-offset:3px; }
:is(.nexora-settings,.nexora-products,.nexora-tools,.nexora-sip,.nexora-pbx,.nexora-messaging,.nexora-automation,.nexora-mcp,.nexora-trigger-bindings,.nexora-audiences) .table-responsive { max-width:100%; overscroll-behavior-inline:contain; }
:is(.nexora-settings,.nexora-products,.nexora-tools,.nexora-sip,.nexora-pbx,.nexora-messaging,.nexora-automation,.nexora-mcp,.nexora-trigger-bindings,.nexora-audiences)[dir="rtl"] :is(th,td) { text-align:start; }
@media(max-width:767px) {
 :is(.nexora-settings,.nexora-products,.nexora-tools,.nexora-sip,.nexora-pbx,.nexora-messaging,.nexora-automation,.nexora-mcp,.nexora-trigger-bindings,.nexora-audiences) .btn { white-space:normal; overflow-wrap:anywhere; max-width:100%; }
 :is(.nexora-products,.nexora-tools,.nexora-sip,.nexora-pbx,.nexora-messaging) .panel-body { min-width:0; overflow-wrap:anywhere; }
}

.nexora-tags .panel-body{max-width:1100px;overflow-wrap:anywhere}.nexora-tags label{margin-block-start:12px}.nexora-tags :focus-visible{outline:3px solid var(--nx-primary-600);outline-offset:3px}.nexora-tags .btn{white-space:normal;max-width:100%}

.nexora-evaluation .panel-body{overflow-wrap:anywhere}.nexora-evaluation .table-responsive{max-width:100%}.nexora-evaluation :focus-visible{outline:3px solid var(--nx-primary-600);outline-offset:3px}.nexora-evaluation .btn{max-width:100%;white-space:normal}.nexora-evaluation[dir="rtl"] th,.nexora-evaluation[dir="rtl"] td{text-align:start}

.nexora-sip-calls .panel-body{overflow-wrap:anywhere}.nexora-sip-calls label{margin-block-start:12px}.nexora-sip-calls .btn{max-width:100%;white-space:normal}.nexora-sip-calls #sip-feedback{white-space:pre-wrap;overflow-wrap:anywhere;margin-block-start:15px}.nexora-sip-calls .sip-variable-row{margin-block-end:8px}.nexora-sip-calls .table-responsive{max-width:100%}.nexora-sip-calls :focus-visible{outline:3px solid var(--nx-primary-600);outline-offset:3px}.nexora-sip-calls[dir="rtl"] th,.nexora-sip-calls[dir="rtl"] td{text-align:start}

.voiceai-profile-panel .table-responsive{max-width:100%}.voiceai-profile-panel .voiceai-profile-detail-cell{min-width:220px}.voiceai-profile-panel .voiceai-profile-audio-cell{min-width:180px}.voiceai-profile-panel audio{width:170px}.voiceai-profile-panel pre{max-height:140px;overflow:auto;font-size:11px}.voiceai-profile-panel :focus-visible{outline:3px solid var(--nx-primary-600);outline-offset:3px}.voiceai-profile-panel[dir="rtl"] th,.voiceai-profile-panel[dir="rtl"] td{text-align:start}.voiceai-profile-panel .btn{max-width:100%;white-space:normal}

.nexora-onboarding .panel-body{overflow-wrap:anywhere}.nexora-onboarding .btn{white-space:normal;max-width:100%}.nexora-onboarding h2{font-size:1.3rem}.nexora-onboarding :focus-visible{outline:3px solid var(--nx-primary-600);outline-offset:3px}.nexora-onboarding[dir="rtl"] li{text-align:start}

/* Bounded native workspace and knowledge resource controls. */
.nexora-workspace-resources legend,
.nexora-workspace-resources td,
.nexora-knowledge-organization td,
.nexora-knowledge-organization .panel-body p { overflow-wrap:anywhere; }
.nexora-workspace-resources fieldset { min-width:0; }
.nexora-workspace-resources [dir="rtl"] .table,
.nexora-knowledge-organization[dir="rtl"] .table { text-align:right; }
@media(max-width:480px){
 .nexora-workspace-resources .btn,
 .nexora-knowledge-organization .btn { white-space:normal; max-width:100%; }
}

/* Native knowledge retrieval keeps extracted HTML inert and long chunks readable. */
.nexora-knowledge-retrieval pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 32rem; overflow-y: auto; }
.nexora-native-agent-settings summary { cursor: pointer; }

/* Native provider graph: separate from the CRM workflow studio. */
.nexora-agent-graph .nexora-graph-card{min-width:0;border:1px solid var(--nexora-border,#dce2e8);border-radius:8px;padding:16px;margin-bottom:16px}
.nexora-agent-graph .nexora-graph-card legend{font-size:16px;width:auto;max-width:100%;padding:0 6px;overflow-wrap:anywhere}
.nexora-agent-graph .nexora-graph-card h3{font-size:15px}
.nexora-agent-graph .nexora-graph-order{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:6px}
.nexora-agent-graph .nexora-graph-order span{overflow-wrap:anywhere;min-width:0}
.nexora-agent-graph .form-control{max-width:100%}
.nexora-agent-graph #native-graph-selection .btn{white-space:normal;max-width:100%}
.nexora-agent-graph input[type=checkbox].form-control{width:auto;height:auto;display:inline-block}
.nexora-agent-graph .table-responsive:focus{outline:2px solid #2563eb;outline-offset:2px}
.nexora-agent-graph [dir=rtl],.nexora-agent-graph[dir=rtl]{text-align:right}
@media(max-width:480px){.nexora-agent-graph .panel-body{padding:12px}.nexora-agent-graph .nexora-graph-card{padding:10px}.nexora-agent-graph .btn{white-space:normal;max-width:100%}}

/* E1 shared CRM foundation. Native admin/client bodies only: external document
   previews, embedded forms and third-party editors keep their own layout. */
body:is(.admin,.customers) {
  --nx-control-border: #64748b;
  --nx-focus: #1d4ed8;
  --nx-space-control: 8px;
  --nx-font-ui: "Fira Sans", "Segoe UI", Tahoma, Arial, sans-serif;
  font-family: var(--nx-font-ui);
}
body:is(.admin,.customers) :is(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline: 3px solid var(--nx-focus);
  outline-offset: 3px;
}
body:is(.admin,.customers) :is(.panel-heading,.modal-title,.panel-title) {
  color: var(--nx-text);
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
body:is(.admin,.customers) :is(.panel-body,.modal-body,.tab-content) { min-width: 0; }
body:is(.admin,.customers) .form-control {
  color: var(--nx-text);
  background-color: var(--nx-surface);
  border-color: var(--nx-control-border);
  line-height: 1.5;
}
body:is(.admin,.customers) .form-control::placeholder { color: var(--nx-text-muted); opacity: 1; }
body:is(.admin,.customers) .form-control:focus { border-color: var(--nx-focus); }
body:is(.admin,.customers) :is(.form-control[disabled],.form-control[readonly]) {
  background-color: var(--nx-surface-2);
  color: var(--nx-text-muted);
}
body:is(.admin,.customers) .has-error .form-control,
body:is(.admin,.customers) .form-control[aria-invalid="true"] { border: 2px solid var(--nx-danger); }
body:is(.admin,.customers) :is(.has-error .help-block,label.error,p.text-danger) {
  color: #b91c1c;
  font-weight: 500;
  overflow-wrap: anywhere;
}
body:is(.admin,.customers) :is(.help-block,.text-muted) { color: var(--nx-text-muted); }
body:is(.admin,.customers) .table > thead > tr > th {
  font-family: var(--nx-font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .015em;
  text-transform: none;
  line-height: 1.5;
  color: var(--nx-text-muted);
}
body:is(.admin,.customers) .table > tbody > tr > td { line-height: 1.5; }
body:is(.admin,.customers) .table-responsive {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}
body:is(.admin,.customers) .modal-content { max-width: 100%; }
body:is(.admin,.customers) .modal-footer .btn { margin-block: 4px; }
body:is(.admin,.customers) :is(.breadcrumb,.nav-tabs) { overflow-wrap: anywhere; }
body:is(.admin,.customers)[dir="rtl"] :is(.table th,.table td,.form-group,.help-block) { text-align: start; }
body:is(.admin,.customers)[dir="rtl"] .input-group :is(input[type="email"],input[type="url"],input[type="tel"]) {
  direction: ltr;
  text-align: end;
}
@media (max-width:767px) {
  body:is(.admin,.customers) :is(.panel-body,.modal-body) { padding: 16px; }
  body:is(.admin,.customers) .modal-dialog { margin: 12px; }
  body:is(.admin,.customers) :is(.modal-footer,.panel-footer) .btn {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
    min-height: 36px;
  }
  body:is(.admin,.customers) :is(.form-inline .form-group,.bootstrap-select) { max-width: 100%; }
  body:is(.admin,.customers) input[type="file"] { max-width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  body:is(.admin,.customers) { scroll-behavior: auto; }
  body:is(.admin,.customers) *, body:is(.admin,.customers) *::before, body:is(.admin,.customers) *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}
@media print {
  body:is(.admin,.customers) { background: #fff; color: #000; }
  body:is(.admin,.customers) :is(.panel,.panel_s,.modal-content) { box-shadow: none; }
}

/* Permission-derived command navigation; native dialog owns modal focus. */
#nexora-command-palette { width: min(38rem, calc(100vw - 2rem)); max-height: 80vh; overflow: auto; border: 1px solid #cbd5e1; border-radius: 14px; padding: 20px; color: #0f172a; background: #fff; box-shadow: 0 20px 65px rgb(15 23 42 / 24%); }
#nexora-command-palette::backdrop { background: rgb(15 23 42 / 45%); }
.nexora-command-heading { display: flex; align-items: start; gap: 16px; justify-content: space-between; }
.nexora-command-heading h2 { font-size: 20px; margin: 0 0 18px; }
#nexora-command-results a { display: block; padding: 10px 12px; border-radius: 7px; color: #1e40af; overflow-wrap: anywhere; }
#nexora-command-results a:hover, #nexora-command-results a:focus-visible { background: #eff6ff; outline: 2px solid #2563eb; outline-offset: -2px; }
#header .nexora-command-trigger { align-self: center; margin-inline: 4px; padding: 7px 10px; flex-shrink: 0; }
/* Long workspace names must not push search and the mobile menu off tablet screens. */
body.admin #header #logo { max-width: clamp(120px, 23vw, 300px); }
body.admin #header .logo-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.admin #header nav > .tw-flex > .tw-flex,
body.admin #top_search { min-width: 0; }
body.admin #top_search input#search_input { max-width: 100%; }

.nexora-settings [hidden] { display: none !important; }

/* FullCalendar and client page actions must fit the narrowest supported viewport. */
@media (max-width: 480px) {
  body.customers .nx-page-header { flex-wrap: wrap; gap: 12px; clear: both; width: 100%; }
  body.customers .nx-page-header > div:first-child { flex: 1 0 100%; min-width: 0; }
  body.customers .nx-page-subtitle { max-width: none; }
  body.admin .fc .fc-header-toolbar, body.customers .fc .fc-header-toolbar { flex-wrap: wrap; gap: 10px; }
  body.admin .fc .fc-toolbar-chunk, body.customers .fc .fc-toolbar-chunk { max-width: 100%; }
  body.admin .fc .fc-toolbar-title, body.customers .fc .fc-toolbar-title { font-size: 20px; }
}
html[data-nexora-theme="dark"] body:is(.admin,.customers) .fc .fc-col-header-cell-cushion,
html[data-nexora-theme="dark"] body:is(.admin,.customers) .fc .fc-daygrid-day-number { color: #dbeafe; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) .fc td.fc-day-other { background: #172235; }

/* Shared authenticated-shell appearance. Preference is browser/user scoped;
   public documents and embedded provider frames do not receive this attribute. */
html[data-nexora-theme="light"] { color-scheme: light; }
html[data-nexora-theme="dark"] {
  color-scheme: dark;
  --nx-bg: #0f172a;
  --nx-surface: #172235;
  --nx-surface-2: #223047;
  --nx-border: #42536c;
  --nx-border-strong: #64748b;
  --nx-text: #f1f5f9;
  --nx-text-muted: #cbd5e1;
  --nx-text-subtle: #b6c3d5;
  --nx-neutral-50: #1b293e;
  --nx-neutral-100: #223047;
  --nx-neutral-200: #42536c;
  --nx-neutral-300: #64748b;
  --nx-neutral-400: #b6c3d5;
  --nx-neutral-500: #cbd5e1;
  --nx-neutral-600: #dbe4f0;
  --nx-neutral-700: #e2e8f0;
  --nx-neutral-800: #f1f5f9;
  --nx-neutral-900: #f8fafc;
  --nx-primary-50: #1d3553;
  --nx-primary-100: #264469;
  --nx-primary-200: #7193bd;
  --nx-success-bg: #143b31;
  --nx-warning-bg: #493718;
  --nx-danger-bg: #48242d;
  --nx-info-bg: #17384a;
}
.nexora-appearance { align-self: center; margin-inline: 5px; flex-shrink: 0; }
.nexora-appearance .form-control { width: 125px; height: 34px; padding: 5px 8px; font-size: 12px; }
.customers .navbar-header .nexora-appearance { display: inline-block; margin-block: 10px; vertical-align: middle; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) { --nx-control-border: #94a3b8; --nx-focus: #93c5fd; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(#header,.sidebar,.navbar-default,.panel_s>.panel-body,.panel-body,.modal-content,.dropdown-menu,.popover,.well,.list-group-item,.input-group-addon,.bootstrap-select>.dropdown-toggle,.dt-button,.btn-default,.btn-default:focus,.btn-default:hover) {
  color: var(--nx-text); background-color: var(--nx-surface); border-color: var(--nx-border);
}
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.panel-footer,.modal-header,.modal-footer,.popover-title,.table>thead>tr>th,.table-striped>tbody>tr:nth-of-type(odd),.table-hover>tbody>tr:hover) { background-color: var(--nx-surface-2); color: var(--nx-text); }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.table td,.table th,.nav-tabs,.nav-tabs>li>a,.list-group-item,hr) { border-color: var(--nx-border); }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(a:not(.btn):not(.label):not(.badge),.sidebar ul.nav li a,.navbar-default .navbar-nav>li>a,.dropdown-menu>li>a) { color: #93c5fd; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(a:not(.btn):hover,.sidebar ul.nav li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.nav-tabs>li.active>a,.pagination>li>a,.pagination>li>span) { color: #bfdbfe; background-color: var(--nx-surface-2); border-color: var(--nx-border); }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.text-danger,.has-error .help-block,label.error,p.text-danger) { color: #fca5a5 !important; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.text-success,.alert-success) { color: #86efac; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.text-warning,.alert-warning) { color: #fde68a; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) .alert-danger { color: #fecaca; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) .alert-info { color: #bae6fd; }
/* Native utility-based cards and labels share semantic colors. Do not invert
   images, charts, canvas, iframe content, or provider-specific color classes. */
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.tw-bg-white,.bg-white,.tw-bg-neutral-50,.tw-bg-neutral-100,.tw-bg-gray-50,.tw-bg-gray-100) { background-color: var(--nx-surface) !important; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.tw-text-neutral-900,.tw-text-neutral-800,.tw-text-neutral-700,.tw-text-gray-900,.tw-text-gray-800,.tw-text-gray-700) { color: var(--nx-text) !important; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.tw-text-neutral-600,.tw-text-neutral-500,.tw-text-neutral-400,.tw-text-gray-600,.tw-text-gray-500,.tw-text-gray-400) { color: var(--nx-text-muted) !important; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.tw-border-neutral-100,.tw-border-neutral-200,.tw-border-neutral-300,.tw-border-gray-200) { border-color: var(--nx-border) !important; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.close,.navbar-toggle .icon-bar) { color: var(--nx-text); opacity: 1; }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.datepickers-container,.xdsoft_datetimepicker,.xdsoft_calendar td,.xdsoft_calendar th,.xdsoft_time_box,.xdsoft_time,.xdsoft_label) { color: #0f172a; background-color: #fff; color-scheme: light; }
/* Rich text editors and external content use a deliberate light content island
   until their own skin can be switched without affecting authored documents. */
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.tox,.mce-container,.mce-panel,.fr-box,.CodeMirror) { color-scheme: light; --nx-text: #0f172a; --nx-text-muted: #475569; --nx-surface: #fff; }
html[data-nexora-theme="dark"] #nexora-command-palette { color: var(--nx-text); background: var(--nx-surface); border-color: var(--nx-border); }
html[data-nexora-theme="dark"] #nexora-command-results a { color: #93c5fd; }
html[data-nexora-theme="dark"] #nexora-command-results a:is(:hover,:focus-visible) { background: var(--nx-surface-2); outline-color: #93c5fd; }
html[data-nexora-theme="dark"] .modal-backdrop.in { background: #000; }
@media(max-width:767px) {
  .nexora-appearance { margin-inline: 3px; }
  .nexora-appearance .form-control { width: 94px; font-size: 11px; padding-inline: 4px; }
  .customers .navbar-header .nexora-appearance { float: none; }
}
@media print {
  html[data-nexora-theme] { color-scheme: light; --nx-bg: #fff; --nx-surface: #fff; --nx-surface-2: #fff; --nx-text: #000; --nx-text-muted: #333; --nx-border: #ccc; }
  .nexora-appearance { display: none !important; }
  html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.panel-body,.panel-footer,.table th,.table td,.tw-bg-white) { background: #fff !important; color: #000 !important; }
}
/* Native finance forms have additional outer, line-item and sticky surfaces. */
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.panel_s,.btn-bottom-toolbar,.table.items>tbody>tr>td,.table.items>tbody>tr.main>td,.table.items>tfoot>tr>td,.nexora-studio .nexora-wf-node,.nexora-batches .batch-shell,.nexora-batches .batch-card,.nexora-batches .batch-form,.nexora-batches .segment-panel) { background-color: var(--nx-surface); color: var(--nx-text); border-color: var(--nx-border); }
html[data-nexora-theme="dark"] body:is(.admin,.customers) :is(.bootstrap-select.disabled>.dropdown-toggle,.bootstrap-select>.dropdown-toggle.disabled,.bootstrap-select>.dropdown-toggle[disabled],.bootstrap-select.disabled .filter-option,.form-control[disabled],.form-control[readonly]) { color: var(--nx-text-muted) !important; background-color: var(--nx-surface-2) !important; opacity: 1; }
@media print { html[data-nexora-theme="dark"] body:is(.admin,.customers) .panel_s { background: #fff; color: #000; } }
/* Arabic joins letters; Latin eyebrow/tracking treatments break that rhythm. */
:is(html[lang^="ar"],body[dir="rtl"],[lang^="ar"]) :is(.nx-page-subtitle,.nx-eyebrow,[class*="tracking-"],.table>thead>tr>th,h1,h2,h3,h4,h5,h6) {
  letter-spacing: normal !important;
  text-transform: none !important;
}
/* Narrative Arabic text needs a proportional font with connected glyphs. */
:is(html[lang^="ar"],body[dir="rtl"],[lang^="ar"]) :is(.nx-page-subtitle,.nx-eyebrow) {
  font-family: inherit;
}
/* Bootstrap's fixed tablet container must fit the padded client content area. */
body.customers #content > .container {
  max-width: 100%;
}

/* Keep native Settings editors reachable before the long section index on phones. */
.nx-settings-navigation .nx-settings-nav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 16px;
  white-space: normal;
}
.nx-settings-navigation .nx-settings-nav-toggle[aria-expanded="true"] .fa-chevron-down {
  transform: rotate(180deg);
}
@media (min-width: 992px) {
  .nx-settings-navigation .nx-settings-nav-toggle { display: none; }
  .nx-settings-navigation #nx-settings-section-list { display: block; height: auto !important; }
}

#settings-form #cron_command code {
  display: inline-block;
  max-width: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  direction: ltr;
  unicode-bidi: isolate;
}

/* Reminder row actions must remain reachable when a keyboard user tabs to them. */
table.table-reminders tr:focus-within td .row-options { position: static; }

/* Keep native personal todo rows inside their panels in both directions. */
body.main-todo-page ul.todo li {
  margin-inline: 0;
}

/* OAuth callback URLs must wrap inside narrow Settings panels. */
#email_config .nexora-oauth-callback { overflow-wrap: anywhere; }

/* Settings & Integrations: shared route navigation, no form state changes. */
.nexora-settings-nav { margin-bottom: 20px; }
.nexora-settings-nav ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.nexora-settings-nav a { display: block; padding: 9px 13px; border: 1px solid #cbd5e1; border-radius: 6px; color: #334155; background: #fff; text-decoration: none; }
.nexora-settings-nav a:hover { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.nexora-settings-nav a[aria-current="page"] { color: #fff; background: #1d4ed8; border-color: #1d4ed8; font-weight: 600; }
.nexora-settings-nav a:focus-visible { outline: 3px solid #1d4ed8 !important; outline-offset: 3px !important; }
@media (max-width: 480px) { .nexora-settings-nav li { flex: 1 1 140px; } }

/* Keep Voice Settings section headings readable on the dark surface. */
html[data-nexora-theme="dark"] body.voice_settings #wrapper :is(h1,h2,h3,h4) { color: var(--nx-text); }

/* Conversation detail uses dark surfaces for transcript cards and active tabs. */
html[data-nexora-theme="dark"] body.elevenlabs.conversations .nexora-conversation-detail .nexora-transcript-entry { background: var(--nx-surface-2); color: var(--nx-text); }
html[data-nexora-theme="dark"] body.elevenlabs.conversations .nexora-conversation-detail :is(h1,h2,h3,h4) { color: var(--nx-text); }
html[data-nexora-theme="dark"] body.elevenlabs.conversations .nexora-conversation-detail .nav-tabs > li.active > a { color: var(--nx-text) !important; background: var(--nx-surface-2); }

/* Operations snapshot headings and cells must remain readable in dark theme. */
html[data-nexora-theme="dark"] body.voice_operations .nexora-operations :is(h1,h2,h3,h4,.table td) { color: var(--nx-text); }

/* Keep the tool drawer above the header and readable on dark surfaces. */
@media screen {
  .nexora-agent-editor:has(#tt2-drawer:not([hidden])) { z-index: 100; }
  html[data-nexora-theme="dark"] #tt2-drawer :is(.tt2-drawer-panel,.tt2-stats-chart-block,.tt2-side-deps a) { background: var(--nx-surface); }
  html[data-nexora-theme="dark"] #tt2-drawer :is(.tt2-drawer-header,.tt2-drawer-side,.tt2-drawer-id,.tt2-side-id-value) { background: var(--nx-surface-2); }
  html[data-nexora-theme="dark"] #tt2-drawer :is(.tt2-drawer-header,.tt2-drawer-side,.tt2-side-block,.tt2-stats-chart-block,.tt2-side-deps a) { border-color: var(--nx-border); }
  html[data-nexora-theme="dark"] #tt2-drawer :is(h4,h6,label,.tt2-side-usage-num) { color: var(--nx-text); }
  html[data-nexora-theme="dark"] #tt2-drawer :is(.tt2-drawer-subtitle,.tt2-drawer-id,.tt2-side-id-value,.tt2-stats-chart-label) { color: var(--nx-text-muted); }
}