/* ============================================
   BODYGUARD PANEL — COMPONENTS (Scoped)
   Cards, Tables, Forms, Buttons, Badges, Modals
   Scoped under .ds-v2 to avoid Bootstrap conflicts
   ============================================ */

/* --- Surface classes definition --- */
.ds-V2 .bg-primary {
  background-color: var(--surface-primary);
}

.ds-v2 .bg-secondary {
  background-color: var(--surface-secondary);
}

.ds-v2 .bg-primary\! {
  background-color: var(--surface-primary) !important;
}

.ds-v2 .bg-secondary\! {
  background-color: var(--surface-secondary) !important;
}

/* --- Hidden attribute must always win over display rules --- */
.ds-v2 [hidden] {
  display: none !important;
}

/* --- Cards --- */
.ds-v2 .card {
  position: relative;
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
}

.ds-v2 .card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-primary);
  background-color: var(--surface-elevated);
}

.ds-v2 .card-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-v2 .card-body {
  padding: var(--space-5);
}

.ds-v2 .card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-primary);
  background: var(--surface-secondary);
}

/* --- Buttons --- */
.ds-v2 .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  font-family: var(--font-sans);
}

.ds-v2 .btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--brand-200);
}

.ds-v2 .btn-primary {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
}

.ds-v2 .btn-primary > p {
  color: inherit;
}

.ds-v2 .btn-primary:disabled {
  background-color: var(--surface-elevated);
  border-color: transparent;
  color: oklch(from var(--text-primary) l c h / .5);
  cursor: not-allowed;
  box-shadow: none;
}

.ds-v2 .btn-primary:disabled:hover {
  background-color: var(--surface-elevated);
  border-color: transparent;
  box-shadow: none;
}

.ds-v2 .btn-primary:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

.ds-v2 .btn-secondary {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}

.ds-v2 .btn-danger {
  background: var(--error);
  color: white;
  border-color: var(--error);
}

.ds-v2 .btn-danger:hover {
  background: #DC2626;
  border-color: #DC2626;
}

.ds-v2 .btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}

.ds-v2 .btn-ghost:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.ds-v2 .btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.ds-v2 .btn-lg {
  padding: var(--space-3) var(--space-6);
  font-size: var(--text-base);
}

/* --- Forms --- */
.ds-v2 .form-group {
  margin-bottom: var(--space-4);
}

.ds-v2 .form-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--space-1-5);
}

.ds-v2 .form-input,
.ds-v2 .form-select,
.ds-v2 .form-textarea {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: var(--leading-normal);
  font-family: var(--font-sans);
}

.ds-v2 .form-select {
  padding-right: var(--space-8);
}

.ds-v2 .form-input:focus,
.ds-v2 .form-select:focus,
.ds-v2 .form-textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .form-input::placeholder,
.ds-v2 .form-textarea::placeholder {
  color: var(--text-tertiary);
}

.ds-v2 .form-input-icon {
  position: relative;
}

.ds-v2 .form-input-icon .form-input {
  padding-left: 38px;
}

.ds-v2 .form-input-icon .icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  font-size: 18px;
  pointer-events: none;
}

.ds-v2 .form-hint {
  font-size: var(--text-sm);
  color: var(--text-tertiary);
  margin-top: var(--space-1);
}

/* --- Alerts --- */
.ds-v2 .alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.ds-v2 .alert-error {
  background: var(--error-light);
  color: #991B1B;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.ds-v2 .alert-success {
  background: var(--success-light);
  color: #065F46;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.ds-v2 .alert-warning {
  background: var(--warning-light);
  color: #92400E;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.ds-v2 .alert-info {
  background: var(--info-light);
  color: #1E40AF;
  border: 1px solid rgba(59, 130, 246, 0.2);
}

.ds-v2 .alert-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Dark mode: the base rules hardcode dark text (#1E40AF, #991B1B, …) which is unreadable on the
   dark-tinted translucent backgrounds. Restore contrast with light text + a stronger tint.
   NB: data-theme + .ds-v2 are both on <html>, so the selector must be the COMPOUND
   `.ds-v2[data-theme="dark"]` — a descendant form (`[data-theme="dark"] .ds-v2`) never matches. */
.ds-v2[data-theme="dark"] .alert-error {
  background: rgba(239, 68, 68, 0.18);
  color: #FCA5A5;
  border-color: rgba(239, 68, 68, 0.4);
}
.ds-v2[data-theme="dark"] .alert-success {
  background: rgba(16, 185, 129, 0.18);
  color: #6EE7B7;
  border-color: rgba(16, 185, 129, 0.4);
}
.ds-v2[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.18);
  color: #FCD34D;
  border-color: rgba(245, 158, 11, 0.4);
}
.ds-v2[data-theme="dark"] .alert-info {
  background: rgba(59, 130, 246, 0.18);
  color: #93C5FD;
  border-color: rgba(59, 130, 246, 0.4);
}
.ds-v2[data-theme="dark"] .alert a { color: inherit; text-decoration: underline; }

/* --- Badges --- */
.ds-v2 .badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  white-space: nowrap;
}

.ds-v2 .badge-primary {
  background: var(--info-light);
  color: var(--brand-600);
}

.ds-v2 .badge-success {
  background: var(--success-light);
  color: #059669;
}

.ds-v2 .badge-warning {
  background: var(--warning-light);
  color: #D97706;
}

.ds-v2 .badge-danger {
  background: var(--error-light);
  color: #DC2626;
}

/* --- Modals --- */
.ds-v2 .modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--surface-overlay);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-base), visibility var(--transition-base);
}

.ds-v2 .modal-overlay.open {
  opacity: 1;
  visibility: visible;
}

.ds-v2 .modal {
  background: var(--surface-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: min(700px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
  transform: translateY(8px) scale(0.98);
  transition: transform var(--transition-base);
}

.ds-v2 .modal-overlay.open .modal {
  transform: translateY(0) scale(1);
}

/* --- Toast Notifications ---
 * Toasts must always sit ABOVE every modal/drawer/popup in the app so users
 * get success/error feedback even when a popup is open. The Try-Text popup
 * sits at z-index 1500 and the chat drawer at 1800, so we use a high
 * out-of-band value here (9999) rather than `--z-tooltip` (100).
 */
.toast-container {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: 9999;
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  max-height: 100vh;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  animation: toast-in 0.3s ease;
  min-width: 300px;
  max-width: 420px;
  pointer-events: auto;
  opacity: 1;
}

.toast-icon {
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast-body {
  flex: 1;
  min-width: 0;
}

.toast-title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  line-height: var(--leading-tight);
  margin-bottom: 2px;
}

.toast-text {
  color: var(--text-secondary);
  line-height: var(--leading-normal);
  word-break: break-word;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  margin-left: var(--space-2);
  transition: color var(--transition-fast);
}

.toast-close:hover {
  color: var(--text-primary);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.toast-success { border-left: 3px solid var(--success); }
.toast-error { border-left: 3px solid var(--error); }
.toast-info { border-left: 3px solid var(--info); }

/* --- Tooltips (global, safe) --- */
[data-tooltip] {
  position: relative;
}

[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray-800);
  color: var(--text-inverse);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  white-space: nowrap;
  z-index: var(--z-tooltip);
  pointer-events: none;
  animation: tooltip-in 0.15s ease;
}

@keyframes tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* Dark mode: gray scale inverts, so use a light tooltip with dark text */
[data-theme="dark"] [data-tooltip]:hover::after {
  background: var(--gray-800);
  color: var(--gray-50);
}

/* Tooltips inside the header should appear below, not above */
.app-header [data-tooltip]:hover::after {
  bottom: auto;
  top: calc(100% + 6px);
  animation: tooltip-in-below 0.15s ease;
}

@keyframes tooltip-in-below {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* --- Tables --- */
.ds-v2 table,
.ds-v2 .table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface-primary);
  border-radius: var(--radius-md);
}

.ds-v2 table th,
.ds-v2 table td {
  padding: var(--space-2-5) var(--space-3);
  text-align: left;
  vertical-align: middle;
  color: var(--text-primary);
}

.ds-v2 table thead th {
  font-weight: var(--weight-semibold);
  background: var(--surface-secondary) !important;
  color: var(--text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--border-primary);
}

.ds-v2 table tbody td {
  border-bottom: 1px solid var(--border-primary);
}

.ds-v2 .table-bordered,
.ds-v2 .table-bordered th,
.ds-v2 .table-bordered td {
  border: 1px solid var(--border-primary);
}

.ds-v2 .table-striped tbody tr:nth-child(even) {
  background: var(--surface-secondary);
}

.ds-v2 table tbody tr:hover {
  background: var(--gray-50);
}

/* --- Words dictionary flex display in rule editor ---*/
.ds-v2 table tbody tr[type='Alternative'] > td:nth-of-type(2),
.ds-v2 table tbody tr[type='Synonym'] > td:nth-of-type(2) {
  white-space: normal !important;
}

/* --- Simple Grid (Bootstrap compat for JS-created elements) --- */
.ds-v2 .row {
  margin-bottom: var(--space-5);
}

.ds-v2 .col {
  width: 100%;
}

.ds-v2 .mb-0 {
  margin-bottom: 0 !important;
}

.ds-v2 .mb-3 {
  margin-bottom: var(--space-3) !important;
}

/* Bootstrap column grid (used by JS-created filter sections) */
.ds-v2 .card-body > .row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-bottom: var(--space-4);
}

/* Strip mb-3 inside filter rows to prevent misalignment */
.ds-v2 .card-body > .row .mb-3 {
  margin-bottom: 0 !important;
}

.ds-v2 .col-lg-1 { flex: 0 0 auto; min-width: 60px; }
.ds-v2 .col-lg-2 { flex: 0 0 auto; min-width: 120px; }
.ds-v2 .col-lg-3 { flex: 1 1 160px; min-width: 120px; }
.ds-v2 .col-lg-4 { flex: 1 1 220px; min-width: 180px; }
.ds-v2 .col-lg-6 { flex: 0 0 auto; }
.ds-v2 .col-lg-12 { flex: 0 0 100%; }

/* Exact search toggle (pill style) */
.ds-v2 .col-lg-1 {
  display: flex;
  align-items: center;
}

.ds-v2 .col-lg-1 label[for="words-dictionary-exact-word"] {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  user-select: none;
}

.ds-v2 .col-lg-1 input[name="words-dictionary-exact-word"] {
  display: none;
}

.ds-v2 .col-lg-1 input[name="words-dictionary-exact-word"]:checked + label[for="words-dictionary-exact-word"] {
  background: var(--brand-500);
  border-color: var(--brand-500);
  color: white;
}

/* Bootstrap form-control (used by JS-created inputs/selects) */
.ds-v2 .form-control {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.ds-v2 .form-control:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .form-control::placeholder {
  color: var(--text-tertiary);
}

.ds-v2 select.form-control {
  padding-right: var(--space-8);
}

/* Bootstrap input-group (used by JS-created add-word forms) */
.ds-v2 .input-group {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}

.ds-v2 .input-group .form-control {
  flex: 1;
  min-width: 0;
}

/* Bootstrap btn-success (used by JS-created add buttons) */
.ds-v2 .btn-success,
.ds-v2 input.btn-success {
  background: var(--success) !important;
  color: white !important;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ds-v2 .btn-success:hover,
.ds-v2 input.btn-success:hover {
  background: #059669 !important;
  box-shadow: var(--shadow-sm);
}

/* Words dictionary dark-mode overrides */
.ds-v2 .word {
  color: var(--text-primary);
}

.ds-v2 .rules-engines-update-word-popup-content {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}

.ds-v2 .rules-engines-update-word-popup {
  background-color: var(--surface-overlay);
}

.ds-v2 .generate-with-llm-button {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border-primary) !important;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
}

.ds-v2 .generate-with-llm-button:hover {
  background: var(--gray-100) !important;
}

/* Spinner animation for LLM generate button */
@keyframes generate-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.generate-spin {
  animation: generate-spin 1s linear infinite;
}

.ds-v2 #edit-languages-section {
  background-color: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
}

.ds-v2 #word-title {
  color: var(--text-primary);
}

.ds-v2 .action {
  color: var(--brand-500);
}

/* --- Words list page — filter panel --- */
.ds-v2 .wl-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
}

.ds-v2 .wl-filters-group {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3) var(--space-4);
}

.ds-v2 .wl-filters-group-title {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: var(--space-3);
}

.ds-v2 .wl-filters-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}

.ds-v2 .wl-field {
  display: flex;
  flex-direction: column;
}

.ds-v2 .wl-field .form-label {
  margin-bottom: var(--space-1);
}

.ds-v2 .wl-field-wide {
  grid-column: span 2;
}

/* --- Words list page — toolbar --- */
.ds-v2 .wl-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--border-primary);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.ds-v2 .wl-toolbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.ds-v2 .wl-toolbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.ds-v2 .wl-pagination {
  display: flex;
  gap: var(--space-2);
}

.ds-v2 .wl-page-info {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-family: var(--font-mono);
  color: var(--text-secondary);
}

.ds-v2 .wl-select-all {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-v2 .wl-select-all .form-label {
  margin-bottom: 0;
  cursor: pointer;
}

.ds-v2 .wl-select-all input[type="checkbox"] {
  accent-color: var(--brand-500);
}

/* --- Test Dataset Cards List --- */
.ds-v2 .td-cards-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* Select toggle in card footer — pill style */
.ds-v2 .td-select-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  cursor: pointer;
  user-select: none;
}

.ds-v2 .td-select-toggle input {
  display: none;
}

.ds-v2 .td-select-toggle span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--radius-md);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  border: 1px solid var(--border-primary);
  transition: all var(--transition-fast);
}

.ds-v2 .td-select-toggle span::before {
  content: '';
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  border: 2px solid var(--border-primary);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}

.ds-v2 .td-select-toggle:hover span {
  border-color: var(--brand-400);
  color: var(--text-secondary);
}

.ds-v2 .td-select-toggle input:checked + span {
  background: rgba(59, 130, 246, 0.08);
  border-color: var(--brand-500);
  color: var(--brand-600);
}

.ds-v2 .td-select-toggle input:checked + span::before {
  background: var(--brand-500);
  border-color: var(--brand-500);
  box-shadow: inset 0 0 0 2px white;
}

/* --- Test Dataset Cards dark mode --- */
.ds-v2 .td-card {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

[data-theme="dark"] .ds-v2 .td-card {
  background: var(--surface-elevated);
}

.ds-v2 .td-card:hover {
  border-color: var(--gray-300);
  box-shadow: var(--shadow-sm);
}

.ds-v2 .td-card-text {
  color: var(--text-primary);
}

.ds-v2 .td-card-footer {
  background: var(--surface-secondary);
  border-top-color: var(--border-primary);
}

.ds-v2 .td-card .td-action-btn {
  color: var(--text-secondary);
}

.ds-v2 .td-card .td-action-btn:hover {
  background: var(--gray-100);
  color: var(--text-primary);
}

.ds-v2 .td-tag--language {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

[data-theme="dark"] .ds-v2 .td-tag--type-toxic {
  background: rgba(239, 68, 68, 0.2);
  color: #FCA5A5;
}

[data-theme="dark"] .ds-v2 .td-tag--type-neutral {
  background: rgba(16, 185, 129, 0.2);
  color: #6EE7B7;
}

[data-theme="dark"] .ds-v2 .td-tag--severity {
  background: rgba(245, 158, 11, 0.2);
  color: #FCD34D;
}

[data-theme="dark"] .ds-v2 .td-tag--classification {
  background: rgba(59, 130, 246, 0.2);
  color: #93C5FD;
}

[data-theme="dark"] .ds-v2 .td-tag--directed-at {
  background: rgba(139, 92, 246, 0.2);
  color: #C4B5FD;
}

[data-theme="dark"] .ds-v2 .td-tag--meta {
  background: var(--surface-secondary);
  color: var(--text-secondary);
}

.ds-v2 .td-meta {
  color: var(--text-tertiary);
}

.ds-v2 .td-meta-separator {
  background: var(--border-primary);
}

.ds-v2 .td-diff-arrow {
  color: var(--text-tertiary);
}

.ds-v2 .td-confirm-btn--no {
  background: var(--gray-200);
  color: var(--text-secondary);
}

.ds-v2 .td-confirm-btn--no:hover {
  background: var(--gray-300);
}

.ds-v2 .td-inline-confirm span {
  color: #991B1B;
}

.ds-v2 .td-mandatory-toggle span {
  color: var(--text-secondary);
}

.ds-v2 .td-json-modal {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.ds-v2 .rules-engines-show-json-popup {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-v2 .rules-engines-show-json-popup-content {
  position: relative;
  top: auto;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: min(1100px, 92vw);
  max-height: 90vh;
  min-height: auto;
  overflow-y: auto;
  padding: var(--space-5);
}

.ds-v2 .td-json-overlay {
  background: var(--surface-overlay);
}

.ds-v2 .td-enrichment {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .td-enrichment-title {
  color: var(--text-secondary);
}

.ds-v2 .td-enrichment-label {
  color: var(--text-secondary);
}

.ds-v2 .td-enrichment-close {
  color: var(--text-secondary);
}

.ds-v2 .td-enrichment-close:hover {
  background: var(--gray-100);
}

.ds-v2 .td-enrichment-chip {
  background: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 .td-enrichment-chip:hover {
  background: var(--gray-100);
}

.ds-v2 .td-enrichment-code {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .td-enrichment-code:hover {
  background: var(--gray-200);
}

.ds-v2 .td-enrichment-comment {
  background: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 .td-enrichment-comment:hover {
  background: var(--surface-secondary);
}

.ds-v2 .td-migrate-form input,
.ds-v2 .td-migrate-form select {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

/* --- Update Test Dataset Popup — redesigned --- */
.ds-v2 .rules-engines-update-test-dataset-popup {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(4px);
}

.ds-v2 .rules-engines-update-test-dataset-popup-content {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-6);
  color: var(--text-primary);
  width: min(800px, 90vw);
  max-height: 90vh;
}

.ds-v2 #update-test-dataset-form h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-primary);
}

.ds-v2 #update-test-dataset-form label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  margin-top: var(--space-3);
  margin-bottom: var(--space-1);
}

.ds-v2 #update-test-dataset-form select,
.ds-v2 #update-test-dataset-form input[type="text"],
.ds-v2 #update-test-dataset-form input[type="number"] {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  margin-bottom: var(--space-2);
}

.ds-v2 #update-test-dataset-form select:focus,
.ds-v2 #update-test-dataset-form input:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 #update-test-dataset-form select[multiple] {
  height: 120px;
}

/* --- Choices.js overrides for dark mode --- */
.ds-v2 .choices__inner {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .is-focused .choices__inner,
.ds-v2 .is-open .choices__inner {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .choices__input {
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

.ds-v2 .choices[data-type*=select-one] .choices__input {
  background-color: var(--surface-secondary);
  border-bottom-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .choices__list--dropdown {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  word-break: normal;
  overflow-wrap: break-word;
  min-width: 100%;
  width: max-content;
  max-width: min(500px, 90vw);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.ds-v2 .is-open .choices__list--dropdown {
  border-color: var(--border-primary);
}

.ds-v2 .choices__list--dropdown .choices__item {
  color: var(--text-primary);
  padding-right: var(--space-3);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
}

.ds-v2 .choices__list--dropdown .choices__item--selectable::after {
  display: none;
}

.ds-v2 .choices__list--dropdown .choices__item--selectable.is-highlighted {
   background-color: var(--gray-200);
  color: var(--text-primary);
}

.ds-v2 .choices__list--multiple .choices__item {
  background-color: var(--brand-500);
  border-color: var(--brand-600);
  color: white;
  border-radius: var(--radius-full);
}

.ds-v2 .choices__list--multiple .choices__item.is-highlighted {
  background-color: var(--brand-600);
  border-color: var(--brand-700);
}

.ds-v2 .choices__list--single .choices__item {
  color: var(--text-primary);
}

.ds-v2 .choices__heading {
  border-bottom-color: var(--border-primary);
  color: var(--text-tertiary);
}

.ds-v2 .choices__placeholder {
  color: var(--text-tertiary);
}

.ds-v2 .choices[data-type*=select-one]:after {
  border-color: var(--text-secondary) transparent transparent;
}

.ds-v2 .choices[data-type*=select-one].is-open:after {
  border-color: transparent transparent var(--text-secondary);
}

.ds-v2 .choices[data-type*=select-multiple] .choices__button {
  border-left: none;
  background-repeat: no-repeat;
  vertical-align: middle;
}

/* --- Branch merge popup — full redesign --- */
.ds-v2 .rules-engines-branch-verify-popup {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-v2 .rules-engines-branch-verify-popup-content {
  position: fixed;
  top: calc(100vmin / 6);
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: min(1200px, 92vw);
  max-height: calc((100vmin / 6) * 4);
  overflow-y: auto;
  min-height: auto;
}

/* Title bar */
.ds-v2 .rules-engines-branch-verify-popup-content > h2 {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  color: var(--text-primary);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  box-shadow: none;
}

.ds-v2 .rules-engines-branch-verify-popup-content > h2 #step_number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-500);
  color: white;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  min-width: 24px;
}

.ds-v2 .rules-engines-branch-verify-popup-content > h2 #step_name {
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

/* Progress bar */
.ds-v2 .rules-engines-branch-verify-popup-content .progress {
  height: 20px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: none;
  margin: var(--space-3) var(--space-2) var(--space-2);
}

.ds-v2 .rules-engines-branch-verify-popup-content .progress-bar {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: width 0.4s ease;
}

.ds-v2 .rules-engines-branch-verify-popup-content .progress-bar-info {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  box-shadow: none;
}

/* Action buttons */
.ds-v2 .rules-engines-branch-verify-popup-content button[type="NEXT_STEP_BUTTON"],
.ds-v2 .rules-engines-branch-verify-popup-content button[type="LAUNCH_STEP_BUTTON"] {
  background: var(--brand-500) !important;
  border: none !important;
  color: white;
  padding: var(--space-2) var(--space-5);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  margin: 0 var(--space-5) var(--space-2);
  box-shadow: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.ds-v2 .rules-engines-branch-verify-popup-content button[type="NEXT_STEP_BUTTON"]:hover,
.ds-v2 .rules-engines-branch-verify-popup-content button[type="LAUNCH_STEP_BUTTON"]:hover {
  background: var(--brand-600) !important;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules-engines-branch-verify-popup-content button[type="ELEMENT_SAVE_BUTTON"] {
  background: var(--success) !important;
  border: none !important;
  color: white;
  padding: var(--space-2) var(--space-5);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  margin: 0 var(--space-5) var(--space-2);
  box-shadow: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.ds-v2 .rules-engines-branch-verify-popup-content button[type="ELEMENT_SAVE_BUTTON"]:hover {
  background: #059669 !important;
  transform: none;
  box-shadow: var(--shadow-sm);
}

/* Status */
.ds-v2 .rules-engines-branch-verify-popup-content #verify-status {
  margin: 0 var(--space-5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Details area */
.ds-v2 .rules-engines-branch-verify-popup-content #verify-details {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
}

.ds-v2 .rules-engines-branch-verify-popup-content #verify-details h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* Language + differences filters inside popup */
.ds-v2 .tests_datasets_language_filter_select,
.ds-v2 .tests_datasets_differences_filter_select {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  margin: var(--space-2) var(--space-5);
}

/* Laboratory task status inside popup */
.ds-v2 .laboratory-task-status {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  margin: 0 var(--space-2) var(--space-2);
  width: calc(100% - var(--space-2) * 2);
  box-sizing: border-box;
}

.ds-v2 .laboratory-task-status .status-item {
  background: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 .laboratory-task-status .status-label {
  color: var(--text-tertiary);
}

.ds-v2 .laboratory-task-status .status-item b {
  color: var(--text-primary);
}

.ds-v2 .laboratory-task-status .status-separator {
  background: var(--border-primary);
}

.ds-v2 .laboratory-task-status .status-success {
  background: var(--success-light);
  border-color: var(--success);
}

.ds-v2 .laboratory-task-status .status-success .status-label,
.ds-v2 .laboratory-task-status .status-success b {
  color: #059669;
}

.ds-v2 .laboratory-task-status .status-error {
  background: var(--error-light);
  border-color: var(--error);
}

.ds-v2 .laboratory-task-status .status-error .status-label,
.ds-v2 .laboratory-task-status .status-error b {
  color: #DC2626;
}

.ds-v2 .laboratory-task-status .status-crashed {
  background: var(--warning-light);
  border-color: var(--warning);
}

.ds-v2 .laboratory-task-status .status-crashed .status-label,
.ds-v2 .laboratory-task-status .status-crashed b {
  color: #D97706;
}

.ds-v2 #update-test-dataset-form .test-text-display {
  background-color: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  color: var(--text-primary);
  min-height: 80px;
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
}

.ds-v2 #update-test-dataset-form .batch-update-note {
  background-color: var(--warning-light);
  color: #92400E;
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--warning);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
}

.ds-v2 #update-test-dataset-form .form-buttons {
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-primary);
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.ds-v2 #update-test-dataset-form .form-buttons button,
.ds-v2 #update-test-dataset-form .form-buttons input[type="button"],
.ds-v2 #update-test-dataset-form .form-buttons input[type="submit"] {
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.ds-v2 #update-test-dataset-form .form-check {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

.ds-v2 #update-test-dataset-form .form-check input[type="checkbox"] {
  accent-color: var(--brand-500);
  width: 16px;
  height: 16px;
}

.ds-v2 #update-test-dataset-form .form-check label {
  margin: 0;
  font-weight: var(--weight-normal);
}


.ds-v2 .nppw-container {
  background-color: var(--surface-secondary);
  border-color: var(--border-primary);
}

.ds-v2 .nppw-entry {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 .nppw-entry-variant {
  color: var(--text-primary);
}

.ds-v2 input[name="child-word"] {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

@media (max-width: 768px) {
  .ds-v2 .card-body > .row {
    flex-direction: column;
  }
}

/* --- Editor/List page overrides for ds-v2 --- */
.ds-v2 .popup-content {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.ds-v2 .popup-header h3 {
  color: var(--text-primary);
}

.ds-v2 .uuid-selector-popup {
  background-color: var(--surface-overlay);
}

.ds-v2 form.add_list_item_form > input[type="text"],
.ds-v2 .uuid-selector,
.ds-v2 .popup-content > .uuid-selector {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.ds-v2 form.add_list_item_form > input[type="text"]:focus,
.ds-v2 .uuid-selector:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 form[name="add_new_list_element"] select {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
}

.ds-v2 form[name="add_new_list_element"] input[type="submit"] {
  background: var(--brand-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-4);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.ds-v2 form[name="add_new_list_element"] input[type="submit"]:hover {
  background: var(--brand-600);
}

/* --- Add Tag (inline per-row) --- */
.ds-v2 .add-tag-wrapper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-v2 .add-tag-select {
  flex: 1;
  min-width: 0;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  transition: border-color var(--transition-fast);
}

.ds-v2 .add-tag-select:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .add-tag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--brand-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  font-size: 18px;
}

.ds-v2 .add-tag-btn:hover {
  background: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

/* --- Organization Add Form (top of section) --- */
.ds-v2 .add-org-form {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) 0;
}

.ds-v2 .add-org-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  background: var(--brand-500);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-1-5) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ds-v2 .add-org-btn:hover {
  background: var(--brand-600);
  box-shadow: var(--shadow-sm);
}

.ds-v2 .add-org-btn .material-symbols-outlined {
  font-size: 18px;
}

.ds-v2 .td-add-tag {
  min-width: 180px;
}

/* --- Language Tabs (special lists) --- */
.ds-v2 #rules-engines-lists-language-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-top: var(--space-3);
  padding: 3px;
  background: var(--surface-secondary);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-primary);
}

.ds-v2 .rules-engines-lists-language-tab-button,
.ds-v2 .rules-engines-lists-language-tab-button-selected {
  padding: var(--space-1-5) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ds-v2 .rules-engines-lists-language-tab-button {
  background: transparent;
  color: var(--text-secondary);
}

.ds-v2 .rules-engines-lists-language-tab-button:hover {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.ds-v2 .rules-engines-lists-language-tab-button-selected {
  background: var(--surface-primary);
  color: var(--brand-500);
  box-shadow: var(--shadow-xs);
  font-weight: var(--weight-semibold);
}

/* --- Inline edit input (list cells) --- */
.ds-v2 table td input[type="text"] {
  width: 100%;
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--brand-500);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  background: var(--surface-primary);
  color: var(--text-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
  outline: none;
}

.ds-v2 table td select {
  padding: var(--space-1-5) var(--space-2);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  background-color: var(--surface-primary);
  color: var(--text-primary);
}

/* --- Editable cell hover (dark-mode safe) --- */
.ds-v2 .cell-editable-hover {
  background-color: var(--gray-100) !important;
}

/* --- Button background overrides (reset sets background:none on all buttons) --- */
.ds-v2 .remove_item_button {
  background-color: var(--error) !important;
  color: white;
}

.ds-v2 .remove_item_button:hover {
  background-color: #DC2626 !important;
}

.ds-v2 .reset_item_values_button {
  background-color: var(--warning) !important;
  color: white;
}

.ds-v2 .reset_item_values_button:hover {
  background-color: #D97706 !important;
}

.ds-v2 .add_list_item_form_submit {
  background-color: var(--success) !important;
  color: white;
}

.ds-v2 .add_list_item_form_submit:hover {
  background-color: #059669 !important;
}

/* --- Chat FAB override (reset strips background) --- */
.ds-v2 .chat-fab {
  background: var(--brand-500) !important;
  color: white;
}

.ds-v2 .chat-fab:hover {
  background: var(--brand-600) !important;
}

.ds-v2 .chat-fab.active {
  background: var(--text-secondary) !important;
}

/* --- Pre Processing page --- */
.ds-v2 .pp-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
}

.ds-v2 .pp-form-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ds-v2 .pp-form-grid .form-group {
  margin-bottom: 0;
}

.ds-v2 .pp-add-form {
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
  margin-bottom: var(--space-4);
}

.ds-v2 .pp-form-actions {
  display: flex;
  gap: var(--space-3);
}

.ds-v2 .pp-table-wrapper {
  overflow-x: auto;
  margin-top: var(--space-4);
}

.ds-v2 .pp-status-row {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-3) 0;
}

.ds-v2 .pp-status-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-v2 .pp-status-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.ds-v2 .pp-status-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.ds-v2 .pp-json-result {
  max-height: 400px;
  overflow: auto;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.ds-v2 .pp-add-test-btn {
  margin-top: var(--space-2);
}

/* Inline "Update" link on hover */
.ds-v2 td[can_be_updated="true"] {
  cursor: pointer;
}

.ds-v2 td[can_be_updated="true"] div {
  display: inline-block;
}

.ds-v2 td[can_be_updated="true"] span[column] {
  display: none;
  color: var(--brand-500);
  margin-left: var(--space-2);
  cursor: pointer;
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
}

.ds-v2 td[can_be_updated="true"]:hover span[column] {
  display: inline-block;
}

.ds-v2 td[can_be_updated="true"] span[column]:hover {
  text-decoration: underline;
  color: var(--brand-600);
}

@media (max-width: 768px) {
  .ds-v2 .pp-form-grid,
  .ds-v2 .pp-form-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --- Logs page filters --- */
.ds-v2 .logs-filters {
  display: flex;
  gap: var(--space-4);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-primary);
}

.ds-v2 .logs-filters .form-group {
  margin-bottom: 0;
  min-width: 180px;
}

/* --- DataTables overrides for ds-v2 --- */
.ds-v2 .dataTables_wrapper {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-primary);
}

.ds-v2 .dataTables_wrapper .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.ds-v2 .dataTables_wrapper .col-lg-6 {
  flex: 0 0 auto;
}

.ds-v2 .dataTables_wrapper label {
  color: var(--text-secondary);
  font-size: var(--text-sm);
}

.ds-v2 .dataTables_wrapper select,
.ds-v2 .dataTables_wrapper input[type="search"],
.ds-v2 .dataTables_wrapper .form-control {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: var(--space-1-5) var(--space-2-5);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.ds-v2 .dataTables_wrapper select:focus,
.ds-v2 .dataTables_wrapper input[type="search"]:focus,
.ds-v2 .dataTables_wrapper .form-control:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .dataTables_wrapper .dataTables_info {
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  padding: var(--space-3) 0;
}

.ds-v2 .dataTables_wrapper .dataTables_paginate {
  padding: var(--space-3) 0;
  display: flex;
  gap: var(--space-1);
}

.ds-v2 .dataTables_wrapper .dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  border: 1px solid var(--border-primary) !important;
  border-radius: var(--radius-md);
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.ds-v2 .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: var(--gray-100) !important;
  border-color: var(--gray-300) !important;
}

.ds-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--brand-500) !important;
  border-color: var(--brand-500) !important;
  color: white !important;
}

.ds-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
  opacity: 0.4;
  cursor: default;
}

.ds-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--surface-primary) !important;
  border-color: var(--border-primary) !important;
}

.ds-v2 .dataTables_wrapper .dataTables_empty {
  color: var(--text-tertiary);
  text-align: center;
  padding: var(--space-8) !important;
}

.ds-v2 .dataTables_wrapper .table-responsive {
  overflow-x: auto;
}

@media (max-width: 768px) {
  .ds-v2 .logs-filters {
    flex-direction: column;
  }
}

/* --- Feedbacks page --- */
.ds-v2 .fb-view-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--space-4);
}

.ds-v2 .fb-view-actions {
  display: flex;
  align-items: center;
}

.ds-v2 .fb-view-form {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-v2 .fb-view-form .form-control {
  min-width: 180px;
}

/* col-lg-3 for feedbacks filter grid */
.ds-v2 .col-lg-3 {
  flex: 1 1 200px;
  min-width: 160px;
}

/* Feedbacks table dark mode overrides */
.ds-v2 #feedbacks-list,
.ds-v2 #similar-feedbacks-list {
  background: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 #feedbacks-list thead th,
.ds-v2 #similar-feedbacks-list thead th {
  background-color: var(--surface-secondary) !important;
  color: var(--text-secondary);
  border-bottom-color: var(--border-primary);
  border-right-color: var(--border-primary);
}

.ds-v2 #feedbacks-list thead th:hover {
  background-color: var(--gray-100) !important;
}

.ds-v2 #feedbacks-list td,
.ds-v2 #similar-feedbacks-list td {
  border-bottom-color: var(--border-primary);
  border-right-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 #feedbacks-list tr:hover td,
.ds-v2 #similar-feedbacks-list tr:hover td {
  background-color: var(--gray-100);
}

.ds-v2 #feedbacks-list select,
.ds-v2 #feedbacks-list textarea {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.ds-v2 #feedbacks-list select:focus,
.ds-v2 #feedbacks-list textarea:focus {
  outline: none;
  border-color: var(--brand-500);
}

/* --- Customer Rules List --- */
.ds-v2 .cr-org-section {
  margin-bottom: var(--space-5);
}

.ds-v2 .cr-org-section:last-child {
  margin-bottom: 0;
}

.ds-v2 .cr-org-name {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-primary);
}

.ds-v2 .cr-rules-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ds-v2 .cr-rule-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  text-decoration: none;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.ds-v2 .cr-rule-item:hover {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .cr-rule-item .material-symbols-outlined:first-child {
  color: var(--brand-500);
}

.ds-v2 .cr-rule-arrow {
  margin-left: auto;
  color: var(--text-tertiary);
}

.ds-v2 .cr-rule-item:hover .cr-rule-arrow {
  color: var(--brand-500);
}

/* --- Customer Text Converter --- */
.ds-v2 .ct-status-section {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.ds-v2 .ct-status-row {
  display: flex;
  gap: var(--space-6);
}

.ds-v2 .ct-status-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.ds-v2 .ct-status-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}

.ds-v2 .ct-status-value {
  font-size: var(--text-sm);
  color: var(--text-primary);
  font-family: var(--font-mono);
}

.ds-v2 .ct-preprocessed {
  display: flex;
  flex-direction: column;
  gap: var(--space-1-5);
}

.ds-v2 .ct-preprocessed-value {
  padding: var(--space-3);
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  max-height: 120px;
  overflow-y: auto;
  line-height: var(--leading-relaxed);
}

.ds-v2 .ct-preprocessed-value:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Elements container (rule editor) */
.ds-v2 #elements {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  min-height: var(--space-12);
}

.ds-v2 #elements:empty {
  display: none;
}

/* In search mode, #elements is just a transparent wrapper */
.ds-v2 #elements:has(.search-result-card) {
  background: none;
  border: none;
  border-radius: 0;
  min-height: 0;
}

/* --- Test Dataset Counter (inside try modifications card) --- */
.ds-v2 .testCountDiv {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1-5);
  padding: var(--space-3) 0 0;
  margin-top: var(--space-3);
  border-top: 1px solid var(--border-primary);
}

.ds-v2 .languageCounterBox {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  font-family: var(--font-mono);
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  white-space: nowrap;
}

.ds-v2 .languageCounterBox.lowCount {
  background: var(--error-light);
  color: #DC2626;
  border-color: rgba(239, 68, 68, 0.2);
}

.ds-v2 .languageCounterBox.satisfactoryCount {
  background: var(--success-light);
  color: #059669;
  border-color: rgba(16, 185, 129, 0.2);
}

.ds-v2 .languageCounterBox.linkToDataset {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
}

.ds-v2 .languageCounterBox.linkToDataset:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

/* --- Try Text Popup — full redesign --- */
.ds-v2 .try-modifications-popup {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(4px);
  z-index: 1500;
  justify-content: center;
}

.ds-v2 .try-modifications-popup-content {
  position: relative;
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: min(1200px, 85vw);
  max-height: 92vh;
  overflow-x: hidden;
  color: var(--text-primary);
}

/* When try-modifications-popup-content is used inline (as a .card),
   reset popup-specific layout props so it fills its container */
.ds-v2 .card.try-modifications-popup-content {
  width: auto;
  max-width: none;
  max-height: none;
  position: relative;
  box-shadow: var(--shadow-xs);
  border-radius: var(--radius-lg);
  overflow-x: hidden;
}

/* Override the inline padding on the inner card-body */
.ds-v2 .try-modifications-popup-content > .card-body {
  padding: var(--space-5) !important;
  padding-top: var(--space-4) !important;
}

.ds-v2 .try-modifications-popup-content-exit-button {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  left: auto;
  transform: none;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-1-5) var(--space-3);
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  width: auto;
  z-index: 1;
}

.ds-v2 .try-modifications-popup-content-exit-button:hover {
  background: var(--error-light);
  border-color: var(--error);
  color: var(--error);
}

/* Language/Branch dropdowns row — 50/50 split */
.ds-v2 .try-modifications-popup-content > .card-body > .row:first-child {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.ds-v2 .try-modifications-popup-content > .card-body > .row:first-child > .col-lg-6 {
  flex: 1 1 0;
  min-width: 0;
}

.ds-v2 .try-modifications-popup-content > .card-body > .row:first-child .form-group {
  margin-bottom: 0;
}

/* Ensure Choices.js takes full width inside the columns */
.ds-v2 .try-modifications-popup-content .form-group .choices {
  width: 100% !important;
}

.ds-v2 .try-modifications-popup-content .form-group .choices__inner {
  width: 100%;
}

.ds-v2 .try-modifications-popup-content .form-group .choices__list--dropdown {
  width: 100% !important;
  min-width: 100%;
}

.ds-v2 .try-modifications-popup-content .row {
  margin-bottom: var(--space-3);
}

/* The meta-ui-panel row with "Show META" + "Skip metas" */
.ds-v2 .try-modifications-popup-content #meta-ui-panel {
  margin-top: var(--space-3);
  margin-bottom: var(--space-2);
}

.ds-v2 .try-modifications-popup-content #meta-ui-panel > .col-lg-12 > .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.ds-v2 .try-modifications-popup-content #meta-ui-panel > .col-lg-12 > .row > .col-lg-6 {
  flex: 0 0 auto;
}

/* "Show META panel" button — redesign */
.ds-v2 #meta-ui-panel > .col-lg-12 > .row > .col-lg-6:first-child span {
  background: var(--surface-secondary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.ds-v2 #meta-ui-panel > .col-lg-12 > .row > .col-lg-6:first-child span:hover {
  background: var(--gray-100) !important;
}

/* "Skip metas" label — redesign with inline checkbox */
.ds-v2 #meta-ui-panel label[for="meta-panel-skip-metas-mode"] {
  background: var(--error-light) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: var(--error) !important;
  font-size: var(--text-xs) !important;
  font-weight: var(--weight-semibold) !important;
  padding: 6px 12px !important;
  border-radius: var(--radius-md) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

.ds-v2 #meta-ui-panel label[for="meta-panel-skip-metas-mode"]:hover {
  background: rgba(239, 68, 68, 0.15) !important;
}

.ds-v2 #meta-ui-panel label[for="meta-panel-skip-metas-mode"] input[type="checkbox"] {
  accent-color: var(--error);
  width: 14px;
  height: 14px;
  margin: 0;
}

/* Meta textarea — fix collapsed height */
.ds-v2 #try_rules_engines_modifications_meta {
  min-height: 40px !important;
  height: auto !important;
  padding: var(--space-2) var(--space-3) !important;
  margin-top: var(--space-3) !important;
}

/* Language/Branch Choices.js inside popup — dark mode fix */
.ds-v2 .try-modifications-popup-content .form-group .choices__inner {
  background-color: var(--surface-primary) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

.ds-v2 .try-modifications-popup-content .form-group .choices.is-focused .choices__inner {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .try-modifications-popup-content .form-group .choices__list--single .choices__item {
  color: var(--text-primary);
}

.ds-v2 .try-modifications-popup-content .form-group .choices__list--dropdown {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 .try-modifications-popup-content .form-group .choices__list--dropdown .choices__item {
  color: var(--text-primary);
}

.ds-v2 .try-modifications-popup-content .form-group .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--gray-200);
}

.ds-v2 .try-modifications-popup-content .form-group .choices[data-type*="select-one"]::after {
  border-color: var(--text-secondary) transparent transparent;
}

.ds-v2 .try-modifications-popup-content .form-group .choices[data-type*="select-one"].is-open::after {
  border-color: transparent transparent var(--text-secondary);
}

.ds-v2 .try-modifications-popup-content .form-group .choices[data-type*="select-one"] .choices__input {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
  border-bottom-color: var(--border-primary);
}

/* JSON result pre inside popup */
.ds-v2 .try-modifications-popup-content #rules_engines_analyze_result_json,
.ds-v2 #pre_processing_analyze_result_json {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  padding: var(--space-3);
}

/* JSON Viewer dark mode */
.ds-v2 .json-viewer {
  color: var(--text-primary);
}

.ds-v2 .json-viewer a.list-link {
  color: var(--text-primary) !important;
}

.ds-v2 .json-viewer ul {
  border-left-color: var(--border-primary);
}

.ds-v2 .json-viewer .type-string {
  color: #10B981;
}

.ds-v2 .json-viewer .type-boolean,
.ds-v2 .json-viewer .type-number {
  color: #60A5FA;
}

.ds-v2 .json-viewer .type-null,
.ds-v2 .json-viewer .type-undefined {
  color: var(--text-tertiary);
}

.ds-v2 .json-viewer .items-ph {
  color: var(--text-tertiary);
}

.ds-v2 .json-viewer a.list-link:before {
  color: var(--text-tertiary);
}

/* --- Refresh Analyzer Popup — full redesign --- */
.ds-v2 .rules-engines-refresh-popup {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-v2 .rules-engines-refresh-popup-content {
  position: relative;
  top: auto;
  margin: 0;
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-5);
  width: min(1100px, 92vw);
  max-height: 90vh;
  min-height: auto !important;
  overflow: auto !important;
  display: flex;
  gap: var(--space-5);
  color: var(--text-primary);
}

/* Analyzers list */
.ds-v2 .rules-engines-refresh-popup #analyzers_list {
  background-color: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  list-style-type: none;
  max-height: 70vh;
  overflow-y: auto;
}

/* Analyzer card */
.ds-v2 .rules-engines-refresh-popup #analyzers_list li[ip] {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4);
  margin: 0;
}

/* Analyzer title (IP) */
.ds-v2 .rules-engines-refresh-popup #analyzers_list li .title {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  font-size: var(--text-base);
  font-family: var(--font-mono);
  margin-bottom: var(--space-2);
}

/* Analyzer mode + version */
.ds-v2 .rules-engines-refresh-popup #analyzers_list li .mode_div,
.ds-v2 .rules-engines-refresh-popup #analyzers_list li .version {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
}

.ds-v2 .rules-engines-refresh-popup #analyzers_list li .mode_div b,
.ds-v2 .rules-engines-refresh-popup #analyzers_list li .version b {
  color: var(--text-primary);
}

/* Branch list inside analyzer */
.ds-v2 .rules-engines-refresh-popup #analyzers_list li .list_branches {
  list-style-type: none;
  padding: 0;
  margin: var(--space-2) 0 0 0;
  border-top: 1px solid var(--border-primary);
  padding-top: var(--space-2);
}

.ds-v2 .rules-engines-refresh-popup #analyzers_list li .list_branches li {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  padding: var(--space-1) 0;
  margin: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.ds-v2 .rules-engines-refresh-popup #analyzers_list li .list_branches li b {
  color: var(--text-primary);
}

/* Links */
.ds-v2 .rules-engines-refresh-popup #analyzers_list li a {
  color: var(--brand-500);
}

/* Panel (buttons) */
.ds-v2 .rules-engines-refresh-popup #panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 0 0 180px;
  list-style-type: none;
  padding: 0;
}

.ds-v2 .rules-engines-refresh-popup #panel button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: var(--space-2-5) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
  margin: 0;
}

.ds-v2 .rules-engines-refresh-popup #panel button.start_refreshing {
  background: var(--brand-500) !important;
  color: white !important;
}

.ds-v2 .rules-engines-refresh-popup #panel button.start_refreshing:hover:not(:disabled) {
  background: var(--brand-600) !important;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules-engines-refresh-popup #panel button.start_refreshing:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.ds-v2 .rules-engines-refresh-popup #panel button.hard_restart {
  background: var(--error-light) !important;
  color: var(--error) !important;
  border: 1px solid rgba(239, 68, 68, 0.2);
}

.ds-v2 .rules-engines-refresh-popup #panel button.hard_restart:hover {
  background: var(--error) !important;
  color: white !important;
}

/* Analysis cards */
.ds-v2 .results-card,
.ds-v2 .structures-card {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  box-shadow: var(--shadow-xs);
  color: var(--text-primary);
}

.ds-v2 .details-card {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .result-item .result-label,
.ds-v2 .structures-label,
.ds-v2 .preprocessed-section .detail-label {
  color: var(--text-tertiary);
}

.ds-v2 .result-item .result-value {
  background: var(--surface-secondary);
  color: var(--text-primary);
}

.ds-v2 .detail-item .detail-label {
  color: var(--text-tertiary);
}

.ds-v2 .detail-item .detail-value {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .preprocessed-value {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
  overflow-wrap: break-word;
  word-break: break-word;
}

.ds-v2 .preprocessed-section {
  border-top-color: var(--border-primary);
}

.ds-v2 .structures-content {
  color: var(--text-primary);
}

/* Status bar */
.ds-v2 .analysis-status-bar {
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .analysis-status-bar .status-label {
  color: var(--text-secondary);
}

.ds-v2 .analysis-status-bar .status-value {
  color: var(--text-primary);
}

.ds-v2 .analysis-status-bar .status-refreshing {
  color: var(--success);
  font-weight: 700;
}

.ds-v2 .analysis-status-bar .duration-badge {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
}

/* Meta panel */
.ds-v2 #meta-ui-panel ul li {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
}

.ds-v2 #meta-ui-panel ul li:hover {
  background: var(--gray-100);
  border-color: var(--brand-200);
}

.ds-v2 #meta-ui-panel ul label {
  color: var(--text-primary);
}

.ds-v2 #meta-ui-panel .choices__inner {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 #meta-ui-panel .choices.is-focused .choices__inner {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 #meta-ui-panel .choices__list--dropdown {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
}

.ds-v2 #meta-ui-panel .choices__list--dropdown .choices__item {
  color: var(--text-primary);
}

.ds-v2 #meta-ui-panel .choices__list--dropdown .choices__item--selectable.is-highlighted {
  background-color: var(--gray-200);
}

.ds-v2 #meta-ui-panel button[name="meta-clear-button"] {
  background: var(--surface-secondary) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}

.ds-v2 #meta-ui-panel button[name="meta-clear-button"]:hover {
  background: var(--gray-200) !important;
  color: var(--text-primary) !important;
}

/* Meta JSON textarea */
.ds-v2 #try_rules_engines_modifications_meta {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
  color: var(--text-secondary);
}

.ds-v2 #try_rules_engines_modifications_meta:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Form controls inside the popup */
.ds-v2 textarea#try_rules_engines_modifications {
  resize: vertical;
  font-size: .9rem;
  line-height: 1.2rem;
}

.ds-v2 .try-modifications-popup-content .form-control,
.ds-v2 .try-modifications-popup-content select,
.ds-v2 .try-modifications-popup-content textarea,
.ds-v2 .try-modifications-popup-content input[type="text"] {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .try-modifications-popup-content .form-control:focus,
.ds-v2 .try-modifications-popup-content select:focus,
.ds-v2 .try-modifications-popup-content textarea:focus,
.ds-v2 .try-modifications-popup-content input[type="text"]:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .try-modifications-popup-content label {
  color: var(--text-primary);
}

/* Detail meta badges */
.ds-v2 .detail-meta {
  background: var(--surface-secondary);
  color: var(--text-tertiary);
}

.ds-v2 .detail-meta b {
  color: var(--text-primary);
}

/* AI Enrichment inside try popup */
.ds-v2 .enrichment-report-card {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
}

.ds-v2 .enrichment-report-header {
  background: var(--surface-secondary);
  border-bottom-color: var(--border-primary);
}

.ds-v2 .enrichment-report-body {
  color: var(--text-primary);
}

.ds-v2 .enrichment-section {
  border-bottom-color: var(--border-primary);
}

.ds-v2 .enrichment-section-value {
  color: var(--text-primary);
}

.ds-v2 .enrichment-badge-typo {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .enrichment-badge-typo:hover {
  background: var(--gray-100);
}

.ds-v2 .enrichment-test-comment {
  background: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .enrichment-test-comment:hover {
  background: var(--surface-secondary);
}

.ds-v2 .enrichment-word-item:hover {
  background-color: var(--gray-100);
}

.ds-v2 .enrichment-word-original {
  color: var(--text-primary);
}

.ds-v2 .enrichment-word-meaning {
  color: var(--text-secondary);
}

.ds-v2 .enrichment-comment-text {
  color: var(--text-primary);
}

.ds-v2 .enrichment-comment-translation {
  color: var(--text-tertiary);
}

/* AI explain button */
.ds-v2 .ai-explain-button {
  color: #7c3aed;
  background: rgba(139, 92, 246, 0.08);
  border-color: rgba(139, 92, 246, 0.2);
}

.ds-v2 .ai-explain-button:hover {
  background: rgba(139, 92, 246, 0.15);
  border-color: rgba(139, 92, 246, 0.3);
}

/* Pre-processed word hover */
.ds-v2 .pre_processed_word_span:hover {
  background-color: var(--gray-100);
}

.ds-v2 .pre_processed_word_span[selected] {
  background-color: var(--brand-100);
}

/* ============================================
   MANAGE RULES ENGINES ELEMENTS PAGE
   Layout, editor panels, dark mode overrides
   ============================================ */

/* --- Editor panels layout (words dictionary + try modifications) --- */
.ds-v2 .re-editor-panels {
  display: flex;
  align-items: stretch;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.ds-v2 .re-editor-panels > [name="words_dictionary"]:not([hidden]) {
  flex: 7;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.ds-v2 .re-editor-panels > [name="words_dictionary"]:not([hidden]) > .card {
  flex: 1;
}

.ds-v2 .re-editor-panels > [name="try_modifications"]:not([hidden]) {
  flex: 5;
  min-width: 0;
}

/* --- Bottom panels layout (logs + notepad) --- */
.ds-v2 .re-bottom-panels {
  display: flex;
  gap: var(--space-5);
  margin-bottom: var(--space-12);
}

.ds-v2 .re-bottom-panels > div:not([hidden]) {
  flex: 1 1 0;
  min-width: 0;
}

/* --- Logs container height (match Notepad) --- */
.ds-v2 div[section="logs"] {
  max-height: 313px;
}

/* --- Structured log entries --- */
.ds-v2 .log-version-header {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  border-bottom: 1px solid var(--border-primary);
  background: var(--surface-secondary);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.ds-v2 .log-entry {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.ds-v2 .log-entry:last-child {
  border-bottom: none;
}

.ds-v2 .log-entry-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.ds-v2 .log-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.ds-v2 .log-badge-event {
  background: var(--brand-500);
  color: white;
}

/* Event type color variants */
.ds-v2 .log-event-test-run        { background: #7C3AED; }
.ds-v2 .log-event-changelog,
.ds-v2 .log-event-changelog-by-llm,
.ds-v2 .log-event-changelog-by-user { background: var(--gray-500); }
.ds-v2 .log-event-test-dataset-add,
.ds-v2 .log-event-test-dataset-update { background: #0891B2; }
.ds-v2 .log-event-test-dataset-remove { background: var(--error); }
.ds-v2 .log-event-word-add,
.ds-v2 .log-event-word-update,
.ds-v2 .log-event-selector-add,
.ds-v2 .log-event-condition-add   { background: var(--success); }
.ds-v2 .log-event-word-remove,
.ds-v2 .log-event-selector-remove,
.ds-v2 .log-event-condition-remove { background: var(--error); }
.ds-v2 .log-event-update-parameter,
.ds-v2 .log-event-update-word-override-parameter { background: var(--warning); color: #1E293B; }
.ds-v2 .log-event-line-move,
.ds-v2 .log-event-line-add,
.ds-v2 .log-event-line-emptied    { background: #2563EB; }
.ds-v2 .log-event-parent-word-dictionary-add,
.ds-v2 .log-event-parent-word-dictionary-remove,
.ds-v2 .log-event-child-word-dictionary-add,
.ds-v2 .log-event-child-word-dictionary-update,
.ds-v2 .log-event-child-word-dictionary-remove { background: #D97706; color: white; }

.ds-v2 .log-badge-lang {
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  text-transform: none;
  font-weight: var(--weight-medium);
}

.ds-v2 .log-timestamp {
  margin-left: auto;
  color: var(--text-tertiary);
  font-size: var(--text-xs);
  font-family: var(--font-mono);
  white-space: nowrap;
}

.ds-v2 .log-entry-text {
  color: var(--text-primary);
  line-height: 1.5;
  word-break: break-word;
  white-space: pre-wrap;
}

/* --- View Management actions --- */
.ds-v2 .re-view-actions {
  display: flex;
  align-items: center;
}

.ds-v2 .re-view-actions > div {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* --- Search status --- */
.ds-v2 #search_status {
  text-align: center;
  color: var(--text-primary);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin: var(--space-4) 0;
}

/* --- Search box --- */
.ds-v2 #search_box {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.ds-v2 #search_box:empty {
  display: none !important;
}

/* --- Floating action bar (save/delete/verify buttons) --- */
.ds-v2 .rules_engines_elements_buttons_section {
  background-color: var(--surface-elevated);
  border: 1px solid var(--border-primary);
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-lg);
  z-index: var(--z-modal);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
}

.ds-v2 .rules_engines_elements_buttons_section:empty {
  display: none;
}

.ds-v2 .rules_engines_elements_buttons_section button {
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* --- Init section (lazy load buttons) --- */
.ds-v2 .init_rules_engines_section {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
}

/* --- Bounce loader (kept for JS compatibility) --- */
.ds-v2 .bounce-loader {
  display: none;
  text-align: center;
  padding: var(--space-3);
}

.ds-v2 .bounce-loader .bounce1,
.ds-v2 .bounce-loader .bounce2,
.ds-v2 .bounce-loader .bounce3 {
  width: 10px;
  height: 10px;
  background-color: var(--brand-500);
  border-radius: 100%;
  display: inline-block;
  animation: bounce-delay 1.4s infinite ease-in-out both;
}

.ds-v2 .bounce-loader .bounce1 {
  animation-delay: -0.32s;
}

.ds-v2 .bounce-loader .bounce2 {
  animation-delay: -0.16s;
}

@keyframes bounce-delay {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1.0); }
}

/* Rotating spinner for loading states */
.ds-v2 .rotating {
  animation: ds-spin 1s linear infinite;
}

@keyframes ds-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* --- Editor dark mode overrides --- */

/* Rule element titles — unified style */
.ds-v2 .selector-content-title,
.ds-v2 .condition-content-title,
.ds-v2 .structure-content-title {
  color: var(--text-primary);
}

.ds-v2 .condition-content-title > p {
  color: var(--text-primary);
}

/* Parameters */
.ds-v2 #parameters > .parameter,
.ds-v2 #parameters > .parameter > span {
  color: var(--text-primary);
}

.ds-v2 .parameter > p {
  color: var(--text-primary);
}

/* ID indicator (search results) */
.ds-v2 .id_indicator {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--space-3) 0 !important;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-secondary);
  border-radius: var(--radius-lg);
  color: var(--text-primary);
}

.ds-v2 .id_indicator-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ds-v2 .id_indicator-right {
  display: flex;
  align-items: center;
}

.ds-v2 .id_indicator .badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  line-height: 1.4;
}

.ds-v2 .id_indicator .element-id-badge {
  background-color: var(--brand-500);
  color: white;
}

.ds-v2 .id_indicator .version-badge {
  background-color: var(--gray-200);
  color: var(--text-primary);
}

[data-theme="dark"] .id_indicator .version-badge {
  background-color: var(--gray-700);
}

.ds-v2 .id_indicator .draft-badge {
  background-color: var(--warning);
  color: white;
}

.ds-v2 .id_indicator .pinned-badge {
  background-color: var(--info-light);
  color: var(--info);
}

[data-theme="dark"] .id_indicator .pinned-badge {
  background-color: rgba(59, 130, 246, 0.2);
}

.ds-v2 .id_indicator .creator-badge {
  background-color: var(--gray-200);
  color: var(--text-secondary);
}

[data-theme="dark"] .id_indicator .creator-badge {
  background-color: var(--gray-700);
}

.ds-v2 .id_indicator .time-ago-badge {
  background-color: var(--gray-200);
  color: var(--text-tertiary);
}

[data-theme="dark"] .id_indicator .time-ago-badge {
  background-color: var(--gray-700);
}

.ds-v2 .id_indicator .hide-button {
  background-color: var(--gray-200);
  color: var(--text-secondary);
  border: none;
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.ds-v2 .id_indicator .hide-button:hover {
  background-color: var(--gray-300);
}

[data-theme="dark"] .id_indicator .hide-button {
  background-color: var(--gray-700);
  color: var(--text-secondary);
}

[data-theme="dark"] .id_indicator .hide-button:hover {
  background-color: var(--gray-600);
}

/* Edit parameter form */
.ds-v2 .edit-parameter-form {
  color: var(--text-primary);
}

.ds-v2 .edit-parameter-form > input[type='text'] {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
}

.ds-v2 .edit-parameter-form > input[type='text']:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

/* Sortable table headers */
.ds-v2 .sortable-th {
  background-color: var(--surface-secondary);
  color: var(--text-primary);
}

/* Help bubble */
.ds-v2 .help-bubble {
  background-color: var(--gray-200);
  color: var(--text-primary);
}

/* (tooltip styles moved to end of file for completeness) */

/* Notes warning banner dark mode */
.ds-v2 .notes_warning_banner {
  background-color: var(--warning-light);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--text-primary);
}

.ds-v2 .notes_warning_banner > .material-symbols-outlined,
.ds-v2 .notes_warning_banner > p,
.ds-v2 .notes_warning_banner > p > a {
  color: var(--text-primary);
}

/* ─── Language tabs (segmented control) ─── */
.ds-v2 #language-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  margin: var(--space-4) 0;
}

.ds-v2 #tests-datasets-language-tabs,
.ds-v2 #notes-language-tabs,
.ds-v2 #similars-elements-language-tabs,
.ds-v2 #detected-comments-language-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  margin: 0 0 var(--space-2);
}

.ds-v2 #language-tab-button,
.ds-v2 #tests-datasets-language-tab-button,
.ds-v2 #notes-language-tab-button,
.ds-v2 #similars-elements-language-tab-button,
.ds-v2 #detected-comments-language-tab-button {
  padding: var(--space-1-5) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  box-shadow: none;
  transform: none;
}

.ds-v2 #language-tab-button:hover,
.ds-v2 #tests-datasets-language-tab-button:hover,
.ds-v2 #notes-language-tab-button:hover,
.ds-v2 #similars-elements-language-tab-button:hover,
.ds-v2 #detected-comments-language-tab-button:hover {
  color: var(--text-primary);
  background: var(--surface-primary);
  transform: none;
  box-shadow: none;
}

.ds-v2 .language-tab-button-selected,
.ds-v2 .tests-datasets-language-tab-button-selected,
.ds-v2 .notes-language-tab-button-selected,
.ds-v2 .similars-elements-language-tab-button-selected,
.ds-v2 .detected-comments-language-tab-button-selected {
  background: var(--brand-500) !important;
  color: white !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-xs) !important;
  font-weight: var(--weight-semibold) !important;
}

.ds-v2 .language-tab-button-selected:hover,
.ds-v2 .tests-datasets-language-tab-button-selected:hover,
.ds-v2 .notes-language-tab-button-selected:hover,
.ds-v2 .similars-elements-language-tab-button-selected:hover,
.ds-v2 .detected-comments-language-tab-button-selected:hover {
  background-color: oklch(from var(--brand-500) calc(l*1.1) c h /.9) !important;
  color: white !important;
}

/* Translated / untranslated distinction */
.ds-v2 #language-tab-button[translated="true"],
.ds-v2 #tests-datasets-language-tab-button[translated="true"],
.ds-v2 #notes-language-tab-button[translated="true"],
.ds-v2 #notes-language-tab-button[data-has-notes="true"] {
  font-weight: var(--weight-semibold);
  background-color: var(--tab-has-content);
}

.ds-v2 #language-tab-button[translated="true"]:hover,
.ds-v2 #tests-datasets-language-tab-button[translated="true"]:hover,
.ds-v2 #notes-language-tab-button[translated="true"]:hover,
.ds-v2 #notes-language-tab-button[data-has-notes="true"]:hover {
  background-color: var(--tab-has-content-hovered);
}

.ds-v2 #language-tab-button[translated="false"],
.ds-v2 #tests-datasets-language-tab-button[translated="false"],
.ds-v2 #notes-language-tab-button[translated="false"] {
  font-weight: var(--weight-normal);
  color: var(--text-tertiary);
  font-style: italic;
}

/* Notes tab indicator — languages that have notes */
.ds-v2 #notes-language-tab-button[data-has-notes="true"] {
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

/* "Test all" button inside tests-datasets language tabs */
.ds-v2 #analyze_rules_engines_element_tests_dataset {
  padding: var(--space-1-5) var(--space-3);
  border-radius: var(--radius-sm);
  border: 0px;
  background-color: var(--brand-400);
  color: white;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-right: var(--space-2);
}

.ds-v2 #analyze_rules_engines_element_tests_dataset:hover {
  background-color: oklch(from var(--brand-400) calc(l*1.2) c h);
  color: black;
}

[data-theme="dark"] .ds-v2 #analyze_rules_engines_element_tests_dataset {
  border-color: rgba(59, 130, 246, 0.25);
}

[data-theme="dark"] .ds-v2 #analyze_rules_engines_element_tests_dataset:hover {
  color: var(--brand-400);
  border-color: var(--brand-500);
}

/* ─── Soft badges (rounded, tinted) ───
   Low-emphasis pills for analysis attributes (severity / type / classification / action) shown across the
   Try-modifications panel, the Try-Text popup and the Detected-comments module. Same per-value palette as
   RulesEnginesColorMappings, but a translucent tint + colored text instead of a solid fill, so the comment
   text stays the focus. Build with RulesEnginesColorMappings.createSoftBadge(text, colorName). color-mix
   derives bg + text from one --soft-c, and the dark-mode rule re-derives both (no per-colour dark rules). */
.ds-v2 .soft-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-full, 9999px);
  font-size: 0.6875rem;
  font-weight: var(--weight-semibold, 600);
  line-height: 1.45;
  white-space: nowrap;
  background: color-mix(in srgb, var(--soft-c, #64748b) 13%, transparent);
  color: color-mix(in srgb, var(--soft-c, #64748b) 78%, black);
}
.ds-v2[data-theme="dark"] .soft-badge {
  background: color-mix(in srgb, var(--soft-c, #64748b) 24%, transparent);
  color: color-mix(in srgb, var(--soft-c, #64748b) 42%, white);
}
.ds-v2 .soft-red     { --soft-c: #ef4444; }
.ds-v2 .soft-orange  { --soft-c: #f97316; }
.ds-v2 .soft-amber   { --soft-c: #f59e0b; }
.ds-v2 .soft-yellow  { --soft-c: #eab308; }
.ds-v2 .soft-lime    { --soft-c: #84cc16; }
.ds-v2 .soft-green   { --soft-c: #22c55e; }
.ds-v2 .soft-emerald { --soft-c: #10b981; }
.ds-v2 .soft-teal    { --soft-c: #14b8a6; }
.ds-v2 .soft-cyan    { --soft-c: #06b6d4; }
.ds-v2 .soft-sky     { --soft-c: #0ea5e9; }
.ds-v2 .soft-blue    { --soft-c: #3b82f6; }
.ds-v2 .soft-indigo  { --soft-c: #6366f1; }
.ds-v2 .soft-violet  { --soft-c: #8b5cf6; }
.ds-v2 .soft-purple  { --soft-c: #a855f7; }
.ds-v2 .soft-fuchsia { --soft-c: #d946ef; }
.ds-v2 .soft-pink    { --soft-c: #ec4899; }
.ds-v2 .soft-rose    { --soft-c: #f43f5e; }
.ds-v2 .soft-slate   { --soft-c: #64748b; }
.ds-v2 .soft-zinc    { --soft-c: #71717a; }
.ds-v2 .soft-gray    { --soft-c: #6b7280; }

/* When a Try-modifications .result-value hosts a single soft badge, drop its grey box so only the pill shows. */
.ds-v2 .result-item .result-value.result-value--soft { background: transparent; padding: 0; }

/* ─── Draggable rule elements ─── */
.ds-v2 div[draggable] {
  background-color: var(--gray-100);
  border-radius: var(--radius-md);
  outline: 0;
  outline-offset: 0;
  transition: background-color var(--transition-fast);
  position: relative;
}

.ds-v2 div[draggable]:hover {
  background-color: var(--gray-200);
}

.ds-v2 div[draggable]:hover .structures_multiples_items {
  border-color: var(--gray-400);
}

.ds-v2 div[draggable].selected {
  outline: 2px solid var(--brand-500) !important;
  outline-offset: 1px !important;
}

.ds-v2[data-theme="dark"] div[draggable],
[data-theme="dark"] .ds-v2 div[draggable] {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.ds-v2[data-theme="dark"] div[draggable]:hover,
[data-theme="dark"] .ds-v2 div[draggable]:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

.ds-v2 div[draggable]:nth-of-type(odd),
.ds-v2[data-theme="dark"] div[draggable]:nth-of-type(odd) {
  background: var(--line-bg) !important;
}

.ds-v2 div[draggable]:nth-of-type(odd):hover,
.ds-v2[data-theme="dark"] div[draggable]:nth-of-type(odd):hover {
  background: var(--line-bg-hovered) !important;
}

.ds-v2[data-theme="dark"] div[draggable].selected,
[data-theme="dark"] .ds-v2 div[draggable].selected {
  outline-color: var(--brand-400) !important;
}

/* (condition box tooltip styles moved to end of file) */

/* Tag items (uuid/tag badges) */
.ds-v2 .uuid-item,
.ds-v2 .tag-item {
  background-color: var(--brand-600);
  color: white;
}

/* Search form dark mode */
.ds-v2 .rules-engines-search-box-form select,
.ds-v2 .rules-engines-search-box-form input[type="text"],
.ds-v2 .rules-engines-search-box-form input[type="number"] {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .rules-engines-search-box-form select:focus,
.ds-v2 .rules-engines-search-box-form input[type="text"]:focus,
.ds-v2 .rules-engines-search-box-form input[type="number"]:focus {
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .rules-engines-search-box-form button[type="submit"] {
  background-color: var(--brand-500);
  border-color: var(--brand-500);
  color: white;
}

.ds-v2 .rules-engines-search-box-form button[type="submit"]:hover {
  background-color: var(--brand-600);
  border-color: var(--brand-600);
}

/* Filter label */
.ds-v2 .filter-label {
  color: var(--text-primary) !important;
}

/* Operator select */
.ds-v2 .operator-select {
  background-color: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

/* Text highlight (search results) */
.ds-v2 .text-highlight {
  background-color: oklch(from var(--surface-primary) l c h / .65);
  color: var(--text-primary);
}

/* Hidden rules count */
.ds-v2 .hidden-rules-count {
  background-color: var(--surface-secondary);
  color: var(--text-secondary);
}

/* Hide rule button */
.ds-v2 .hide-rule-button {
  background-color: var(--gray-400) !important;
  color: white;
}

.ds-v2 .hide-rule-button:hover {
  background-color: var(--gray-500) !important;
}

/* Pin button */
.ds-v2 .pin-button {
  background-color: var(--brand-500);
}

.ds-v2 .pin-button:hover {
  background-color: var(--brand-600);
}

.ds-v2 .pin-button.pinned {
  background-color: var(--warning);
}

.ds-v2 .pin-button.pinned:hover {
  background-color: #D97706;
}

/* ─── Version tabs toolbar ─── */
.ds-v2 #version-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  row-gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.ds-v2 .version-tabs-group {
  display: inline-flex;
  gap: 2px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  padding: 3px;
}

.ds-v2 #version-tab-button {
  padding: var(--space-1-5) var(--space-3);
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.ds-v2 #version-tab-button:hover {
  color: var(--text-primary);
  background: var(--surface-primary);
}

.ds-v2 .version-tab-button-selected {
  background: var(--surface-primary) !important;
  color: var(--brand-500) !important;
  border-color: transparent !important;
  box-shadow: var(--shadow-xs);
  font-weight: var(--weight-semibold) !important;
}

.ds-v2 .version-actions-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  flex-wrap: wrap;
}

/* Base action button */
.ds-v2 .version-action-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  line-height: 1.4;
  box-shadow: none;
  background-image: none;
  overflow: visible;
  position: static;
  z-index: auto;
}

.ds-v2 .version-action-btn:hover {
  color: var(--text-primary);
  border-color: var(--gray-300);
  background: var(--surface-secondary);
}

.ds-v2 .version-action-btn:active {
  transform: none;
  box-shadow: none;
}

.ds-v2 .version-action-btn .material-symbols-outlined {
  font-size: 18px;
}

.custom-icon {
  height: 18px;
  width: 18px;
  color: inherit;
}

.custom-icon path {
  fill: currentColor;
}

/* AI variant — teal/cyan like Enrichment but distinct */
.ds-v2 .version-action-btn--ai {
  color: #0891B2;
  border-color: rgba(8, 145, 178, 0.25);
}

.ds-v2 .version-action-btn--ai:hover {
  color: #0E7490;
  border-color: #0891B2;
  background: var(--surface-secondary);
}

[data-theme="dark"] .ds-v2 .version-action-btn--ai {
  color: #22D3EE;
  border-color: rgba(34, 211, 238, 0.2);
}

[data-theme="dark"] .ds-v2 .version-action-btn--ai:hover {
  color: #67E8F9;
  border-color: #22D3EE;
}

/* Pin variant — pinned state */
.ds-v2 .version-action-btn--pin.pinned {
  color: var(--warning);
  border-color: var(--warning);
  background: var(--warning-light);
}

.ds-v2 .version-action-btn--pin.pinned:hover {
  color: #B45309;
  background: var(--warning-light);
}

[data-theme="dark"] .ds-v2 .version-action-btn--pin.pinned {
  color: #FBBF24;
}

[data-theme="dark"] .ds-v2 .version-action-btn--pin.pinned:hover {
  color: #FCD34D;
}

/* Enrichment variant */
.ds-v2 .version-action-btn--enrichment {
  color: #8B5CF6;
  border-color: rgba(139, 92, 246, 0.25);
}

.ds-v2 .version-action-btn--enrichment:hover {
  color: #7C3AED;
  border-color: #8B5CF6;
  background: var(--surface-secondary);
}

[data-theme="dark"] .ds-v2 .version-action-btn--enrichment {
  color: #A78BFA;
  border-color: rgba(167, 139, 250, 0.2);
}

[data-theme="dark"] .ds-v2 .version-action-btn--enrichment:hover {
  color: #C4B5FD;
  border-color: #A78BFA;
}

/* Override old ID-based rainbow styles for AI buttons — full reset */
.ds-v2 #generate_lines_magic_llm {
  background: var(--surface-primary) !important;
  background-image: none !important;
  background-origin: padding-box !important;
  background-clip: padding-box !important;
  color: #0891B2 !important;
  border: 1px solid rgba(8, 145, 178, 0.25) !important;
  padding: var(--space-1-5) var(--space-3) !important;
  font-size: var(--text-sm) !important;
  font-weight: var(--weight-medium) !important;
  font-family: var(--font-sans) !important;
  box-shadow: none !important;
  overflow: visible !important;
  position: static !important;
  z-index: auto !important;
  animation: none !important;
}

.ds-v2 #generate_lines_magic_llm:hover {
  background: var(--surface-secondary) !important;
  background-image: none !important;
  background-size: auto !important;
  color: #0E7490 !important;
  border-color: #0891B2 !important;
  animation: none !important;
  box-shadow: none !important;
}

.ds-v2 #generate_lines_magic_llm:active {
  transform: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .ds-v2 #generate_lines_magic_llm {
  background: var(--surface-primary) !important;
  color: #22D3EE !important;
  border-color: rgba(34, 211, 238, 0.2) !important;
}

[data-theme="dark"] .ds-v2 #generate_lines_magic_llm:hover {
  background: var(--surface-secondary) !important;
  color: #67E8F9 !important;
  border-color: #22D3EE !important;
}

/* SimpleMDE Markdown Editor dark mode */
.ds-v2 .CodeMirror {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .editor-toolbar {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
}

.ds-v2 .editor-toolbar a {
  color: var(--text-secondary) !important;
}

.ds-v2 .editor-toolbar a:hover,
.ds-v2 .editor-toolbar a.active {
  background: var(--gray-100);
  color: var(--text-primary) !important;
}

.ds-v2 .editor-preview,
.ds-v2 .editor-preview-side {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.ds-v2 .CodeMirror-cursor {
  border-left-color: var(--text-primary);
}

.ds-v2 .CodeMirror-selected {
  background: var(--brand-100) !important;
}

.ds-v2 .CodeMirror-gutters {
  background: var(--surface-secondary);
  border-right-color: var(--border-primary);
}

.ds-v2 .CodeMirror-linenumber {
  color: var(--text-tertiary);
}

/* Autocomplete dark mode */
.ds-v2 .autocomplete-suggestions {
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.ds-v2 .autocomplete-suggestion {
  color: var(--text-primary);
  padding: var(--space-1-5) var(--space-3);
  font-size: var(--text-sm);
  font-family: var(--font-sans);
}

.ds-v2 .autocomplete-suggestion > .title {
  color: var(--brand-500);
}

.ds-v2 .autocomplete-suggestion > .type {
  color: var(--text-tertiary);
}

.ds-v2 .autocomplete-suggestion > .description {
  color: var(--text-secondary);
}

.ds-v2 .autocomplete-selected,
.ds-v2 .autocomplete-suggestion:hover {
  background-color: var(--surface-secondary);
}

.ds-v2 .autocomplete-suggestion.Synonym {
  background-color: var(--success-light);
}

.ds-v2 .autocomplete-suggestion.Synonym > .title {
  color: var(--success);
}

/* Grid.js dark mode */
.ds-v2 .gridjs-wrapper {
  border-color: var(--border-primary);
}

.ds-v2 .gridjs-table {
  background: var(--surface-primary);
  color: var(--text-primary);
}

.ds-v2 .gridjs-th {
  background: var(--surface-secondary) !important;
  color: var(--text-secondary);
  border-color: var(--border-primary);
}

.ds-v2 .gridjs-td {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .gridjs-footer,
.ds-v2 .gridjs-head {
  background: var(--surface-secondary);
  border-color: var(--border-primary);
}

.ds-v2 .gridjs-search-input {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .gridjs-pages button {
  background: var(--surface-primary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}

.ds-v2 .gridjs-pages button:hover {
  background: var(--gray-100) !important;
}

.ds-v2 .gridjs-pages button.gridjs-currentPage {
  background: var(--brand-500) !important;
  color: white !important;
}

/* Select2 dark mode (used by editor) */
.ds-v2 .select2-container--default .select2-selection--single,
.ds-v2 .select2-container--default .select2-selection--multiple {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .select2-container--default .select2-selection--single .select2-selection__rendered {
  color: var(--text-primary);
}

.ds-v2 .select2-dropdown {
  background-color: var(--surface-primary);
  border-color: var(--border-primary);
  color: var(--text-primary);
}

.ds-v2 .select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--brand-500);
  color: white;
}

.ds-v2 .select2-container--default .select2-results__option {
  color: var(--text-primary);
}


/* (load-large-list-button styles moved to end of file) */

/* --- Editor structure borders --- */
.ds-v2 .structures_multiples_items {
  border-color: var(--border-primary);
}

/* ─── Box elements (word, synonym, plugin chips in rules editor) ─── */

/* A. Base box styling */
.ds-v2 .box {
  color: var(--box-text-color) !important;
  background-color: var(--box-text-bg) !important;
  padding: 0 var(--space-1-5);
  height: 24px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  line-height: 24px;
  border-radius: var(--radius-sm);
  margin: 2px;
  white-space: nowrap;
  transition: outline var(--transition-fast), filter var(--transition-fast), box-shadow var(--transition-fast);
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  position: relative;
}

/* B. Type variants */
.ds-v2 span[type='SYNONYM_BOX'].box {
  background-color: var(--box-synonym-bg) !important;
  color: var(--box-synonym-color) !important;
}

.ds-v2 span[type='OTHER_BOX'].box {
  background-color: var(--box-plugin-bg) !important;
  color: var(--box-plugin-color) !important;
}

/* C. Multiple items container children */
.ds-v2 .structures_multiples_items > .box {
  background-color: var(--box-multiple-bg) !important;
  color: var(--box-multiple-color) !important;
}

/* Change color of optional alternatives lost in non optional set of alternatives to prevent and help fix analyser crashes */
.structures_multiples_items:has(.box[parameters*='"optional":0']) > .box[parameters*='"optional":1'] {
  background-color: oklch(0.56 0.05 257.94) !important;
}

/* D. Suggestion boxes */
.ds-v2 span[suggestion='true'].box {
  background-color: var(--box-suggestion-bg) !important;
  color: var(--box-suggestion-color) !important;
  opacity: 0.85;
}

/* E. None box */
.ds-v2 .none-box {
  color: var(--box-none-color) !important;
  background-color: var(--box-none-bg) !important;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  line-height: 1.4;
  border-radius: var(--radius-sm);
}

/* F. Selection state */
.ds-v2 .box.ds-selected {
  outline: 3px solid var(--box-selection-outline) !important;
  outline-offset: 1.5px;
}

/* G. Optional border (CSS class-based, replaces inline styles) */
.ds-v2 .box.box-optional {
  outline: 2.5px dashed var(--box-optional-border) !important;
  outline-offset: 1.5px;
}

.ds-v2 .box.box-optional .box.ds-selected {
  outline: 2.5px dashed var(--box-optional-border) !important;
  outline-offset: 1.5px;
}

.ds-v2 .box.box-optional.ds-selectable.ds-selected {
  outline-color: var(--box-selection-outline) !important;
}

.ds-v2 .structures_multiples_items.box-container-optional {
  border-style: dashed !important;
  border-width: 2px !important;
  border-color: var(--box-optional-border) !important;
}

/* H. Hover state */
.ds-v2 .box:hover {
  transition: background-color .2s ease-in-out;
  background-color: oklch(from var(--box-text-bg) calc(l*1.1) c h) !important;
}

.ds-v2[data-theme="dark"] .box:hover {
  transition: background-color .2s ease-in-out;
  background-color: oklch(from var(--box-text-bg) calc(l*1.15) c h) !important;
}

.ds-v2 .structures_multiples_items > .box:hover {
  background-color: oklch(from var(--box-multiple-bg) calc(l*1.1) c h) !important;
}

.ds-v2[data-theme="dark"] .structures_multiples_items > .box:hover {
  background-color: oklch(from var(--box-multiple-bg) calc(l*1.15) c h) !important;
}

.ds-v2 span[type='OTHER_BOX'].box:hover {
  background-color: oklch(from var(--box-plugin-bg) calc(l*1.1) c h) !important;
}

.ds-v2[data-theme="dark"] span[type='OTHER_BOX'].box:hover {
  background-color: oklch(from var(--box-plugin-bg) calc(l*1.15) c h) !important;
}

.ds-v2 span[type='SYNONYM_BOX'].box:hover {
  background-color: oklch(from var(--box-synonym-bg) calc(l*1.1) c h) !important;
}

.ds-v2[data-theme="dark"] span[type='SYNONYM_BOX'].box:hover {
  background-color: oklch(from var(--box-synonym-bg) calc(l*1.15) c h) !important;
}


/* I. Control buttons inside boxes (+ and X) — CSS-only icon replacement */
.ds-v2 .box > #remove-box,
.ds-v2 .box > #add-box,
.ds-v2 .box > #suggestion-add-box {
  padding: 0;
  margin: 0;
  background-color: transparent !important;
  font-size: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  line-height: 1;
  color: inherit !important;
  display: inline-flex;
  align-items: center;
}

.ds-v2 .box > #remove-box:hover,
.ds-v2 .box > #add-box:hover,
.ds-v2 .box > #suggestion-add-box:hover {
  opacity: 1;
  text-decoration: none !important;
}

.ds-v2 .box > #remove-box::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: 1rem;
  color: inherit;
}

.ds-v2 .box > #remove-box {
  opacity: 1;
}

.ds-v2 .box > #add-box::before,
.ds-v2 .box > #suggestion-add-box::before {
  content: 'add';
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  color: inherit;
}

/* J. Tune icon inside box */
.ds-v2 .box > #update-box-parameters {
  font-size: 14px !important;
  margin: 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
  color: inherit !important;
  display: inline-flex;
  align-items: center;
}

.ds-v2 .box > #update-box-parameters:hover {
  opacity: 1;
}

/* K. Standalone add-box buttons (between boxes, not inside .box) */
.ds-v2 div[draggable] > #add-box,
.ds-v2 div[draggable] > #suggestion-add-box,
.ds-v2 .structures_multiples_items > #add-box,
.ds-v2 .structures_multiples_items > #suggestion-add-box {
  background-color: var(--box-text-bg) !important;
  color: var(--box-text-color) !important;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  height: 24px;
  line-height: 24px;
  padding: 0 var(--space-1);
  margin: 2px;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
}

.ds-v2 .structures_multiples_items > #add-box,
.ds-v2 .structures_multiples_items > #suggestion-add-box {
  background-color: var(--box-multiple-bg) !important;
  color: var(--box-multiple-color) !important;
}

/* L. Override indicator dot (CSS class-based, replaces inline styles) */
.ds-v2 #update-box-parameters.has-override,
.ds-v2 #update-words-dictionary-parameters.has-override {
  position: relative;
}

.ds-v2 #update-box-parameters.has-override::after,
.ds-v2 #update-words-dictionary-parameters.has-override::after {
  content: '';
  position: absolute;
  top: 3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: #facc15;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.3);
}

/* M. Separator box */
.ds-v2 .separator {
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

/* N. Words Dictionary spans — match .box design */
.ds-v2 .word-dictionary {
  color: #fff !important;
  padding: 0 var(--space-1-5);
  height: 24px;
  font-size: var(--text-sm);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  line-height: 24px;
  border-radius: var(--radius-sm);
  margin: 2px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  vertical-align: middle;
}

.ds-v2 .word-dictionary.alternative {
  background-color: var(--box-plugin-bg) !important;
}

.ds-v2 tr[not_found_word='true'] .word-dictionary.alternative {
  background-color: var(--box-suggestion-bg) !important;
}

.ds-v2 .word-dictionary.synonym {
  background-color: var(--box-synonym-bg) !important;
}

.ds-v2 .word-dictionary.generated {
  background-color: var(--box-text-bg) !important;
}

/* Words Dictionary — tune icon */
.ds-v2 .word-dictionary > #update-words-dictionary-parameters {
  font-size: 14px !important;
  margin: 0;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-fast);
  color: inherit !important;
  display: inline-flex;
  align-items: center;
}

.ds-v2 .word-dictionary > #update-words-dictionary-parameters:hover {
  opacity: 1;
}

/* Words Dictionary — delete and add buttons */
.ds-v2 .word-dictionary > .remove-word-dictionary,
.ds-v2 .word-dictionary > .add-word-dictionary,
.ds-v2 .word-dictionary > .add-generated-word-dictionary {
  padding: 0;
  margin: 0;
  font-size: 0;
  opacity: 0.7;
  transition: opacity var(--transition-fast);
  cursor: pointer;
  color: inherit !important;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-transform: none;
}

.ds-v2 .word-dictionary > .remove-word-dictionary:hover,
.ds-v2 .word-dictionary > .add-word-dictionary:hover,
.ds-v2 .word-dictionary > .add-generated-word-dictionary:hover {
  opacity: 1;
  text-decoration: none !important;
}

.ds-v2 .word-dictionary > .remove-word-dictionary::before {
  content: 'close';
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  color: inherit;
}

.ds-v2 .word-dictionary > .add-word-dictionary::before,
.ds-v2 .word-dictionary > .add-generated-word-dictionary::before {
  content: 'add';
  font-family: 'Material Symbols Outlined';
  font-size: 14px;
  color: inherit;
}

.ds-v2 .condition_setting_icon {
  color: var(--text-tertiary) !important;
}

/* Editor global div (rule content) */
.ds-v2 #global {
  color: var(--text-primary);
}

/* --- Try modifications fixed-to-top (scroll behavior) --- */
.ds-v2 .try_modifications_fixed_top {
  position: fixed;
  top: 0;
  right: 230px;
  z-index: var(--z-modal-backdrop);
  max-height: 90vh;
  overflow-y: auto;
}

.ds-v2 .try_modifications_fixed_top > .card {
  box-shadow: var(--shadow-xl);
  border-color: var(--brand-300);
}

/* --- AI Custom Request Modal (design system) --- */
.ds-v2 .custom-request-modal {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xl);
  z-index: 1000;
  width: 420px;
  max-width: calc(100vw - 24px);
  box-sizing: border-box;
}

.ds-v2 .custom-request-modal textarea {
  width: 100%;
  height: 80px;
  margin-bottom: var(--space-3);
  resize: vertical;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  line-height: 1.5;
}

.ds-v2 .custom-request-modal textarea:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.ds-v2 .custom-request-modal .custom-request-buttons {
  display: flex;
  gap: var(--space-2);
}

.ds-v2 .custom-request-modal .custom-request-submit {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--brand-500);
  color: white;
  transition: background var(--transition-fast);
}

.ds-v2 .custom-request-modal .custom-request-submit:hover {
  background: var(--brand-600);
}

.ds-v2 .custom-request-modal .custom-request-cancel {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  cursor: pointer;
  background: var(--surface-secondary);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.ds-v2 .custom-request-modal .custom-request-cancel:hover {
  background: var(--gray-200);
  color: var(--text-primary);
}

/* --- Enrichment Modal (design system dark/light) --- */
.ds-v2 .enrichment-agent-modal {
  background: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-xl);
}

.ds-v2 .enrichment-agent-modal textarea {
  background: var(--surface-primary);
  color: var(--text-primary);
  border-color: var(--border-primary);
}

.ds-v2 .enrichment-agent-modal textarea:focus {
  border-color: #7c3aed;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.12);
}

.ds-v2 .enrichment-agent-modal-submit {
  background: #7c3aed;
  color: white;
  font-family: var(--font-sans);
}

.ds-v2 .enrichment-agent-modal-submit:hover {
  background: #6d28d9;
}

.ds-v2 .enrichment-agent-modal-cancel {
  background: var(--surface-secondary);
  color: var(--text-secondary);
  border: 1px solid var(--border-primary);
  font-family: var(--font-sans);
}

.ds-v2 .enrichment-agent-modal-cancel:hover {
  background: var(--gray-200);
  color: var(--text-primary);
}

/* --- Line hover buttons (line_indicator, test_dataset_generation, line_magic_llm) --- */
.ds-v2 .llm_actions_popup {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  gap: var(--space-2);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-2);
  box-shadow: var(--shadow-xl);
  cursor: default;
  transition: all 150ms ease-out;
}

.ds-v2 .llm_actions_popup button {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  background-color: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 150ms ease-out;
}

.ds-v2 .llm_actions_popup button:hover {
  background-color: oklch(from var(--surface-secondary) calc(l + 5%) c h);
}

.ds-v2 .line-indicator,
.ds-v2 #test_dataset_generation,
.ds-v2 #line_magic_llm {
  background: var(--surface-primary) !important;
  color: var(--text-secondary);
  border: 1px solid var(--border-primary) !important;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  min-width: 26px;
  margin-top:2px;
  box-sizing: border-box;
}

.ds-v2 .line-indicator {
  margin-right: 4px;
}

.ds-v2 #test_dataset_generation:hover,
.ds-v2 #line_magic_llm:hover {
  background: var(--surface-secondary) !important;
  color: var(--text-primary);
  border-color: var(--gray-300) !important;
}

.ds-v2 #test_dataset_generation .material-symbols-outlined,
.ds-v2 #line_magic_llm .material-symbols-outlined {
  font-size: 16px;
}

/* --- Rule line animation when processed by LLM --- */
.ds-v2 .animated_border {
  box-shadow: 0 0 10px var(--brand-500);
  animation: aiGlow 1.6s ease-in-out infinite;
}

@keyframes aiGlow {
  0%, 100% {
    box-shadow: 0 0 5px var(--brand-500);
  }
  50% {
    box-shadow: 0 0 20px var(--brand-500);
  }
}

/* --- Box parameters popup (design system) --- */
.ds-v2 .box-parameters,
.ds-v2 .condition-box-parameters,
.ds-v2 .words-dictionary-parameters {
  position: fixed;
  z-index: 9999;
  display: block;
  max-width: none;
  width: max-content;
  max-width: min(400px, 90vw);
  background-color: var(--surface-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-xl);
  color: var(--text-primary);
  cursor: default;
}

.ds-v2 .box-parameters {
  position: absolute !important;
}

.ds-v2 .box-parameters .parameter,
.ds-v2 .box-parameters .parameter span,
.ds-v2 .condition-box-parameters .parameter,
.ds-v2 .condition-box-parameters .parameter span,
.ds-v2 .words-dictionary-parameters .parameter,
.ds-v2 .words-dictionary-parameters .parameter span {
  color: var(--text-primary) !important;
}

.ds-v2 .box-parameters .parameter > p,
.ds-v2 .condition-box-parameters .parameter > p,
.ds-v2 .words-dictionary-parameters .parameter > p,
.ds-v2 #override_parameters_content > .parameter > p,
.ds-v2 #override_parameters_content > .parameter > .tooltip-container > button > p,
.ds-v2 #box-parameters > div > div > .parameter > p,
.ds-v2 #box-parameters > div > div > .parameter > .tooltip-container > button > p,
.ds-v2 #condition_override_parameters_content > .parameter > p,
.ds-v2 #words_dictionary_override_parameters_content > .parameter > p,
.ds-v2 #words_dictionary_override_parameters_content > .parameter > .tooltip-container > button > p {
  color: var(--text-primary) !important;
}

.ds-v2 #override_parameters_content > .parameter > .tooltip-container > button,
.ds-v2 #box-parameters > div > div > .parameter > .tooltip-container > button,
.ds-v2 #words_dictionary_override_parameters_content > .parameter > .tooltip-container > button {
  border-color: var(--text-tertiary);
}

.ds-v2 .box-parameters select,
.ds-v2 .condition-box-parameters select,
.ds-v2 .words-dictionary-parameters select {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  width: 100%;
  text-overflow: ellipsis;
}

.ds-v2 .box-parameters .parameter span {
  max-width: fit-content;
  overflow: auto;
}

.ds-v2 .box-parameters input[type="checkbox"],
.ds-v2 .condition-box-parameters input[type="checkbox"],
.ds-v2 .words-dictionary-parameters input[type="checkbox"] {
  accent-color: var(--brand-500);
}

.ds-v2 .box-parameters label,
.ds-v2 .condition-box-parameters label,
.ds-v2 .words-dictionary-parameters label {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
}

.ds-v2 .box-parameters input[type="text"],
.ds-v2 .box-parameters input[type="number"],
.ds-v2 .condition-box-parameters input[type="text"],
.ds-v2 .condition-box-parameters input[type="number"],
.ds-v2 .words-dictionary-parameters input[type="text"],
.ds-v2 .words-dictionary-parameters input[type="number"] {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--text-sm);
}

.ds-v2 .box-parameters-separator,
.ds-v2 .words-dictionary-parameters-separator {
  border-bottom: none;
  border-top: 1px solid var(--border-primary);
  margin: var(--space-2) 0;
}

.ds-v2 .box-parameters-button {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.ds-v2 .box-parameters-button:hover {
  background: var(--surface-secondary);
}

/* --- Buttons section (save/delete/verify) redesign --- */
.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_SAVE_BUTTON"] {
  background: var(--success) !important;
  border: none !important;
  color: white;
  font-family: var(--font-sans);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_SAVE_BUTTON"]:hover {
  background: #059669 !important;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_SAVE_DRAFT_BUTTON"] {
  background: var(--brand-500) !important;
  border: none !important;
  color: white;
  font-family: var(--font-sans);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_SAVE_DRAFT_BUTTON"]:hover {
  background: var(--brand-600) !important;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_VERIFY_BUTTON"] {
  background: var(--success) !important;
  border: none !important;
  color: white;
  font-family: var(--font-sans);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_VERIFY_BUTTON"]:hover {
  background: #059669 !important;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_DELETE_ALL_VERSIONS_BUTTON"],
.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_DELETE_DRAFT_BUTTON"] {
  background: var(--error) !important;
  border: none !important;
  color: white;
  font-family: var(--font-sans);
}

.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_DELETE_ALL_VERSIONS_BUTTON"]:hover,
.ds-v2 .rules_engines_elements_buttons_section button[type="ELEMENT_DELETE_DRAFT_BUTTON"]:hover {
  background: #B91C1C !important;
  box-shadow: var(--shadow-sm);
}

/* --- Tooltip container (design system dark/light) — high contrast --- */
.ds-v2 .tooltip-trigger {
  color: var(--text-secondary);
  border: 1.5px solid var(--gray-400);
  background: var(--gray-100);
  font-weight: var(--weight-bold);
}

.ds-v2 .tooltip-trigger:hover {
  color: var(--brand-600);
  border-color: var(--brand-400);
  background: var(--brand-50, rgba(59, 130, 246, 0.08));
}

.ds-v2 .tooltip-trigger > p {
  color: inherit;
}

.ds-v2 .tooltip-box {
  background: #1a1a2e;
  color: #f0f0f0;
  box-shadow: var(--shadow-xl);
  border: 1px solid #2d2d44;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-2) var(--space-3);
}

.ds-v2 .tooltip-text {
  color: #f0f0f0;
}

[data-theme="dark"] .ds-v2 .tooltip-trigger {
  color: var(--gray-300);
  border-color: var(--gray-500);
  background: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .ds-v2 .tooltip-trigger:hover {
  color: #67E8F9;
  border-color: #22D3EE;
  background: rgba(34, 211, 238, 0.1);
}

[data-theme="dark"] .ds-v2 .tooltip-box {
  background: #f8fafc;
  color: #1e293b;
  border-color: #e2e8f0;
}

[data-theme="dark"] .ds-v2 .tooltip-text {
  color: #1e293b;
}

/* --- Load large list button (visible background) --- */
.ds-v2 .load-large-list-button {
  background: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  padding: 2px 8px;
}

.ds-v2 .load-large-list-button:hover {
  background: var(--surface-secondary);
  border-color: var(--gray-300);
}

/* --- Test All popup (laboratory tasks — rules-engines-element-verify-popup) --- */
.ds-v2 .rules-engines-element-verify-popup {
  background-color: var(--surface-overlay);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-v2 .rules-engines-element-verify-popup-content,
.ds-v2 .examples-analyze-popup-content {
  position: fixed;
  top: calc(100vmin / 6);
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: 0;
  width: min(1200px, 92vw);
  max-height: calc((100vmin / 6) * 4);
  overflow-y: auto;
  min-height: auto;
}

.ds-v2 .rules-engines-element-verify-popup-content > h2 {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-4) var(--space-5);
  background: var(--surface-secondary);
  border-bottom: 1px solid var(--border-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-family: var(--font-sans);
  color: var(--text-primary);
  box-shadow: none;
}

.ds-v2 .rules-engines-element-verify-popup-content > h2 #step_number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-500);
  color: white;
  padding: 2px 10px;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  min-width: 24px;
}

.ds-v2 .rules-engines-element-verify-popup-content > h2 #step_name {
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
}

.ds-v2 .rules-engines-element-verify-popup-content .progress {
  height: 20px;
  background: var(--surface-secondary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-full);
  overflow: hidden;
  box-shadow: none;
  margin: var(--space-3) var(--space-2) var(--space-2);
}

.ds-v2 .rules-engines-element-verify-popup-content .progress-bar {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: width 0.4s ease;
}

.ds-v2 .rules-engines-element-verify-popup-content .progress-bar-info {
  background: linear-gradient(90deg, var(--brand-500), var(--brand-600));
  box-shadow: none;
}

.ds-v2 .rules-engines-element-verify-popup-content button[type="NEXT_STEP_BUTTON"],
.ds-v2 .rules-engines-element-verify-popup-content button[type="LAUNCH_STEP_BUTTON"] {
  background: var(--brand-500) !important;
  border: none !important;
  color: white;
  padding: var(--space-2) var(--space-5);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  margin: 0 var(--space-5) var(--space-3);
  box-shadow: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.ds-v2 .rules-engines-element-verify-popup-content button[type="NEXT_STEP_BUTTON"]:hover,
.ds-v2 .rules-engines-element-verify-popup-content button[type="LAUNCH_STEP_BUTTON"]:hover {
  background: var(--brand-600) !important;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules-engines-element-verify-popup-content button[type="ELEMENT_SAVE_BUTTON"] {
  background: var(--success) !important;
  border: none !important;
  color: white;
  padding: var(--space-2) var(--space-5);
  font-weight: var(--weight-medium);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  border-radius: var(--radius-md);
  margin: 0 var(--space-5) var(--space-3);
  box-shadow: none;
  transition: background var(--transition-fast);
  cursor: pointer;
}

.ds-v2 .rules-engines-element-verify-popup-content button[type="ELEMENT_SAVE_BUTTON"]:hover {
  background: #059669 !important;
  transform: none;
  box-shadow: var(--shadow-sm);
}

.ds-v2 .rules-engines-element-verify-popup-content #verify-status {
  margin: 0 var(--space-5) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

.ds-v2 .rules-engines-element-verify-popup-content #verify-details {
  margin: 0;
  padding: 0 var(--space-5) var(--space-5);
}

.ds-v2 .rules-engines-element-verify-popup-content #verify-details h2 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
  margin: var(--space-4) 0 var(--space-2) 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border-radius: 0;
}

/* --- Conflict banner (design system) --- */
.ds-v2 .element-conflict {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-lg);
  text-align: center;
  margin-bottom: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}

.ds-v2 .element-conflict.warning {
  background: var(--warning-light);
  border: 1px solid rgba(245, 158, 11, 0.4);
  color: #92400E;
}

[data-theme="dark"] .ds-v2 .element-conflict.warning {
  background: rgba(245, 158, 11, 0.15);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FCD34D;
}

.ds-v2 .element-conflict.critical {
  background: var(--critical-conflict-bg);
  border: var(--critical-conflict-border);
  color: var(--critical-conflict-color);
}

/* --- Try modifications card — prevent bottom truncation --- */
.ds-v2 .re-editor-panels > [name="try_modifications"]:not([hidden]) .card {
  height: auto;
  min-height: 0;
}

.ds-v2 .re-editor-panels > [name="try_modifications"]:not([hidden]) .card-body {
  overflow: visible;
}

.ds-v2 .card.try-modifications-popup-content {
  overflow: hidden !important;
  height: auto;
  min-height: 0;
}

/* --- Words dictionary card — slightly taller table --- */
.ds-v2 .re-editor-panels > [name="words_dictionary"]:not([hidden]) #words-dictionary-list-placeholder {
  min-height: 686px !important;
  max-height: 686px !important;
}

/* --- Search status — hidden when empty --- */
.ds-v2 #search_status:empty {
  display: none;
}

/* --- Box override parameters tooltip (design system) --- */
.ds-v2 #box-override-parameters-tooltip,
.ds-v2 #condition-box-override-parameters-tooltip,
.ds-v2 #words-dictionary-override-parameters-tooltip {
  border-bottom: none;
  position: fixed;
  z-index: 100;
}

.ds-v2 #box-override-parameters-tooltip .tooltip-content,
.ds-v2 #condition-box-override-parameters-tooltip .condition-tooltip-content,
.ds-v2 #words-dictionary-override-parameters-tooltip .tooltip-content {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-xl);
  text-align: left;
}

.ds-v2 #box-override-parameters-tooltip .tooltip-content span,
.ds-v2 #condition-box-override-parameters-tooltip .condition-tooltip-content span,
.ds-v2 #words-dictionary-override-parameters-tooltip .tooltip-content span {
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  padding: 1px 0;
  line-height: 1.3;
}

.ds-v2 #box-override-parameters-tooltip .tooltip-content span b,
.ds-v2 #condition-box-override-parameters-tooltip .condition-tooltip-content span b,
.ds-v2 #words-dictionary-override-parameters-tooltip .tooltip-content span b {
  color: var(--brand-500);
}

/* --- Empty content divs (no visible border when empty) --- */
.ds-v2 div[id="content"][draggable]:empty {
  display: none;
}

/* --- Buttons section — redesign with icons and disabled state --- */
.ds-v2 .rules_engines_elements_buttons_section button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1-5);
  border: none;
  color: white;
}

.ds-v2 .rules_engines_elements_buttons_section button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.3);
  box-shadow: none;
  transform: none;
}

.ds-v2 .rules_engines_elements_buttons_section button:disabled:hover {
  box-shadow: none;
  transform: none;
  filter: grayscale(0.3);
}

.ds-v2 .rules_engines_elements_buttons_section button .material-symbols-outlined {
  font-size: 18px;
}

/* --- Condition box key button (tune/wrench icon) --- */
.ds-v2 .update-box-parameters-btn {
  font-size: 18px !important;
  cursor: pointer;
  color: oklch(from var(--text-primary) l c h / .6);
  transition: color var(--transition-fast);
  vertical-align: middle;
  position: relative;
}

.ds-v2 .update-box-parameters-btn.fas {
  font-size: 12px !important;
  color: white;
}

.ds-v2 .update-box-parameters-btn.fas:hover {
  color: var(--gray-300);
}

.ds-v2 .box .update-box-parameters-btn {
  color: inherit;
}

.ds-v2 .update-box-parameters-btn:hover {
  color: var(--text-primary);
}

/* --- Word-level condition override indicator (dot on tune icon) --- */
.ds-v2 .update-box-parameters-btn.condition-override-active {
  position: relative;
}

.ds-v2 .update-box-parameters-btn.condition-override-active::after {
  content: '';
  position: absolute;
  top: 3px;
  right: -3px;
  width: 7px;
  height: 7px;
  background: #facc15;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.3);
}

/* --- Override notification dot (red circle) — line-level only --- */
.ds-v2 .override-dot {
  position: absolute;
  top: 5px;
  right: -1px;
  width: 7px;
  height: 7px;
  background: #EF4444;
  border-radius: 50%;
  pointer-events: none;
}

.ds-v2 #update-box-parameters,
.ds-v2 #update-words-dictionary-parameters {
  position: relative;
  display: inline-block;
}

/* --- Buttons inside box-parameters, condition-box-parameters and words-dictionary-parameters popups --- */
.ds-v2 .box-parameters button:not(.tooltip-trigger):not(.choices__button),
.ds-v2 .condition-box-parameters button:not(.tooltip-trigger):not(.choices__button),
.ds-v2 .words-dictionary-parameters button:not(.tooltip-trigger):not(.choices__button) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1-5) var(--space-3);
  border: 1px solid var(--border-primary);
  border-radius: var(--radius-md);
  background: var(--surface-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);
  margin-top: var(--space-2);
  margin-right: var(--space-1);
}

.ds-v2 .box-parameters button:not(.tooltip-trigger):not(.choices__button):hover,
.ds-v2 .condition-box-parameters button:not(.tooltip-trigger):not(.choices__button):hover,
.ds-v2 .words-dictionary-parameters button:not(.tooltip-trigger):not(.choices__button):hover {
  background: var(--surface-secondary);
  border-color: var(--gray-300);
}

.ds-v2 .box-parameters button[name="box-parameters-validate"],
.ds-v2 .condition-box-parameters button[name="condition-box-parameters-validate"],
.ds-v2 .words-dictionary-parameters button[name="words-dictionary-parameters-validate"] {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
}

.ds-v2 .box-parameters button[name="box-parameters-validate"]:hover,
.ds-v2 .condition-box-parameters button[name="condition-box-parameters-validate"]:hover,
.ds-v2 .words-dictionary-parameters button[name="words-dictionary-parameters-validate"]:hover {
  background: var(--brand-600);
  border-color: var(--brand-600);
}

.ds-v2 .condition-box-parameters .add-parameter-to-condition {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  background: var(--brand-500);
  color: white;
  font-weight: var(--weight-bold);
  cursor: pointer;
  border: none;
  font-size: var(--text-sm);
  transition: background var(--transition-fast);
}

.ds-v2 .condition-box-parameters .add-parameter-to-condition:hover {
  background: var(--brand-600);
}

/* --- Version tabs — uniform button height --- */
.ds-v2 #version-tabs > * {
  height: 34px;
}

.ds-v2 .version-tabs-group {
  height: 34px;
  align-items: center;
}

.ds-v2 .version-actions-group {
  height: 34px;
}

.ds-v2 .version-action-btn {
  height: 34px;
  box-sizing: border-box;
}

/* --- Dark mode card contrast — elevate cards above page bg --- */
[data-theme="dark"] .ds-v2 .card {
  background: var(--surface-elevated);
  border-color: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .ds-v2 .card-header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Popups in dark mode — elevated surface for contrast */
[data-theme="dark"] .ds-v2 .rules-engines-element-verify-popup-content,
[data-theme="dark"] .ds-v2 .rules-engines-branch-verify-popup-content,
[data-theme="dark"] .ds-v2 .examples-analyze-popup-content {
  background-color: var(--surface-elevated);
}

[data-theme="dark"] .ds-v2 .rules-engines-element-verify-popup-content > h2,
[data-theme="dark"] .ds-v2 .rules-engines-branch-verify-popup-content > h2 {
  background: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* --- Test dataset items — dark mode support --- */
[data-theme="dark"] .ds-v2 #test_dataset_li:not(.td-card) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  box-shadow: none;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Responsive */
@media (max-width: 1024px) {
  .ds-v2 .re-editor-panels,
  .ds-v2 .re-bottom-panels {
    flex-direction: column;
  }
}

/* --- Back to Top Button --- */
.ds-v2 .back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--surface-elevated);
  border: 1px solid var(--border-primary);
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  z-index: 55;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition:
    opacity var(--transition-base),
    transform var(--transition-base),
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.ds-v2 .back-to-top.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.ds-v2 .back-to-top:hover {
  background: var(--brand-500);
  color: white;
  border-color: var(--brand-500);
  box-shadow: var(--shadow-lg);
}

.ds-v2 .back-to-top .material-symbols-outlined {
  font-size: 20px;
}

@media (max-width: 768px) {
  .ds-v2 .back-to-top {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }
}

/* ===========================================================================
   Impersonation ("View as") banner
   Fixed bottom bar shown on every page while a super-admin is impersonating
   another user. Uses the warning token so it reads as an unmistakable
   temporary state; dark mode is handled automatically by the tokens.
   =========================================================================== */
.ds-v2 .impersonation-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-tooltip);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--warning);
  color: var(--gray-950);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.ds-v2 .impersonation-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.ds-v2 .impersonation-banner-text {
  flex: 1 1 auto;
  min-width: 0;
}

.ds-v2 .impersonation-banner-text strong {
  font-weight: var(--weight-bold);
}

.ds-v2 .impersonation-banner-form {
  margin: 0;
  flex-shrink: 0;
}

.ds-v2 .impersonation-banner-stop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  background: var(--gray-950);
  color: #fff;
  border: none;
}

.ds-v2 .impersonation-banner-stop:hover {
  background: var(--gray-800);
}

/* ---- Analyzer / laboratory: staged boot status + failure card ---- */

.ds-v2 .lab-boot-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  color: var(--text-secondary);
  font-size: var(--text-base);
}

.ds-v2 .lab-boot-spinner {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  border: 2px solid var(--border-secondary);
  border-top-color: var(--brand-500);
  border-radius: var(--radius-full);
  animation: lab-boot-spin 0.8s linear infinite;
}

@keyframes lab-boot-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .ds-v2 .lab-boot-spinner { animation: none; }
}

.ds-v2 .lab-failure-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.ds-v2 .lab-failure-title {
  font-weight: var(--weight-semibold);
}

.ds-v2 .lab-failure-message {
  color: var(--text-primary);
}

.ds-v2 .lab-failure-diag {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-tertiary);
  word-break: break-word;
}

.ds-v2 .lab-failure-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-1);
}