html[data-app-theme="dark"] {
  color-scheme: dark;

  --tx-bg: #0f1614;
  --tx-surface: #141e1a;
  --tx-surface-2: #1a2620;
  --tx-surface-3: #223029;
  --tx-surface-4: #2b3b33;

  --tx-ink: #e8f0ed;
  --tx-ink-2: #c2d2cb;
  --tx-muted: #8fa39c;
  --tx-faint: #6e827b;

  --tx-line: #24352e;
  --tx-line-soft: #1b2823;
  --tx-thead: #135441;
  --tx-thead-ink: #ffffff;
  --tx-accent: #10b981;
  --tx-accent-2: #34d399;
  --tx-accent-soft: #10281f;
  --tx-on-accent: #04241b;

  --primary: #10b981;
  --primary-rgb: 16, 185, 129;
  --primary-dark: #059669;

  --tx-shadow: 0 10px 30px rgba(0, 0, 0, .6);
  --tx-shadow-sm: 0 2px 10px rgba(0, 0, 0, .45);    

  --tx-icon-invert: invert(1) hue-rotate(180deg);

  --color-light-background: #223029;
  --color-header-background: #1a2620;
  --color-highlight: #10281f;

  --chart-ring-0: #6e827b;
  --chart-ring-25: #ff5b6b;
  --chart-ring-50: #ffc857;
  --chart-ring-75: #7bed9f;
  --chart-ring-100: #34d399;
  --chart-ring-track: #2b3b33;
}

/* 1. Base */

html[data-app-theme="dark"],
html[data-app-theme="dark"] body {
  background-color: var(--tx-bg);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .main,
html[data-app-theme="dark"] .main-content,
html[data-app-theme="dark"] .dashboader_banner {
  background: var(--tx-bg);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] hr {
  border-color: var(--tx-line);
  opacity: .7;
}

html[data-app-theme="dark"] a:not([class]) {
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] ::selection {
  background: var(--tx-accent);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] ::placeholder {
  color: var(--tx-faint);
  opacity: 1;
}

html[data-app-theme="dark"] ::-webkit-scrollbar-track {
  background: transparent;
  box-shadow: none;
}

html[data-app-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #4a534f;
}

html[data-app-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #5e6a65;
}

/* 2. Chrome / shell */

html[data-app-theme="dark"] .side_menu_bar {
  background:
    linear-gradient(180deg,
      rgba(16, 185, 129, .12) 0%,
      rgba(16, 185, 129, .04) 22%,
      rgba(16, 185, 129, 0) 55%),
    linear-gradient(180deg, #12201b 0%, #0d1714 40%, #0a120f 100%);
  border-right: 1px solid var(--tx-line-soft);
}

html[data-app-theme="dark"] .dashboard_heading {
  border-bottom-color: var(--tx-line);
  background: transparent;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #overlay_loader {
  background: var(--tx-bg);
  color: var(--tx-accent);
}

html[data-app-theme="dark"] #overlay_loader .spinner video {
  filter: invert(1) hue-rotate(180deg);
  mix-blend-mode: screen;
}

html[data-app-theme="dark"] .notification_bell_icon {
  background: var(--tx-surface-3);
}

html[data-app-theme="dark"] .notification_box a i {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .notification-item {
  background: rgba(52, 211, 153, .12);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .notification-time,
html[data-app-theme="dark"] .notification-user {
  color: var(--tx-muted);
}

/* 3. The theme toggle itself */

.theme_toggle_btn {
  background: #f5f5f5;
  border: none;
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50px;
  /* inline-flex, not flex, so the button drops into inline action rows
   * (.float-end and friends) and sits on the same line as their buttons. */
  display: inline-flex;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  color: #606060;
  transition: background .2s ease, color .2s ease;
}

.theme_toggle_btn:hover {
  background: #e6efee;
  color: #0b5f5c;
}

.theme_toggle_btn svg {
  width: 18px;
  height: 18px;
  display: block;
}

[data-theme-toggle] .theme_icon_moon { display: block; }
[data-theme-toggle] .theme_icon_sun { display: none; }

html[data-app-theme="dark"] .theme_toggle_btn {
  background: var(--tx-surface-3);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .theme_toggle_btn:hover {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] [data-theme-toggle] .theme_icon_moon { display: none; }
html[data-app-theme="dark"] [data-theme-toggle] .theme_icon_sun { display: block; }

.modal-header.switch-bg .theme_toggle_btn,
html[data-app-theme="dark"] .modal-header.switch-bg .theme_toggle_btn {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.modal-header.switch-bg .theme_toggle_btn:hover,
html[data-app-theme="dark"] .modal-header.switch-bg .theme_toggle_btn:hover {
  background: rgba(255, 255, 255, .32);
  color: #fff;
}

.theme_toggle_host {
  display: none;
}

[data-theme-toggle-slot] {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
}

.theme_toggle_host.is_pinned {
  display: block;
  position: fixed;
  top: 18px;
  right: 30px;
  z-index: 1030;
}

.theme_toggle_host.is_pinned .theme_toggle_btn {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* 4. Bootstrap surfaces */

html[data-app-theme="dark"] .card,
html[data-app-theme="dark"] .list-group-item,
html[data-app-theme="dark"] .accordion-item,
html[data-app-theme="dark"] .offcanvas,
html[data-app-theme="dark"] .modal-content {
  background-color: var(--tx-surface);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .card-header,
html[data-app-theme="dark"] .card-footer,
html[data-app-theme="dark"] .modal-header,
html[data-app-theme="dark"] .modal-footer,
html[data-app-theme="dark"] .offcanvas-header {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-action:focus {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .list-group-item.active {
  background-color: var(--tx-accent-soft);
  border-color: var(--tx-accent);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dropdown-menu {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .dropdown-item {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dropdown-item:hover,
html[data-app-theme="dark"] .dropdown-item:focus {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dropdown-item.active,
html[data-app-theme="dark"] .dropdown-item:active {
  background-color: var(--tx-accent);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] .dropdown-divider {
  border-top-color: var(--tx-line);
  background-color: var(--tx-line);
}

html[data-app-theme="dark"] .accordion-button {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .accordion-button:not(.collapsed) {
  background-color: var(--tx-accent-soft);
  color: var(--tx-accent-2);
  box-shadow: inset 0 -1px 0 var(--tx-line);
}

html[data-app-theme="dark"] .accordion-body {
  background-color: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .accordion-button::after,
html[data-app-theme="dark"] .navbar-toggler-icon,
html[data-app-theme="dark"] .carousel-control-prev-icon,
html[data-app-theme="dark"] .carousel-control-next-icon {
  filter: invert(1) brightness(1.8);
}

html[data-app-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(2);
}

html[data-app-theme="dark"] .modal-backdrop.show {
  opacity: .72;
}

html[data-app-theme="dark"] .nav-tabs {
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .nav-tabs .nav-link {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .nav-tabs .nav-link:hover {
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .nav-tabs .nav-link.active {
  background-color: var(--tx-surface);
  border-color: var(--tx-line) var(--tx-line) var(--tx-surface);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .nav-pills .nav-link {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .page-link {
  background-color: var(--tx-surface-2);
  border-color: var(--tx-line);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .page-item.disabled .page-link {
  background-color: var(--tx-surface);
  color: var(--tx-faint);
}

html[data-app-theme="dark"] .progress {
  background-color: var(--tx-surface-3);
}

html[data-app-theme="dark"] .popover {
  background-color: var(--tx-surface-3);
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .popover-header {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .popover-body {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .toast {
  background-color: rgba(34, 34, 34, .96);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .toast-header {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .bg-white,
html[data-app-theme="dark"] .bg-light {
  background-color: var(--tx-surface-2) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .bg-highlight,
html[data-app-theme="dark"] .bg-not-attached {
  background: var(--tx-surface-3) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .text-dark:not([class*="bg-"]),
html[data-app-theme="dark"] .text-black:not([class*="bg-"]),
html[data-app-theme="dark"] .text-body:not([class*="bg-"]) {
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .text-muted,
html[data-app-theme="dark"] .text-secondary {
  color: var(--tx-muted) !important;
}

html[data-app-theme="dark"] .border,
html[data-app-theme="dark"] .border-top,
html[data-app-theme="dark"] .border-end,
html[data-app-theme="dark"] .border-bottom,
html[data-app-theme="dark"] .border-start {
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] .alert-light,
html[data-app-theme="dark"] .alert-secondary {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .alert-warning {
  background-color: transparent !important;
  color: var(--tx-ink) !important;
  border-color: var(--tx-surface-4) !important;
}

html[data-app-theme="dark"] .alert-warning strong {
  color: #f5c451;
}

html[data-app-theme="dark"] .alert-info {
  background-color: #0d2f3a;
  color: #9fe4f2;
  border-color: #17505f;
}

html[data-app-theme="dark"] .alert-success {
  background-color: #0f3524;
  color: #a9e8c6;
  border-color: #1d5a3c;
}

html[data-app-theme="dark"] .alert-danger {
  background-color: #3c1518;
  color: #f5b0b5;
  border-color: #6d262c;
}

html[data-app-theme="dark"] .btn:not(.btn-primary):not(.btn-secondary):not(.btn-success):not(.btn-danger):not(.btn-warning):not(.btn-info):not(.btn-light):not(.btn-dark):not(.btn-link):not(.btn-close):not(.btn-default):not([class*="btn-outline"]) {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .btn-outline-secondary {
  color: var(--tx-ink-2);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .btn-outline-secondary:hover {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .btn-outline-dark {
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .btn-outline-dark:hover {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .btn-light,
html[data-app-theme="dark"] .btn-outline-light {
  color: var(--tx-ink);
  background-color: var(--tx-surface-3);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .btn-light:hover,
html[data-app-theme="dark"] .btn-outline-light:hover {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .btn-secondary {
  background-color: var(--tx-surface-4);
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .my_button_2 {
  background-color: var(--tx-surface-2) !important;
  color: var(--tx-ink-2) !important;
  border-color: var(--tx-line) !important;
  box-shadow: none;
}

html[data-app-theme="dark"] .my_button_2:hover {
  background-color: var(--tx-surface-4) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .readonly {
  background: var(--tx-surface-3) !important;
  color: var(--tx-muted) !important;
}

/* 4b. Pastel status fills */

html[data-app-theme="dark"] .bg-success,
html[data-app-theme="dark"] .bg-locked,
html[data-app-theme="dark"] .bg-verified,
html[data-app-theme="dark"] .bg-selected,
html[data-app-theme="dark"] .bg-error,
html[data-app-theme="dark"] .bg-muted,
html[data-app-theme="dark"] span.upload_failed,
html[data-app-theme="dark"] span.conversion_failed,
html[data-app-theme="dark"] span.pre_processing_failed,
html[data-app-theme="dark"] p.upload_failed,
html[data-app-theme="dark"] p.conversion_failed,
html[data-app-theme="dark"] p.pre_processing_failed,
html[data-app-theme="dark"] .selected-item,
html[data-app-theme="dark"] .tree-view [class^="FL"] button,
html[data-app-theme="dark"] .legend-table [class^="FL"] {
  color: #16181a !important;
  --tx-icon-invert: none;
}

html[data-app-theme="dark"] .tree-view .toggle-container {
  color: var(--tx-ink) !important;
}


html[data-app-theme="dark"] .annotations_table_container tr.annotated_rows.changed {
  --row-rgb: 103, 232, 249;
}

html[data-app-theme="dark"] .annotations_table_container tr.annotated_rows.bg-verified {
  --row-rgb: 52, 211, 153;
}

html[data-app-theme="dark"] .annotations_table_container tr.annotated_rows.bg-locked {
  --row-rgb: 245, 196, 81;
}

html[data-app-theme="dark"] .annotations_table_container tr.annotated_rows.changed,
html[data-app-theme="dark"] .annotations_table_container tr.annotated_rows.bg-verified,
html[data-app-theme="dark"] .annotations_table_container tr.annotated_rows.bg-locked {
  background: rgba(var(--row-rgb), .10) !important;
  color: var(--tx-ink) !important;
  --tx-icon-invert: invert(1) hue-rotate(180deg);
}

html[data-app-theme="dark"] .delete,
html[data-app-theme="dark"] .equipment_accordian_right .delete_btn {
  background: #3c1518;
}

html[data-app-theme="dark"] .download_design {
  background: var(--tx-accent-soft);
  color: var(--tx-ink);
}

/* 4c. Dashboard KPI tiles */

html[data-app-theme="dark"] .dashboard_tile { --tile: 52, 211, 153; }
html[data-app-theme="dark"] .digitize { --tile: 96, 165, 250; }
html[data-app-theme="dark"] .digitize.verified_drawing { --tile: 192, 132, 252; }
html[data-app-theme="dark"] .identify { --tile: 251, 191, 36; }
html[data-app-theme="dark"] .parent { --tile: 163, 230, 53; }
html[data-app-theme="dark"] .total { --tile: 251, 146, 60; }
html[data-app-theme="dark"] .unmapped_assets { --tile: 251, 113, 133; }

html[data-app-theme="dark"] .project,
html[data-app-theme="dark"] .digitize,
html[data-app-theme="dark"] .digitize.verified_drawing,
html[data-app-theme="dark"] .identify,
html[data-app-theme="dark"] .parent,
html[data-app-theme="dark"] .total,
html[data-app-theme="dark"] .unmapped_assets {
  color: var(--tx-ink);
  background:
    linear-gradient(140deg,
      rgba(var(--tile), .17) 0%,
      rgba(var(--tile), .06) 42%,
      rgba(var(--tile), .02) 100%),
    var(--tx-surface);
  border-color: rgba(var(--tile), .22);
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .45),
    0 12px 26px -16px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

html[data-app-theme="dark"] .dashboard_tile:hover {
  transform: translateY(-2px);
  border-color: rgba(var(--tile), .40);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .5),
    0 20px 38px -18px rgba(0, 0, 0, 1),
    0 0 22px -10px rgba(var(--tile), .45),
    inset 0 1px 0 rgba(255, 255, 255, .07);
}

html[data-app-theme="dark"] .dashboard_tile .project_img {
  background: linear-gradient(140deg, rgba(var(--tile), .30), rgba(var(--tile), .12));
  border-color: rgba(var(--tile), .32);
  box-shadow:
    0 6px 14px -6px rgba(var(--tile), .40),
    inset 0 1px 0 rgba(255, 255, 255, .08);
}

html[data-app-theme="dark"] .dashboard_tile .project_img img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

html[data-app-theme="dark"] .dashboard_tile .project_number h3,
html[data-app-theme="dark"] .dashboard_tile .project_number h4 {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .project p,
html[data-app-theme="dark"] .digitize p,
html[data-app-theme="dark"] .parent p,
html[data-app-theme="dark"] .identify p,
html[data-app-theme="dark"] .total p,
html[data-app-theme="dark"] .unmapped_assets p {
  color: var(--tx-muted);
}

/* 5. Forms */

html[data-app-theme="dark"] .form-control,
html[data-app-theme="dark"] .form-select,
html[data-app-theme="dark"] textarea,
html[data-app-theme="dark"] input[type="text"],
html[data-app-theme="dark"] input[type="search"],
html[data-app-theme="dark"] input[type="email"],
html[data-app-theme="dark"] input[type="password"],
html[data-app-theme="dark"] input[type="number"],
html[data-app-theme="dark"] input[type="tel"],
html[data-app-theme="dark"] input[type="url"],
html[data-app-theme="dark"] input[type="date"],
html[data-app-theme="dark"] input[type="datetime-local"],
html[data-app-theme="dark"] select {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .form-control:focus,
html[data-app-theme="dark"] .form-select:focus,
html[data-app-theme="dark"] select:focus,
html[data-app-theme="dark"] textarea:focus {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-accent);
}

html[data-app-theme="dark"] .form-control:disabled,
html[data-app-theme="dark"] .form-control[readonly],
html[data-app-theme="dark"] .form-select:disabled {
  background-color: var(--tx-surface);
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23bed3c9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

html[data-app-theme="dark"] select option {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .input-group-text {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .form-check-input {
  background-color: var(--tx-surface-2);
  border-color: var(--tx-muted);
}

html[data-app-theme="dark"] .form-check-input:checked {
  background-color: var(--tx-accent);
  border-color: var(--tx-accent);
}

html[data-app-theme="dark"] .form-switch .form-check-input {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23c2d2cb'/%3e%3c/svg%3e");
}

html[data-app-theme="dark"] .form-switch .form-check-input:focus,
html[data-app-theme="dark"] .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/%3e%3c/svg%3e");
}

html[data-app-theme="dark"] .form-label,
html[data-app-theme="dark"] .form-check-label,
html[data-app-theme="dark"] .col-form-label {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .annotation-complete {
  background: var(--tx-accent-soft);
  box-shadow: inset 0 0 0 1px var(--tx-accent);
}

html[data-app-theme="dark"] .annotation-complete .form-check-label {
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .r6o-editor .form-check-label,
html[data-app-theme="dark"] #positionCheckboxGroup .form-check-label {
  color: inherit;
}

html[data-app-theme="dark"] .form-text {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] input[type="range"] {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .new-input {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .new-input-font,
html[data-app-theme="dark"] .d-board_box span a,
html[data-app-theme="dark"] .hover-black:hover {
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .internal_testing_list,
html[data-app-theme="dark"] .table_item_icons ul,
html[data-app-theme="dark"] .table_item_section,
html[data-app-theme="dark"] .legend-table ul,
html[data-app-theme="dark"] .internal_testing_list_search input,
html[data-app-theme="dark"] .internal_testing_list_select select,
html[data-app-theme="dark"] .internal_testing_list_select input {
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .internal_testing_list_search input,
html[data-app-theme="dark"] .internal_testing_list_select .date_icon,
html[data-app-theme="dark"] .project_super_name,
html[data-app-theme="dark"] .project_sub_name,
html[data-app-theme="dark"] .table_item_box_heading p {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .sub-checklist,
html[data-app-theme="dark"] .sub-checklist li::before,
html[data-app-theme="dark"] .top-text-light,
html[data-app-theme="dark"] .icons i,
html[data-app-theme="dark"] .edit-actions i {
  color: var(--tx-muted);
}

/* 6. Tables */

html[data-app-theme="dark"] table {
  background-color: var(--tx-surface);
  color: var(--tx-ink);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .35),
    0 12px 28px -20px rgba(0, 0, 0, .9);
}

html[data-app-theme="dark"] .table {
  color: var(--tx-ink);
  border-color: var(--tx-line);
  --bs-table-striped-color: var(--tx-ink);
  --bs-table-striped-bg: rgba(255, 255, 255, .045);
  --bs-table-active-color: var(--tx-ink);
  --bs-table-active-bg: rgba(255, 255, 255, .08);
  --bs-table-hover-color: var(--tx-ink);
  --bs-table-hover-bg: rgba(255, 255, 255, .07);
}

html[data-app-theme="dark"] .table > :not(caption) > * > * {
  background-color: transparent;
  border-bottom-color: transparent;
  color: inherit;
}

html[data-app-theme="dark"] tbody tr:nth-child(even) {
  background-color: var(--tx-surface-2);
}

html[data-app-theme="dark"] tbody tr:hover {
  background-color: var(--tx-surface-4);
}

html[data-app-theme="dark"] th,
html[data-app-theme="dark"] td {
  border-color: transparent;
}

html[data-app-theme="dark"] .table-bordered > :not(caption) > * > * {
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] tbody tr {
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .table-primary,
html[data-app-theme="dark"] .table-secondary,
html[data-app-theme="dark"] .table-info {
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .table > :not(caption) > .table-primary > *,
html[data-app-theme="dark"] .table > :not(caption) > .table-info > * {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .table > :not(caption) > .table-secondary > * {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] thead,
html[data-app-theme="dark"] .table-sticky thead th {
  background-color: var(--tx-thead);
  color: var(--tx-thead-ink);
  box-shadow: inset 0 -1px 0 var(--tx-line);
}

html[data-app-theme="dark"] tr.selected_project,
html[data-app-theme="dark"] .dashboard_project_line.selected_project {
  background: var(--tx-accent-soft) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dataTables_wrapper,
html[data-app-theme="dark"] .dataTables_info,
html[data-app-theme="dark"] .dataTables_length,
html[data-app-theme="dark"] .dataTables_filter,
html[data-app-theme="dark"] .dataTables_processing,
html[data-app-theme="dark"] .dt-info,
html[data-app-theme="dark"] .dt-length,
html[data-app-theme="dark"] .dt-search {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dataTables_processing {
  background: var(--tx-surface-3);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dataTables_paginate .page-item .page-link,
html[data-app-theme="dark"] .dataTables_paginate .page-item.previous .page-link,
html[data-app-theme="dark"] .dataTables_paginate .page-item.next .page-link {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dataTables_paginate .page-item.previous .page-link::before,
html[data-app-theme="dark"] .dataTables_paginate .page-item.next .page-link::before {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dataTables_paginate .page-item.previous .page-link,
html[data-app-theme="dark"] .dataTables_paginate .page-item.next .page-link {
  background: none;
}

html[data-app-theme="dark"] .dataTables_paginate .page-item.active .page-link {
  background-color: var(--tx-accent);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] #pagination_pages .btn {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

/* 7. Third-party widgets */

html[data-app-theme="dark"] .select2-container--default .select2-selection--single,
html[data-app-theme="dark"] .select2-container--default .select2-selection--multiple,
html[data-app-theme="dark"] .select2-dropdown,
html[data-app-theme="dark"] .select2-search--dropdown .select2-search__field {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .select2-container--default .select2-selection--single .select2-selection__rendered,
html[data-app-theme="dark"] .select2-results__option {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--tx-accent);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: var(--tx-accent-soft);
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .ui-widget-content,
html[data-app-theme="dark"] .ui-widget.ui-widget-content,
html[data-app-theme="dark"] .ui-menu,
html[data-app-theme="dark"] .ui-datepicker {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .ui-widget-header {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .ui-menu .ui-menu-item-wrapper,
html[data-app-theme="dark"] .ui-state-default,
html[data-app-theme="dark"] .ui-widget-content .ui-state-default {
  background: transparent;
  color: var(--tx-ink);
  border-color: transparent;
}

html[data-app-theme="dark"] .ui-menu .ui-menu-item-wrapper.ui-state-active,
html[data-app-theme="dark"] .ui-state-hover,
html[data-app-theme="dark"] .ui-state-active {
  background: var(--tx-accent);
  color: var(--tx-on-accent);
  border-color: var(--tx-accent);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box .jconfirm-title,
html[data-app-theme="dark"] .jconfirm .jconfirm-box .jconfirm-content,
html[data-app-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-closeIcon {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box .popup_no_force {
  background-color: var(--tx-surface-4) !important;
  color: var(--tx-ink) !important;
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] .dropzone {
  background: var(--tx-surface-2);
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dropzone .dz-message {
  color: var(--tx-ink-2);
}

/* 8. Dashboard / project pages */

html[data-app-theme="dark"] .project_item_box,
html[data-app-theme="dark"] .dashboard_inner,
html[data-app-theme="dark"] .top_info {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .eye,
html[data-app-theme="dark"] .internal_testing_box_3,
html[data-app-theme="dark"] .internal_testing_box_img_2,
html[data-app-theme="dark"] .internal_testing_box_img_3 {
  background: var(--tx-surface-3);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .internal_testing_box_circle_2,
html[data-app-theme="dark"] .internal_testing_box_circle_4,
html[data-app-theme="dark"] .internal_testing_box_circle_5,
html[data-app-theme="dark"] .internal_testing_box_circle_6 {
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] .project_progress_steps fieldset {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .search-overlay {
  background: rgba(15, 22, 20, .95);
}

html[data-app-theme="dark"] .erp-sidebar {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .erp-sidebar-header {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .erp-pill-tabs {
  background: var(--tx-surface-3);
}

html[data-app-theme="dark"] .erp-pill {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .erp-pill:hover {
  background: rgba(255, 255, 255, .07);
}

html[data-app-theme="dark"] .json-viewer {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .json-toggle { color: var(--tx-muted); }
html[data-app-theme="dark"] .json-key { color: #6fd7e8; }
html[data-app-theme="dark"] .json-value.string { color: #7fd6a8; }
html[data-app-theme="dark"] .json-value.number { color: #8ab6f5; }
html[data-app-theme="dark"] .json-value.boolean { color: #f0a06a; }
html[data-app-theme="dark"] .json-value.null { color: var(--tx-muted); }
html[data-app-theme="dark"] .json-brace { color: var(--tx-ink-2); }
html[data-app-theme="dark"] .json-comma { color: var(--tx-muted); }

html[data-app-theme="dark"] .switch-toggle {
  background-color: var(--tx-surface-3);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .switch-toggle-slider {
  background-color: var(--tx-surface-4);
  box-shadow: inset 0 0 0 1px var(--tx-line);
}

html[data-app-theme="dark"] .switch-toggle-labels span {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .drawing-type-selector-trigger {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
  box-shadow: none;
}

html[data-app-theme="dark"] .drawing-type-selector-menu {
  background: var(--tx-surface-3);
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .drawing-type-selector-header,
html[data-app-theme="dark"] .drawing-type-selector-arrow {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .drawing-type-option {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .drawing-type-option:hover,
html[data-app-theme="dark"] .drawing-type-option:focus {
  background: var(--tx-surface-4);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .drawing-type-option.active {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .user_filter_icon_wrap {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .detected-by-filter-menu {
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .row-actions-trigger {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .row-actions-trigger:hover,
html[data-app-theme="dark"] .row-actions-trigger.show {
  background: var(--tx-surface-4);
  border-color: var(--tx-line);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .row-actions-menu {
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .row-actions-menu .dropdown-item,
html[data-app-theme="dark"] .row-actions-menu .dropdown-item span {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .row-actions-menu .dropdown-item:hover {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .drawing-bin-columns-trigger {
  background: var(--tx-surface-3);
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] thead .column-picker-cell .drawing-bin-columns-trigger {
  background: transparent;
  border-color: transparent;
  color: var(--tx-thead-ink);
}

html[data-app-theme="dark"] thead .column-picker-cell .drawing-bin-columns-trigger:hover,
html[data-app-theme="dark"] thead .column-picker-cell .drawing-bin-columns-trigger.show {
  background: rgba(255, 255, 255, .16);
  border-color: transparent;
  color: #ffffff;
}

html[data-app-theme="dark"] .drawing-bin-columns-trigger:hover,
html[data-app-theme="dark"] .drawing-bin-columns-trigger.show {
  background: var(--tx-surface-4);
  border-color: var(--tx-accent);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .drawing-bin-columns-menu {
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .drawing-bin-columns-header,
html[data-app-theme="dark"] .drawing-bin-columns-footer {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .drawing-bin-column-option {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .drawing-bin-column-option:hover {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .drawing-bin-columns-count {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .drawing-bin-columns-count.is-full {
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .detected-by-filter-header,
html[data-app-theme="dark"] .detected-by-filter-footer {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .detected-by-filter-option,
html[data-app-theme="dark"] .detected-by-user-name {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .detected-by-filter-option:hover,
html[data-app-theme="dark"] .detected-by-filter-option.is-selected {
  background: var(--tx-surface-4);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .detected-by-filter-empty-state {
  background: var(--tx-surface-2);
  color: var(--tx-muted);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .detected-by-filter-empty-state p,
html[data-app-theme="dark"] .detected-by-filter-empty-state span,
html[data-app-theme="dark"] .detected-by-filter-empty-state i {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .detected-by-user-toggle.exclude {
  background: var(--tx-surface-4);
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .detected-by-user-toggle.include {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .assignee-trigger {
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .assignee-trigger.is-empty {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .assignee-trigger:hover,
html[data-app-theme="dark"] .assignee-trigger.is-open {
  background: var(--tx-surface-4);
  border-color: var(--tx-line);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .assignee-menu {
  background: var(--tx-surface);
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .assignee-menu-header {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .assignee-option,
html[data-app-theme="dark"] .assignee-option-name {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .assignee-option:hover,
html[data-app-theme="dark"] .assignee-option.is-selected {
  background: var(--tx-surface-4);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .assignee-option-remove {
  background: var(--tx-surface-3);
  color: #ef8b8b;
}

html[data-app-theme="dark"] .assignee-option-remove:hover {
  background: #ef6b6b;
  color: #ffffff;
}

/* 9. Drawing board */

html[data-app-theme="dark"] .cross-drawing-viewer-shell {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .cross-drawing-viewer-header {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .cross-drawing-viewer-title,
html[data-app-theme="dark"] .symbols_data_lounge_header h3,
html[data-app-theme="dark"] .symbols_data_lounge_header p,
html[data-app-theme="dark"] .symbols_data_lounge_header p span,
html[data-app-theme="dark"] .dexpi-lounge-title,
html[data-app-theme="dark"] .dexpi-kv .dexpi-v,
html[data-app-theme="dark"] .line-lounge-line-btn,
html[data-app-theme="dark"] .drawing-document-viewer-title,
html[data-app-theme="dark"] .deleted-symbol-name,
html[data-app-theme="dark"] .engineering_tap_box_item ul > li > button {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .cross-drawing-viewer-kicker,
html[data-app-theme="dark"] .cross-drawing-viewer-meta,
html[data-app-theme="dark"] .cross-drawing-nav-status,
html[data-app-theme="dark"] .dexpi-object-secondary,
html[data-app-theme="dark"] .dexpi-kv .dexpi-k,
html[data-app-theme="dark"] .drawing-document-viewer-label,
html[data-app-theme="dark"] .deleted-symbol-tags,
html[data-app-theme="dark"] .ungrouped_icon i {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .shadow_tab li button.active,
html[data-app-theme="dark"] .toolbar-deleted-items-btn,
html[data-app-theme="dark"] .toolbar-deleted-items-btn i,
html[data-app-theme="dark"] #toolbar-deleted-items.active .toolbar-deleted-items-btn {
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] #symbol-studio-tabs .nav-link.active {
  background-color: var(--tx-surface) !important;
  color: var(--tx-ink) !important;
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] .ungrouped_box_div,
html[data-app-theme="dark"] .deleted-symbol-item,
html[data-app-theme="dark"] .deleted-symbol-preview,
html[data-app-theme="dark"] .deleted-line-preview,
html[data-app-theme="dark"] .dexpi-accordion .accordion-item,
html[data-app-theme="dark"] .dexpi-inner-accordion .accordion-item,
html[data-app-theme="dark"] .dexpi-sub-accordion .accordion-item,
html[data-app-theme="dark"] #accordionLineLounge .accordion-item.line-lounge-item,
html[data-app-theme="dark"] .dexpi-object-button {
  background: var(--tx-surface);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dexpi-accordion .accordion-body,
html[data-app-theme="dark"] .dexpi-accordion .dexpi-group-body,
html[data-app-theme="dark"] .dexpi-object-body {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .line-lounge-symbols .line-lounge-symbol:hover {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .graph-error-box {
  background: #3c1518;
  color: #f5b0b5;
  border-color: #6d262c;
}

html[data-app-theme="dark"] .graph-error-title { color: #ffb4b4; }
html[data-app-theme="dark"] .graph-error-msg { color: #f0a8a8; }
html[data-app-theme="dark"] .dexpi-sub-title { color: var(--tx-accent-2); }

html[data-app-theme="dark"] .jconfirm.text-mass-update-dialog .jconfirm-box {
  background: var(--tx-surface-3);
}

html[data-app-theme="dark"] .jconfirm.text-mass-update-dialog .jconfirm-box div.jconfirm-title-c {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm.text-mass-update-dialog .jconfirm-box div.jconfirm-closeIcon {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .nav-link.active {
  background-color: var(--tx-surface);
}

html[data-app-theme="dark"] .text-mass-update-divider::before,
html[data-app-theme="dark"] .text-mass-update-divider::after {
  background: var(--tx-line);
}

html[data-app-theme="dark"] .split-type-picker {
  background-color: var(--tx-surface-3);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .split-type-picker label {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .split-type-picker input:checked + label {
  color: #ffffff;
}

/* 9b. Annotation / redlining workspace */

html[data-app-theme="dark"] #toolbarDiv,
html[data-app-theme="dark"] .annotation-mode-toggle,
html[data-app-theme="dark"] .chat-box,
html[data-app-theme="dark"] .automate-upload-dropzone,
html[data-app-theme="dark"] .automate-upload-dropzone.has-file,
html[data-app-theme="dark"] #automated_accordion_section .accordion-body,
html[data-app-theme="dark"] #classified_accordion_section .accordion-body,
html[data-app-theme="dark"] #accordionTextLibrary .groupHeader,
html[data-app-theme="dark"] #textReviewPanel .review-bucket-header,
html[data-app-theme="dark"] #textReviewPanel .review-validated-track {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .chatbot-panel,
html[data-app-theme="dark"] .redlining-select-symbol,
html[data-app-theme="dark"] .item-notes-extension,
html[data-app-theme="dark"] .automated-symbol-card,
html[data-app-theme="dark"] #textReviewPanel .textReviewBucket {
  background: var(--tx-surface);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .automate-upload-dropzone:hover,
html[data-app-theme="dark"] .automate-upload-dropzone.is-dragover,
html[data-app-theme="dark"] .automated-symbol-card:hover,
html[data-app-theme="dark"] .automated-symbol-card.is-active,
html[data-app-theme="dark"] #accordionTextLibrary .groupHeader.completed,
html[data-app-theme="dark"] #accordionTextLibrary tbody tr.annotated_rows:hover,
html[data-app-theme="dark"] #textReviewPanel .text-review-finding:hover {
  background: var(--tx-accent-soft);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .user-message {
  background: #16302a;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .bot-message {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #pills-texts .symbols_data_search_box input,
html[data-app-theme="dark"] #pills-texts .symbols_data_search_box input:focus,
html[data-app-theme="dark"] #accordionTextLibrary input.parent-group:focus {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #textLoungeAccordian::-webkit-scrollbar-thumb {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .redlining-tag-line,
html[data-app-theme="dark"] #toolbar-redlining-visibility .toolbar-redlining-label,
html[data-app-theme="dark"] .automated-symbol-patch,
html[data-app-theme="dark"] #pills-texts .symbols_data_lounge_header h3 {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .automated-symbol-sub {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .automated-symbol-cat {
  color: var(--tx-accent, #67e8f9);
}

/* 10. Symbol studio pages */

html[data-app-theme="dark"] #symbol_table_selected_symbols .selected-symbol-angle {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .dxf-icon-btn {
  background: var(--tx-surface-3);
  border-color: var(--tx-line);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .dxf-icon-btn.dxf-clear-btn {
  color: #f5b0b5;
}

html[data-app-theme="dark"] .actions i.delete,
html[data-app-theme="dark"] .nomenclature_del {
  background: #3c1518;
  color: #f5b0b5;
}

html[data-app-theme="dark"] .fluid-code-empty-state,
html[data-app-theme="dark"] .abbreviation-code-empty-state {
  background: var(--tx-surface-2);
  border-color: var(--tx-line);
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .custom-tabs,
html[data-app-theme="dark"] .custom-tabs .nav-link,
html[data-app-theme="dark"] .key_vale_info,
html[data-app-theme="dark"] .fluid-code-search,
html[data-app-theme="dark"] .abbreviation-code-search,
html[data-app-theme="dark"] .nomenclature_btn,
html[data-app-theme="dark"] .fluid-code-toolbar {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .equipment_accordian .accordion-item,
html[data-app-theme="dark"] .equipment_accordian .accordion-button,
html[data-app-theme="dark"] .primary-code-container #accordionFluidCodes .accordion-item,
html[data-app-theme="dark"] .abbreviation-code-container #accordionAbbreviationCodes .accordion-item {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .primary-code-container .input-block,
html[data-app-theme="dark"] .abbreviation-code-container .input-block {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .toggle-switch,
html[data-app-theme="dark"] .toggle-switch-2 {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .toggle-switch .slider {
  background: var(--tx-ink);
}

html[data-app-theme="dark"] .toggle-switch span,
html[data-app-theme="dark"] .fluid-toolbar-icon,
html[data-app-theme="dark"] .accordion.equipment_accordian .accordion-button::after {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .toggle-switch input:checked ~ .no,
html[data-app-theme="dark"] .toggle-switch input:not(:checked) ~ .yes,
html[data-app-theme="dark"] .timestamp,
html[data-app-theme="dark"] .timestamp strong,
html[data-app-theme="dark"] .add_symbol_symbol_tab_item_text h3,
html[data-app-theme="dark"] .add_symbol_internal_testing_heading_text h3,
html[data-app-theme="dark"] .annotate_first_2_drop h2,
html[data-app-theme="dark"] .annotate_last_drop h2,
html[data-app-theme="dark"] .equipment_accordian_right a,
html[data-app-theme="dark"] .accoridian_btn2,
html[data-app-theme="dark"] .symbol_tab_label,
html[data-app-theme="dark"] .nomenclature_select,
html[data-app-theme="dark"] .angle-select select,
html[data-app-theme="dark"] .fluid-filter-select,
html[data-app-theme="dark"] .primary-code-container .corrosion-check .form-check-label,
html[data-app-theme="dark"] .equipment_table .internal_testing_list_select select,
html[data-app-theme="dark"] .equipment_table .internal_testing_list_select input,
html[data-app-theme="dark"] .equipment_table input::placeholder {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .selected-symbol-category .tagify__tag-text,
html[data-app-theme="dark"] .selected-line-category .tagify__tag-text {
  color: var(--tx-ink) !important;
}

/* 11. Global search */

html[data-app-theme="dark"] .view {
  background: var(--tx-bg);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tile,
html[data-app-theme="dark"] .tile.has-data,
html[data-app-theme="dark"] .tile.no-data,
html[data-app-theme="dark"] .search-item {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .global-search-box {
  background: var(--tx-surface-2);
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] .global-search-box input {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .tooltip-trigger {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

/* 12. DXF validation */

html[data-app-theme="dark"] #dxf_validation-container,
html[data-app-theme="dark"] .dxf-validation-drawer,
html[data-app-theme="dark"] .dxf-validation-drawer-footer,
html[data-app-theme="dark"] .dxf-validation-trace-popover,
html[data-app-theme="dark"] .dxf-validation-symbol-hotspot,
html[data-app-theme="dark"] .dxf-validation-symbol-card-row,
html[data-app-theme="dark"] .dxf-validation-score-ring::before,
html[data-app-theme="dark"] .dxf-validation-symbol-preview {
  background: var(--tx-surface);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-score-ring {
  color: var(--tx-ink);
  background: conic-gradient(var(--ring-color) calc(var(--score) * 1%), var(--tx-surface-4) 0);
}

html[data-app-theme="dark"] .dxf-validation-side-rail,
html[data-app-theme="dark"] .dxf-validation-bar {
  background: var(--tx-surface-3);
}

html[data-app-theme="dark"] .dxf-validation-drawer.open::-webkit-scrollbar-track {
  background: transparent;
}

html[data-app-theme="dark"] .dxf-validation-drawer.open::-webkit-scrollbar-thumb {
  background: #4a534f;
}

/* Only the .open/:hover/.selected states below were covered; the resting group
   header and its rows kept their light ink and near-white separators. */
html[data-app-theme="dark"] .dxf-validation-layer-heading {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dxf-validation-layer-item {
  color: var(--tx-ink);
  border-top-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-accordion.open > .dxf-validation-section-title,
html[data-app-theme="dark"] .dxf-validation-layer-group.open .dxf-validation-layer-heading,
html[data-app-theme="dark"] .dxf-validation-layer-item:hover,
html[data-app-theme="dark"] .dxf-validation-layer-item.selected {
  background: var(--tx-accent-soft);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dxf-validation-metrics,
html[data-app-theme="dark"] .dxf-validation-popover-label,
html[data-app-theme="dark"] .dxf-validation-opacity-row span,
html[data-app-theme="dark"] .dxf-validation-check,
html[data-app-theme="dark"] .dxf-validation-kicker,
html[data-app-theme="dark"] .dxf-validation-copy,
html[data-app-theme="dark"] .dxf-validation-section-title > div,
html[data-app-theme="dark"] .dxf-validation-layer-heading strong,
html[data-app-theme="dark"] .dxf-validation-layer-empty,
html[data-app-theme="dark"] .dxf-validation-status-list,
html[data-app-theme="dark"] .dxf-validation-angle-summary strong,
html[data-app-theme="dark"] .dxf-validation-field span,
html[data-app-theme="dark"] .dxf-validation-attribute-row,
html[data-app-theme="dark"] .dxf-validation-attribute-empty {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .dxf-validation-drawer-header h3,
html[data-app-theme="dark"] .dxf-validation-bars,
html[data-app-theme="dark"] .dxf-validation-layer-list,
html[data-app-theme="dark"] .dxf-validation-attribute-head h4,
html[data-app-theme="dark"] .dxf-validation-attribute-row strong,
html[data-app-theme="dark"] .dxf-validation-symbol-card-row strong {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dxf-toolbar,
html[data-app-theme="dark"] .dxf-hint {
  background: var(--tx-surface-2);
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .dxf-theme-btn {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

/* 12b. Admin dashboard */

html[data-app-theme="dark"] .resource-update-header,
html[data-app-theme="dark"] .dialog-header {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #admin_dashboard_container label {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

/* 13. Costing page */

html[data-app-theme="dark"] .tab-content,
html[data-app-theme="dark"] .sticky-header-section {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tab-content .dashboard_heading {
  background-color: var(--tx-surface) !important;
}

/* 14. Inline-style rescue */

html[data-app-theme="dark"] [style*="color:#666"],
html[data-app-theme="dark"] [style*="color: #666"],
html[data-app-theme="dark"] [style*="color:#6c757d"],
html[data-app-theme="dark"] [style*="color: #6c757d"] {
  color: var(--tx-muted) !important;
}

html[data-app-theme="dark"] [style*="color:#333"],
html[data-app-theme="dark"] [style*="color: #333"],
html[data-app-theme="dark"] [style*="color:#000"],
html[data-app-theme="dark"] [style*="color: #000"],
html[data-app-theme="dark"] [style*="color: black"],
html[data-app-theme="dark"] [style*="color:black"],
html[data-app-theme="dark"] [style*="color:#212529"],
html[data-app-theme="dark"] [style*="color: #212529"] {
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] [style*="color:#1b4d3e"],
html[data-app-theme="dark"] [style*="color: #1b4d3e"],
html[data-app-theme="dark"] [style*="color:#1B4D3E"],
html[data-app-theme="dark"] [style*="color: #1B4D3E"] {
  color: var(--tx-accent-2) !important;
}

/* 15. Paper islands */

html[data-app-theme="dark"] #canvas-container,
html[data-app-theme="dark"] .dxf-canvas,
html[data-app-theme="dark"] .dxf-preview,
html[data-app-theme="dark"] .report-preview-html-frame,
html[data-app-theme="dark"] .cross-drawing-viewer-body,
html[data-app-theme="dark"] #cross-drawing-viewer-iframe,
html[data-app-theme="dark"] #symbol-cross-drawing-viewer-iframe,
html[data-app-theme="dark"] #pills_lines .cross-drawing-viewer-panel iframe,
html[data-app-theme="dark"] #imgContainer,
html[data-app-theme="dark"] .drawing-container,
html[data-app-theme="dark"] #legendsContainer,
html[data-app-theme="dark"] .automated-symbol-thumb-wrap,
html[data-app-theme="dark"] .ungrouped-wizard .uw-crop,
html[data-app-theme="dark"] .ungrouped-wizard .uw-thumb,
html[data-app-theme="dark"] #accordionTextLibrary tr.annotated_rows:hover .img-wrapper,
html[data-app-theme="dark"] #textReviewPanel .text-review-finding:hover .review-text-crop,
html[data-app-theme="dark"] .acuprism-glyph,
html[data-app-theme="dark"] .theme-paper {
  color-scheme: light;
  background: #ffffff;

  --tx-ink: #212529;
  --tx-ink-2: #3d4247;
  --tx-muted: #6c757d;
  --tx-faint: #868e96;
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f9fa;
  --tx-surface-3: #f1f3f5;
  --tx-surface-4: #e9ecef;
  --tx-line: #dee2e6;
  --tx-icon-invert: none;
}

html[data-app-theme="dark"] .r6o-editor,
html[data-app-theme="dark"] .select-widget {
  color-scheme: dark;

  --tx-ink: #e8f0ed;
  --tx-ink-2: #c2d2cb;
  --tx-muted: #8fa39c;
  --tx-faint: #6e827b;

  --tx-surface: #141e1a;
  --tx-surface-2: #1a2620;
  --tx-surface-3: #223029;
  --tx-surface-4: #2b3b33;

  --tx-line: #24352e;
  --tx-line-soft: #1b2823;
  --tx-icon-invert: invert(1) hue-rotate(180deg);
}

html[data-app-theme="dark"] .drawing-document-viewer-frame-wrap,
html[data-app-theme="dark"] #drawing-document-viewer-iframe,
html[data-app-theme="dark"] #redlining-document-viewer-iframe,
html[data-app-theme="dark"] #lines-document-viewer-iframe {
  background: var(--tx-surface);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #image-viewer {
  background-color: #000;
}

html[data-app-theme="dark"] #dashboard_logo,
html[data-app-theme="dark"] .dashboard_tile .project_img img,
html[data-app-theme="dark"] .tile-icon {
  filter: brightness(1.15);
}

/* 16. High-specificity overrides */

/* Symbol studio modal chrome (its header is the app's most visible one) */

html[data-app-theme="dark"] #symbolmodal .modal-header {
  background: var(--tx-surface-2);
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] #symbolmodal .project-config-context {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] #symbolmodal .project-config-context b {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #symbolmodal .project-config-pill {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #symbolmodal .ss-drawing-type-trigger {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #symbolmodal .ss-drawing-type-menu {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] #symbolmodal .ss-drawing-type-option {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #symbolmodal .ss-drawing-type-option:focus,
html[data-app-theme="dark"] #symbolmodal .ss-drawing-type-option:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #symbolmodal .ss-drawing-type-option.active {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
  box-shadow: inset 3px 0 0 var(--tx-accent);
}

html[data-app-theme="dark"] #pills-import-export-symbols {
  --impexp-teal-tint: var(--tx-surface-2);
  --impexp-teal-tint-2: var(--tx-line);
  --impexp-ink: var(--tx-ink);
  --impexp-slate: var(--tx-ink-2);
  --impexp-slate-light: var(--tx-muted);
  --impexp-bg: var(--tx-bg);
  --impexp-card: var(--tx-surface);
  --impexp-border: var(--tx-line);
}

html[data-app-theme="dark"] #pills-import-export-symbols .impexp-dropzone,
html[data-app-theme="dark"] #pills-import-export-symbols .impexp-dz-icon {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #pills-import-export-symbols .impexp-dz-file {
  background: var(--tx-surface-2);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] #pills-import-export-symbols .impexp-dropzone:hover,
html[data-app-theme="dark"] #pills-import-export-symbols .impexp-dropzone.dragover {
  background: var(--tx-accent-soft);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #nomenclature_container {
  --pc-teal-soft: var(--tx-accent-soft);
  --pc-teal-soft-2: var(--tx-surface-4);
  --pc-teal-deep: var(--tx-accent-2);
  --pc-border: var(--tx-line);
  --pc-border-strong: var(--tx-line);
  --pc-ink: var(--tx-ink);
  --pc-muted: var(--tx-muted);
  --pc-bg: var(--tx-bg);
  --pc-card: var(--tx-surface);
  --pc-danger-soft: #3d2023;
  --pc-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] #nomenclature_container .project-config-rail,
html[data-app-theme="dark"] #nomenclature_container .piping-catalog-proxy,
html[data-app-theme="dark"] #nomenclature_container #menu-options,
html[data-app-theme="dark"] #nomenclature_container #grid_size,
html[data-app-theme="dark"] #nomenclature_container .project-config-count,
html[data-app-theme="dark"] #nomenclature_container .piping-component-filter,
html[data-app-theme="dark"] #nomenclature_container .piping-component-filter.active,
html[data-app-theme="dark"] #nomenclature_container .project-config-drawer-close,
html[data-app-theme="dark"] #nomenclature_container .project-config-drawer-input,
html[data-app-theme="dark"] #nomenclature_container .project-config-drawer-nav button,
html[data-app-theme="dark"] #nomenclature_container .abbreviation-code-search,
html[data-app-theme="dark"] #nomenclature_container .project-config-attr-row .select2-container .select2-selection--single {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #nomenclature_container .project-config-path-search-wrap {
  background: var(--tx-surface-2) !important;
  color: var(--tx-ink);
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] #nomenclature_container .project-config-path-search-wrap:focus-within {
  background: var(--tx-surface-3) !important;
  border-color: var(--tx-accent) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.22);
}

html[data-app-theme="dark"] #nomenclature_container .project-config-path-search {
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] #nomenclature_container .possible-values-btn {
  background: var(--tx-surface-2) !important;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .jconfirm-content .import-project-trigger,
html[data-app-theme="dark"] .jconfirm-content .import-project-options,
html[data-app-theme="dark"] .jconfirm-content .import-project-search {
  background: var(--tx-surface-2);
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .jconfirm-content .import-project-empty {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] #nomenclature_container .project-config-rail .custom-tabs,
html[data-app-theme="dark"] #nomenclature_container .project-config-drawer,
html[data-app-theme="dark"] #nomenclature_container .project-config-drawer-hero,
html[data-app-theme="dark"] #nomenclature_container .piping-chip,
html[data-app-theme="dark"] #nomenclature_container .piping-chip.configured,
html[data-app-theme="dark"] #nomenclature_container #accordionFluidCodes > [data-category-id],
html[data-app-theme="dark"] #nomenclature_container #accordionAbbreviationCodes > [data-category-id],
html[data-app-theme="dark"] #nomenclature_container .equipment_accordian .accordion-item,
html[data-app-theme="dark"] #nomenclature_container .record-panel,
html[data-app-theme="dark"] #nomenclature_container .project-config-paths #symbol_paths_container {
  background: var(--tx-surface);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #nomenclature_container .piping-component-bar,
html[data-app-theme="dark"] #nomenclature_container .project-config-paths .dataTables_filter input,
html[data-app-theme="dark"] #nomenclature_container .project-config-paths .dataTables_length select,
html[data-app-theme="dark"] #nomenclature_container .project-config-drawer-corrosion-input {
  background: var(--tx-surface-2) !important;
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #nomenclature_container #accordionFluidCodes > [data-category-id]:hover,
html[data-app-theme="dark"] #nomenclature_container #accordionAbbreviationCodes > [data-category-id]:hover,
html[data-app-theme="dark"] #nomenclature_container #accordionFluidCodes > [data-category-id].selected,
html[data-app-theme="dark"] #nomenclature_container #accordionAbbreviationCodes > [data-category-id].selected,
html[data-app-theme="dark"] #nomenclature_container .project-config-paths .symbol_paths_table tbody tr:hover {
  background: var(--tx-accent-soft);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .project-config-attr-dropdown {
  background: var(--tx-surface-3) !important;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .dxf-cell .select2-container--default .select2-selection {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .dxf-cell .select2-container--default .select2-selection__rendered {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #toolbarDiv,
html[data-app-theme="dark"] #annotation-toolbarDiv {
  background: var(--tx-surface-2) !important;
}

html[data-app-theme="dark"] #toolbarDiv div.active,
html[data-app-theme="dark"] #item-notes-tool-container.active,
html[data-app-theme="dark"] #annotation-toolbarDiv .col.active {
  background: var(--tx-surface-4) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #annotation-toolbar-container,
html[data-app-theme="dark"] #opc_connection_container.split-view #leftContainer .drawing-toolbar {
  background: var(--tx-surface-2) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .automate-upload-dropzone,
html[data-app-theme="dark"] .automate-upload-dropzone.has-file {
  background: var(--tx-surface-2) !important;
}

html[data-app-theme="dark"] .automate-upload-dropzone:hover,
html[data-app-theme="dark"] .automate-upload-dropzone.is-dragover {
  background: var(--tx-accent-soft) !important;
}

html[data-app-theme="dark"] .nav-pills:not(.shadow_tab) {
  background: var(--tx-surface-3) !important;
}

html[data-app-theme="dark"] .dexpi-object-body {
  background: var(--tx-surface-2) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #group-settings-portal {
  background: var(--tx-surface);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #pfd-pnid-toggle:checked ~ .switch-toggle-labels span:first-child,
html[data-app-theme="dark"] #pfd-pnid-toggle:not(:checked) ~ .switch-toggle-labels span:last-child,
html[data-app-theme="dark"] #hmb-toggle:checked ~ .switch-toggle-labels span:first-child,
html[data-app-theme="dark"] #hmb-toggle:not(:checked) ~ .switch-toggle-labels span:last-child {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] #tasklist_documents_pagination .page-info,
html[data-app-theme="dark"] #bom_documents_pagination .page-info,
html[data-app-theme="dark"] #classification_documents_pagination .page-info {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] #dxf_validation-container,
html[data-app-theme="dark"] .bom-search-box,
html[data-app-theme="dark"] .tasklist-search-box,
html[data-app-theme="dark"] .dialog-header,
html[data-app-theme="dark"] .resource-update-header {
  background: var(--tx-surface) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dashboard_heading {
  background-color: var(--tx-bg) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .classification-row.selected-row {
  background: var(--tx-accent-soft) !important;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .sub-checklist {
  color: var(--tx-muted) !important;
}

html[data-app-theme="dark"] .selected-item .close-icon {
  color: var(--tx-muted) !important;
}

html[data-app-theme="dark"] .tree-view .toggle-container[style*="background-color: #E0E7FF"],
html[data-app-theme="dark"] .tree-view .btn-toggle[style*="background-color: #E0E7FF"],
html[data-app-theme="dark"] #erpMainAccordian .accordion-item[style*="background-color: #E0E7FF"],
html[data-app-theme="dark"] #erpLoungeAccordian .accordion-item[style*="background-color: #E0E7FF"] {
  color: #312e81 !important;
}

html[data-app-theme="dark"] .abbreviation-code-container #accordionAbbreviationCodes .accordion-item,
html[data-app-theme="dark"] .primary-code-container #accordionFluidCodes .accordion-item,
html[data-app-theme="dark"] #accordionLineLounge .accordion-item.line-lounge-item,
html[data-app-theme="dark"] #automated_accordion_section .accordion-body,
html[data-app-theme="dark"] #classified_accordion_section .accordion-body,
html[data-app-theme="dark"] #textReviewPanel .textReviewBucket {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #accordionTextLibrary .groupHeader,
html[data-app-theme="dark"] #textReviewPanel .review-bucket-header,
html[data-app-theme="dark"] #textReviewPanel .review-validated-track,
html[data-app-theme="dark"] #pills-texts .symbols_data_search_box input,
html[data-app-theme="dark"] #pills-texts .symbols_data_search_box input:focus,
html[data-app-theme="dark"] #accordionTextLibrary input.parent-group:focus {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] #accordionTextLibrary .groupHeader.completed,
html[data-app-theme="dark"] #accordionTextLibrary tbody tr.annotated_rows:hover,
html[data-app-theme="dark"] #textReviewPanel .text-review-finding:hover {
  background: var(--tx-accent-soft);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #textLoungeAccordian::-webkit-scrollbar-thumb {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] #pagination_pages .btn:hover {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

/* 17. High-specificity paper islands */

html[data-app-theme="dark"] #symbol_table_selected_symbols .dxf-symbol-preview,
html[data-app-theme="dark"] #symbol_table_selected_symbols .dxf-current-preview-wrap,
html[data-app-theme="dark"] .dxf-select-option-preview,
html[data-app-theme="dark"] #annotation-drawing-board-container,
html[data-app-theme="dark"] #network_drawing,
html[data-app-theme="dark"] #nomenclature_container .symbol-preview-paper {
  color-scheme: light;
  background: #ffffff;

  --tx-ink: #212529;
  --tx-ink-2: #3d4247;
  --tx-muted: #6c757d;
  --tx-faint: #868e96;
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f9fa;
  --tx-surface-3: #f1f3f5;
  --tx-surface-4: #e9ecef;
  --tx-line: #dee2e6;
  --tx-icon-invert: none;
}

/* 18. Monochrome icon images */

html[data-app-theme="dark"] img[src*="toolbar-zoom-in"],
html[data-app-theme="dark"] img[src*="toolbar-zoom-out"],
html[data-app-theme="dark"] img[src*="toolbar-home"],
html[data-app-theme="dark"] img[src*="toolbar-fullscreen"],
html[data-app-theme="dark"] img[src*="annotate-symbol"],
html[data-app-theme="dark"] img[src*="annotate-text"],
html[data-app-theme="dark"] img[src*="annotate-polygon"],
html[data-app-theme="dark"] img[src*="annotate-straight-line"],
html[data-app-theme="dark"] img[src*="line_flow"],
html[data-app-theme="dark"] img[src*="split-line"],
html[data-app-theme="dark"] img[src*="angle.svg"],
html[data-app-theme="dark"] img[src*="flip.svg"],
html[data-app-theme="dark"] img[src*="retry.svg"],
html[data-app-theme="dark"] img[src*="remap_text"],
html[data-app-theme="dark"] img[src*="text-split"],
html[data-app-theme="dark"] img[src*="singleselect_icon"],
html[data-app-theme="dark"] img[src*="Multiselect_icon"] {
  filter: var(--tx-icon-invert);
}

/* 19. Bootstrap defaults the app never restyles */

html[data-app-theme="dark"] .dropdown-item-text,
html[data-app-theme="dark"] .link-dark,
html[data-app-theme="dark"] .link-dark:hover,
html[data-app-theme="dark"] .link-dark:focus,
html[data-app-theme="dark"] .link-secondary,
html[data-app-theme="dark"] .link-secondary:hover,
html[data-app-theme="dark"] .link-secondary:focus {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .bg-body {
  background-color: var(--tx-surface) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] mark,
html[data-app-theme="dark"] .mark {
  background-color: #4a3f12;
  color: #ffe9a8;
}

html[data-app-theme="dark"] .text-primary { color: #6ea8fe !important; }
html[data-app-theme="dark"] .text-success { color: #75c99b !important; }
html[data-app-theme="dark"] .text-danger { color: #f08a94 !important; }
html[data-app-theme="dark"] .text-info { color: #6edff6 !important; }
html[data-app-theme="dark"] .text-warning { color: #ffda6a !important; }

html[data-app-theme="dark"] .link-primary { color: #6ea8fe; }
html[data-app-theme="dark"] .link-success { color: #75c99b; }
html[data-app-theme="dark"] .link-danger { color: #f08a94; }
html[data-app-theme="dark"] .valid-feedback { color: #75c99b; }
html[data-app-theme="dark"] .invalid-feedback { color: #f08a94; }

html[data-app-theme="dark"] .btn-outline-success { color: #75c99b; }
html[data-app-theme="dark"] .btn-outline-danger { color: #f08a94; }

html[data-app-theme="dark"] .img-thumbnail {
  color-scheme: light;
  background-color: #ffffff;
  border-color: #dee2e6;

  --tx-ink: #212529;
  --tx-ink-2: #3d4247;
  --tx-muted: #6c757d;
  --tx-faint: #868e96;
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f9fa;
  --tx-surface-3: #f1f3f5;
  --tx-surface-4: #e9ecef;
  --tx-line: #dee2e6;
  --tx-icon-invert: none;
}

/* 20. CSS that lives in template <style> blocks */

/* Bootstrap vertical rule, used as a divider on the connection screens */
html[data-app-theme="dark"] .vr {
  background-color: var(--tx-line);
}

/* Document pane (drawing board) */
html[data-app-theme="dark"] .doc-pane,
html[data-app-theme="dark"] .doc-pane-toolbar {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .doc-pane-card,
html[data-app-theme="dark"] .doc-pane-table {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .doc-pane-header {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .doc-pane-action-button:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

/* Classification document viewer */
html[data-app-theme="dark"] .viewer-shell,
html[data-app-theme="dark"] .viewer-body {
  background: var(--tx-bg);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .viewer-card,
html[data-app-theme="dark"] .viewer-empty,
html[data-app-theme="dark"] .viewer-error,
html[data-app-theme="dark"] .viewer-loading {
  background: var(--tx-surface);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .viewer-header {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .viewer-back-btn:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .bom-card,
html[data-app-theme="dark"] .bom-techspec-accordion,
html[data-app-theme="dark"] .bom-techspec-body,
html[data-app-theme="dark"] .bom-match-list,
html[data-app-theme="dark"] .bom-dropdown-toggle,
html[data-app-theme="dark"] .classification-card,
html[data-app-theme="dark"] .classification-search-box,
html[data-app-theme="dark"] .task_list_tables,
html[data-app-theme="dark"] .tasklist-card,
html[data-app-theme="dark"] .task-list-card,
html[data-app-theme="dark"] .admin-dashboard-header {
  background: var(--tx-surface);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .chart-box {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .bom-form-section,
html[data-app-theme="dark"] .bom-selected-value,
html[data-app-theme="dark"] .classification-form-section,
html[data-app-theme="dark"] .tasklist-selected-tags {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .bom-form-section,
html[data-app-theme="dark"] .classification-form-section,
html[data-app-theme="dark"] .bom-table-container,
html[data-app-theme="dark"] .classification-table-container {
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .bom-label,
html[data-app-theme="dark"] .classification-label {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .bom-btn-outline,
html[data-app-theme="dark"] .classification-btn-outline {
  background: var(--tx-surface-3);
  border-color: var(--tx-accent);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .bom-btn-outline:hover,
html[data-app-theme="dark"] .bom-btn-outline:focus,
html[data-app-theme="dark"] .bom-btn-outline.show,
html[data-app-theme="dark"] .classification-btn-outline:hover,
html[data-app-theme="dark"] .classification-btn-outline:focus,
html[data-app-theme="dark"] .classification-btn-outline.show {
  background: var(--tx-accent);
  border-color: var(--tx-accent);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] .bom-table-container::-webkit-scrollbar-track,
html[data-app-theme="dark"] .bom-match-list::-webkit-scrollbar-track,
html[data-app-theme="dark"] .classification-table-container::-webkit-scrollbar-track {
  background: transparent;
}

html[data-app-theme="dark"] .bom-table-container::-webkit-scrollbar-thumb,
html[data-app-theme="dark"] .bom-match-list::-webkit-scrollbar-thumb,
html[data-app-theme="dark"] .classification-table-container::-webkit-scrollbar-thumb,
html[data-app-theme="dark"] #nomenclature_container #accordionFluidCodes::-webkit-scrollbar-thumb,
html[data-app-theme="dark"] #nomenclature_container #accordionAbbreviationCodes::-webkit-scrollbar-thumb {
  background: #4a534f;
}

@supports (-moz-orient: inline) {
  html[data-app-theme="dark"] #nomenclature_container #accordionFluidCodes,
  html[data-app-theme="dark"] #nomenclature_container #accordionAbbreviationCodes {
    scrollbar-color: #4a534f transparent;
  }
}

html[data-app-theme="dark"] .bom-table-container::-webkit-scrollbar-thumb:hover,
html[data-app-theme="dark"] .classification-table-container::-webkit-scrollbar-thumb:hover {
  background: #5e6a65;
}

/* Project attributes screen */
html[data-app-theme="dark"] {
  --surface: #141e1a;
  --surface-2: #1a2620;
  --border: #24352e;
  --text-primary: #e8f0ed;
  --text-muted: #8fa39c;
  --text-xs: #6e827b;
  --teal-light: #10281f;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 14px 30px -18px rgba(0, 0, 0, .95);
}

html[data-app-theme="dark"] .attr-title {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .attr-table td:first-child {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .trigger-clear {
  background: var(--tx-surface-4);
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .trigger-clear:hover {
  background: #3c1518;
  color: #f5b0b5;
}

html[data-app-theme="dark"] .btn-reset:hover {
  background: #3c1518;
  border-color: #6d262c;
  color: #f5b0b5;
}

html[data-app-theme="dark"] mark.hl {
  background: #4a3f12;
  color: #ffe9a8;
}

html[data-app-theme="dark"] .f-input:focus,
html[data-app-theme="dark"] .cs-search:focus,
html[data-app-theme="dark"] .cs-dropdown,
html[data-app-theme="dark"] .custom-select-trigger:hover,
html[data-app-theme="dark"] .custom-select-trigger.open {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

/* Connection screens (OPC / system) */
html[data-app-theme="dark"] .group-settings-menu {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

/* Status pills. The light values are pastel fills meant for a white page; over a dark
   ground they composite to mud, so the dark set restates the same tint/ink/border
   grammar with its own hues. */

html[data-app-theme="dark"] .status.ready { --status-rgb: 245, 196, 81; }
html[data-app-theme="dark"] .status.queued { --status-rgb: 194, 210, 203; }
html[data-app-theme="dark"] .status.failed { --status-rgb: 245, 163, 168; }
html[data-app-theme="dark"] .status.verified { --status-rgb: 103, 232, 249; }
html[data-app-theme="dark"] .status.converted { --status-rgb: 52, 211, 153; }
html[data-app-theme="dark"] .status.post-processing { --status-rgb: 216, 180, 254; }
html[data-app-theme="dark"] .status.processing_output,
html[data-app-theme="dark"] .status.pre-processing { --status-rgb: 110, 231, 183; }

html[data-app-theme="dark"] .status.ready,
html[data-app-theme="dark"] .status.queued,
html[data-app-theme="dark"] .status.failed,
html[data-app-theme="dark"] .status.verified,
html[data-app-theme="dark"] .status.converted,
html[data-app-theme="dark"] .status.post-processing,
html[data-app-theme="dark"] .status.processing_output,
html[data-app-theme="dark"] .status.pre-processing {
  background-color: rgba(var(--status-rgb), .16) !important;
  color: rgb(var(--status-rgb)) !important;
  border: 1px solid rgba(var(--status-rgb), .42);
}

html[data-app-theme="dark"] .group-action-item {
  color: var(--tx-ink);
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .group-action-item:hover {
  background: var(--tx-surface-4);
  color: var(--tx-accent-2);
}

/* Dynamic report config */
html[data-app-theme="dark"] .report-header,
html[data-app-theme="dark"] .config-section {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .synonym-box {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .synonym-box:hover,
html[data-app-theme="dark"] .column-name-editable:hover,
html[data-app-theme="dark"] .column-name-editable.editing,
html[data-app-theme="dark"] .synonyms-container.drag-over {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

/* Tutorials */
html[data-app-theme="dark"] .tutorial-category-card,
html[data-app-theme="dark"] .tutorial-card {
  background: var(--tx-surface);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .search-box {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .search-result-item:hover,
html[data-app-theme="dark"] .service-row:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tutorial-image-placeholder {
  background: var(--tx-surface-3);
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .img-shell,
html[data-app-theme="dark"] .tutorial-symbol-img,
html[data-app-theme="dark"] .tutorial-main-image,
html[data-app-theme="dark"] .tutorial-image,
html[data-app-theme="dark"] .admin-tutorial-img {
  color-scheme: light;
  background: #f8f9fa;

  --tx-ink: #212529;
  --tx-ink-2: #3d4247;
  --tx-muted: #6c757d;
  --tx-faint: #868e96;
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f9fa;
  --tx-surface-3: #f1f3f5;
  --tx-surface-4: #e9ecef;
  --tx-line: #dee2e6;
  --tx-icon-invert: none;
}

/* 21. State backgrounds under a lifted ink */

html[data-app-theme="dark"] #pagination_pages .btn.disabled,
html[data-app-theme="dark"] #pagination_pages .btn:disabled {
  background: var(--tx-surface-2) !important;
  color: var(--tx-muted) !important;
}

html[data-app-theme="dark"] .dxf-validation-action,
html[data-app-theme="dark"] .dxf-validation-text-reset,
html[data-app-theme="dark"] .dxf-validation-submit,
html[data-app-theme="dark"] .dxf-validation-export,
html[data-app-theme="dark"] .dxf-validation-reset,
html[data-app-theme="dark"] .dxf-validation-rail-btn,
html[data-app-theme="dark"] .dxf-validation-drawer-toggle,
html[data-app-theme="dark"] .dxf-validation-review-summary div {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-action:hover,
html[data-app-theme="dark"] .dxf-validation-text-reset:hover,
html[data-app-theme="dark"] .dxf-validation-rail-btn:hover,
html[data-app-theme="dark"] .dxf-validation-rail-btn.active,
html[data-app-theme="dark"] .dxf-validation-drawer-toggle:hover,
html[data-app-theme="dark"] .dxf-validation-pill,
html[data-app-theme="dark"] .dxf-validation-attribute-head span {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .dxf-validation-action.active {
  background: var(--tx-accent-2);
  border-color: var(--tx-accent-2);
  color: var(--tx-surface-1);
}

html[data-app-theme="dark"] .dxf-validation-trace-settings {
  background: var(--tx-surface-2);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-trace-settings .dxf-validation-check {
  border-left-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-trace-settings input[type="range"],
html[data-app-theme="dark"] .dxf-validation-trace-settings input[type="range"]::-moz-range-track {
  background: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-trace-settings input[type="range"]::-webkit-slider-thumb,
html[data-app-theme="dark"] .dxf-validation-trace-settings input[type="range"]::-moz-range-thumb {
  border-color: var(--tx-surface-2);
  background: var(--tx-accent-2);
}

html[data-app-theme="dark"] .btn-check:active + .btn-light,
html[data-app-theme="dark"] .btn-check:checked + .btn-light,
html[data-app-theme="dark"] .btn-light:active,
html[data-app-theme="dark"] .btn-light.active,
html[data-app-theme="dark"] .btn-light.disabled,
html[data-app-theme="dark"] .btn-light:disabled {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .list-group-item.disabled,
html[data-app-theme="dark"] .list-group-item:disabled {
  background-color: var(--tx-surface);
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .list-group-item-primary.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-primary.list-group-item-action:focus,
html[data-app-theme="dark"] .list-group-item-secondary.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-secondary.list-group-item-action:focus,
html[data-app-theme="dark"] .list-group-item-success.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-success.list-group-item-action:focus,
html[data-app-theme="dark"] .list-group-item-info.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-info.list-group-item-action:focus,
html[data-app-theme="dark"] .list-group-item-warning.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-warning.list-group-item-action:focus,
html[data-app-theme="dark"] .list-group-item-danger.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-danger.list-group-item-action:focus,
html[data-app-theme="dark"] .list-group-item-light.list-group-item-action:hover,
html[data-app-theme="dark"] .list-group-item-light.list-group-item-action:focus {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .actions i {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #toolbar-item-nodes.active {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .line-lounge-line-btn:not(.collapsed) {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .jconfirm.text-mass-update-dialog .jconfirm-box div.jconfirm-closeIcon:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .viewer-page {
  color-scheme: light;
  background: #ffffff;

  --tx-ink: #212529;
  --tx-ink-2: #3d4247;
  --tx-muted: #6c757d;
  --tx-faint: #868e96;
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f9fa;
  --tx-surface-3: #f1f3f5;
  --tx-surface-4: #e9ecef;
  --tx-line: #dee2e6;
  --tx-icon-invert: none;
}

/* 22. Pale cyan chips and pills */

html[data-app-theme="dark"] .dexpi-object-type,
html[data-app-theme="dark"] .deleted-symbols-message,
html[data-app-theme="dark"] .text-mass-update-heading-icon,
html[data-app-theme="dark"] .dxf-json-block-name {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .text-mass-update-action-outline,
html[data-app-theme="dark"] .back-btn {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .text-mass-update-action-outline:hover,
html[data-app-theme="dark"] .back-btn:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .deleted-symbol-empty {
  background: var(--tx-surface-2);
  color: var(--tx-muted);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .table_item_button_2 {
  background-color: var(--tx-accent-soft) !important;
  color: var(--tx-accent-2) !important;
}

html[data-app-theme="dark"] .project_initial {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dxf-validation-layer-items div::before {
  background: var(--tx-faint);
}

/* 23. Text Lounge */

html[data-app-theme="dark"] #textLoungeAccordian {
  --lounge-border: var(--tx-line);
  --lounge-surface: var(--tx-surface);
  --lounge-surface-alt: var(--tx-surface-2);
  --lounge-text: var(--tx-ink);
  --lounge-muted: var(--tx-muted);
  --lounge-accent: var(--tx-accent);
  --lounge-accent-deep: var(--tx-accent-2);
}

html[data-app-theme="dark"] .groupHeader.completed .accordion-button {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] #accordionTextLibrary tbody tr.annotated_rows:hover {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] #accordionTextLibrary tbody tr.annotated_rows.bg-selected {
  background: var(--tx-accent-soft) !important;
}

html[data-app-theme="dark"] #textLoungeAccordian::-webkit-scrollbar-thumb:hover {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] #accordionTextLibrary .img-wrapper {
  color-scheme: light;
  background: #ffffff;
  border-color: #dee2e6;

  --tx-ink: #212529;
  --tx-ink-2: #3d4247;
  --tx-muted: #6c757d;
  --tx-faint: #868e96;
  --tx-surface: #ffffff;
  --tx-surface-2: #f8f9fa;
  --tx-surface-3: #f1f3f5;
  --tx-surface-4: #e9ecef;
  --tx-line: #dee2e6;
  --tx-icon-invert: none;
}

/* 24. Text review panel */

html[data-app-theme="dark"] #textReviewPanel {
  --rev-border: var(--tx-line);
  --rev-muted: var(--tx-muted);
  --rev-text: var(--tx-ink);
}

html[data-app-theme="dark"] #textReviewPanel .review-panel-count,
html[data-app-theme="dark"] #textReviewPanel .review-bucket-icon,
html[data-app-theme="dark"] #textReviewPanel .review-bucket-count,
html[data-app-theme="dark"] #textReviewPanel .review-chip--plain,
html[data-app-theme="dark"] #textReviewPanel .review-select-bar,
html[data-app-theme="dark"] #textReviewPanel .lounge-icon-btn {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

/* 25. !important sources and a too-greedy base rule */

html[data-app-theme="dark"] .nav-link.active {
  background-color: var(--tx-surface-3) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .lounge-tabs .nav-link.active {
  color: var(--tx-accent-2) !important;
  border-bottom-color: var(--tx-accent) !important;
}

html[data-app-theme="dark"] .dxf-validation-section-title {
  background: var(--tx-surface);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dxf-validation-accordion {
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box .jconfirm-buttons button.btn-default:hover {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
}

/* 26. Same two causes, found by audit rather than by screenshot */

/* A: !important sources */
html[data-app-theme="dark"] .dexpi-object-button {
  background: var(--tx-surface) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .dexpi-object-button:not(.collapsed) {
  background: var(--tx-accent-soft) !important;
  color: var(--tx-accent-2) !important;
}

html[data-app-theme="dark"] .nomenclature_btn {
  background: var(--tx-surface-2) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] .tree-view .toggle-container[style*="background-color: #E0E7FF"],
html[data-app-theme="dark"] .accordion-item[style*="background-color: #E0E7FF"],
html[data-app-theme="dark"] .tree-view .btn-toggle[style*="background-color: #E0E7FF"] {
  color: #312e81 !important;
}

/* B: ancestor-qualified sources */

html[data-app-theme="dark"] .table th {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: transparent;
}

html[data-app-theme="dark"] .table thead th {
  background: var(--tx-thead);
  color: var(--tx-thead-ink);
  border-color: transparent;
}


html[data-app-theme="dark"] #automated_accordion_section .accordion-button,
html[data-app-theme="dark"] #classified_accordion_section .accordion-button,
html[data-app-theme="dark"] .dexpi-accordion .accordion-button,
html[data-app-theme="dark"] .bom-techspec-accordion .accordion-button {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .bom-techspec-accordion .accordion-button:not(.collapsed) {
  background: var(--tx-accent-soft);
  background-image: none;
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .nav-tabs .nav-item.show .nav-link {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .user_filter_trigger .dropdown-toggle:hover .user_filter_icon_wrap,
html[data-app-theme="dark"] .user_filter_trigger .dropdown-toggle.show .user_filter_icon_wrap {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-validation-field select,
html[data-app-theme="dark"] .equipment_accordian_left input,
html[data-app-theme="dark"] #nomenclature_container .fluid-code-search,
html[data-app-theme="dark"] #nomenclature_container .project-config-attr-row input {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .dxf-json-meta-grid div {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm.jconfirm-white .jconfirm-box,
html[data-app-theme="dark"] .jconfirm.jconfirm-light .jconfirm-box,
html[data-app-theme="dark"] .jconfirm.jconfirm-bootstrap .jconfirm-box,
html[data-app-theme="dark"] .jconfirm.jconfirm-material .jconfirm-box,
html[data-app-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default,
html[data-app-theme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm.jconfirm-white .jconfirm-box .jconfirm-buttons button.btn-default:hover,
html[data-app-theme="dark"] .jconfirm.jconfirm-light .jconfirm-box .jconfirm-buttons button.btn-default:hover {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box div.jconfirm-content,
html[data-app-theme="dark"] .jconfirm.jconfirm-material .jconfirm-box div.jconfirm-title-c,
html[data-app-theme="dark"] .jconfirm.jconfirm-material .jconfirm-box div.jconfirm-content,
html[data-app-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-title-c,
html[data-app-theme="dark"] .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-title-c,
html[data-app-theme="dark"] .jconfirm.jconfirm-bootstrap .jconfirm-box div.jconfirm-content {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm.jconfirm-modern .jconfirm-box div.jconfirm-content {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .select2-container--classic .select2-selection--single,
html[data-app-theme="dark"] .select2-container--classic .select2-selection--multiple,
html[data-app-theme="dark"] .select2-container--classic .select2-dropdown,
html[data-app-theme="dark"] .select2-container--classic .select2-selection--multiple .select2-selection__choice,
html[data-app-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--single,
html[data-app-theme="dark"] .select2-container--default.select2-container--disabled .select2-selection--multiple {
  background: var(--tx-surface-2);
  background-image: none;
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .ui-widget-header .ui-state-default,
html[data-app-theme="dark"] .ui-widget-header .ui-state-hover,
html[data-app-theme="dark"] .ui-widget-content .ui-state-hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .task_list_tables tbody tr:nth-child(even) {
  background-color: var(--tx-surface-2);
}

html[data-app-theme="dark"] .task_list_tables tbody tr:hover {
  background-color: var(--tx-surface-4);
}

html[data-app-theme="dark"] .task_list_tables > :not(caption) > *,
html[data-app-theme="dark"] .task_list_tables thead th {
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .task_list_tables > :not(:last-child) > :last-child > * {
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] #docDropdownBtn {
  background: var(--tx-surface-2) !important;
  color: var(--tx-ink);
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] #docDropdownBtn:focus,
html[data-app-theme="dark"] #docDropdownBtn:active,
html[data-app-theme="dark"] #docDropdownSearchInput:focus {
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] #nomenclature_container #accordionFluidCodes .fluid-code-type-badge.bg-info {
  background: #3a2f0c !important;
  color: #ffda6a;
  border-color: #6b5714;
}

/* 27. Tagify */

html[data-app-theme="dark"] .tagify {
  --tags-disabled-bg: var(--tx-surface-3);
  --tags-border-color: var(--tx-line);
  --tags-hover-border-color: var(--tx-line);
  --input-color: var(--tx-ink);
  --placeholder-color: rgba(255, 255, 255, .5);
  --placeholder-color-focus: rgba(255, 255, 255, .38);
  --tagify-dd-bg-color: var(--tx-surface-3);

  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tagify__input,
html[data-app-theme="dark"] .tagify__input::before {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tagify__dropdown__wrapper {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .tags-look .tagify__dropdown__item {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tags-look .tagify__dropdown__item--active {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tags-look .tagify__dropdown__item:hover {
  background: var(--tx-surface-4);
  color: var(--tx-ink);
}

/* 28. Annotorious widgets and remaining vendor surfaces */

html[data-app-theme="dark"] .r6o-widget.comment,
html[data-app-theme="dark"] .r6o-widget.comment .r6o-arrow-down,
html[data-app-theme="dark"] .r6o-widget.comment .r6o-comment-dropdown-menu,
html[data-app-theme="dark"] .r6o-widget.r6o-tag ul.r6o-taglist li,
html[data-app-theme="dark"] .r6o-autocomplete ul {
  background-color: var(--tx-surface-2);
  color: var(--tx-ink);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .r6o-widget.r6o-tag,
html[data-app-theme="dark"] .r6o-widget.comment.editable,
html[data-app-theme="dark"] .r6o-widget.comment .r6o-comment-dropdown-menu li:hover,
html[data-app-theme="dark"] .r6o-autocomplete ul li:hover {
  background-color: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .version-sub-row td {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .doc-pane-table tbody tr:nth-child(even) td {
  background: var(--tx-surface-2);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .add_symbol_symbol_tab_item {
  background: transparent;
}

html[data-app-theme="dark"] .add_symbol_symbol_tab_item_number {
  background: var(--tx-accent-soft);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] #clone-symbols-container .symbol_source_panel {
  background: var(--tx-surface-2);
}

html[data-app-theme="dark"] #clone-symbols-container .add_symbol_symbol_tab_item_number {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] #clone-symbols-container #project_symbol_table > tbody > tr.selected_project .add_symbol_symbol_tab_item {
  background: var(--tx-accent-soft);
}

html[data-app-theme="dark"] .add_symbol_symbol_tab_item:hover {
  background: var(--tx-surface-3);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .add_symbol_symbol_tab_item:hover .add_symbol_symbol_tab_item_number {
  background: var(--tx-surface-4);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .select2-container--default .select2-results__option--selected,
html[data-app-theme="dark"] .select2-container--classic .select2-selection--single .select2-selection__arrow {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .jconfirm .jconfirm-box.loading:before {
  background: var(--tx-surface-3);
}

html[data-app-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
html[data-app-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button {
  background-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .ui-state-checked {
  background: var(--tx-accent-soft);
  color: var(--tx-ink);
}

/* 29. Admin-panel chrome */

html[data-app-theme="dark"] .dashborad_menu_bar_ul li,
html[data-app-theme="dark"] .dashborad_menu_bar_ul_add li {
  border-radius: 12px;
}

html[data-app-theme="dark"] .dashborad_menu_bar ul li a,
html[data-app-theme="dark"] .dashborad_menu_bar_buttom ul li a {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .dashborad_menu_bar_ul li:hover {
  background: var(--tx-surface-3);
}

html[data-app-theme="dark"] .dashborad_menu_bar_ul li:hover a {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dashborad_menu_bar_ul li.active {
  background: var(--tx-accent);
}

html[data-app-theme="dark"] .dashborad_menu_bar_ul li.active a,
html[data-app-theme="dark"] .dashborad_menu_bar_ul li.active a i {
  color: #ffffff;
  opacity: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

html[data-app-theme="dark"] .dashborad_menu_bar_ul li.active img,
html[data-app-theme="dark"] .dashborad_menu_bar_ul li.active:hover img {
  filter: brightness(0) invert(1) drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

html[data-app-theme="dark"] .dashborad_menu_bar_buttom_ul li:first-child {
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .card,
html[data-app-theme="dark"] .modal-content,
html[data-app-theme="dark"] .offcanvas {
  border-radius: 12px;
  border-width: 1px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, .40),
    0 14px 30px -18px rgba(0, 0, 0, .95),
    inset 0 1px 0 rgba(255, 255, 255, .04);
}

html[data-app-theme="dark"] .card.border-0 {
  background: transparent;
  box-shadow: none;
}

html[data-app-theme="dark"] .card > .card-header:first-child,
html[data-app-theme="dark"] .modal-header {
  border-radius: 11px 11px 0 0;
}

html[data-app-theme="dark"] .card > .card-footer:last-child,
html[data-app-theme="dark"] .modal-footer {
  border-radius: 0 0 11px 11px;
}

html[data-app-theme="dark"] .dashboard_heading h3 {
  color: var(--tx-ink);
  font-weight: 700;
}

html[data-app-theme="dark"] thead th,
html[data-app-theme="dark"] .table > thead > tr > th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
  color: var(--tx-thead-ink);
}

html[data-app-theme="dark"] tbody tr:nth-child(even) {
  background-color: transparent;
}

html[data-app-theme="dark"] tbody tr:hover {
  background-color: var(--tx-surface-2);
}

html[data-app-theme="dark"] .badge:not(.rounded-0) {
  border-radius: 999px;
  font-weight: 600;
}

html[data-app-theme="dark"] .form-control:not(.rounded-pill),
html[data-app-theme="dark"] .form-select:not(.rounded-pill) {
  border-radius: 8px;
}

html[data-app-theme="dark"] .form-control:focus,
html[data-app-theme="dark"] .form-select:focus,
html[data-app-theme="dark"] .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

html[data-app-theme="dark"] .btn-primary,
html[data-app-theme="dark"] .btn-primary:disabled {
  background-color: var(--tx-accent);
  border-color: var(--tx-accent);
  color: #ffffff;
}

html[data-app-theme="dark"] .btn-primary:hover,
html[data-app-theme="dark"] .btn-primary:active {
  background-color: var(--tx-accent-2);
  border-color: var(--tx-accent-2);
  color: #ffffff;
}

html[data-app-theme="dark"] .btn-info,
html[data-app-theme="dark"] .btn-info:disabled {
  background-color: var(--tx-accent-soft);
  border-color: rgba(var(--primary-rgb), .45);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .btn-info:hover,
html[data-app-theme="dark"] .btn-info:focus,
html[data-app-theme="dark"] .btn-info:active,
html[data-app-theme="dark"] .btn-info.active {
  background-color: rgba(var(--primary-rgb), .18);
  border-color: var(--tx-accent);
  color: #6ee7b7;
}

html[data-app-theme="dark"] .btn-info:focus {
  box-shadow: 0 0 0 .25rem rgba(var(--primary-rgb), .25);
}

html[data-app-theme="dark"] .nav-pills .nav-link.active,
html[data-app-theme="dark"] .nav-pills .show > .nav-link {
  background-color: var(--tx-accent);
  color: var(--tx-on-accent);
  border-radius: 8px;
}

/* 30. Brand teal family, remapped to the admin emerald */

html[data-app-theme="dark"] {
  --brand-00796b: #006544;
  --brand-00b4b0: #00a06b;
  --brand-04766f: #006644;
  --brand-049996: #00895c;
  --brand-05302e: #021f15;
  --brand-087875: #036947;
  --brand-0b6f6d: #066042;
  --brand-0ca9a5: #059c6a;
  --brand-0d8f8c: #078159;
  --brand-0e7470: #086647;
  --brand-0e7c86: #087853;
  --brand-0e8f9c: #078f62;
  --brand-0f2e27: #092018;
  --brand-0f3d32: #092f22;
  --brand-0f6d73: #096547;
  --brand-0f6f66: #096144;
  --brand-0f7775: #096949;
  --brand-0f7f7c: #09714f;
  --brand-0fa8a4: #089b6a;
  --brand-11bdb8: #09b179;
  --brand-11d5cf: #08ca8a;
  --brand-12343b: #0b2e22;
  --brand-125648: #0c4834;
  --brand-125957: #0c4b36;
  --brand-128172: #0b7451;
  --brand-12a9a5: #0a9d6c;
  --brand-146b5d: #0d5e43;
  --brand-149b98: #0d8e63;
  --brand-14a09c: #0c9467;
  --brand-14a3a0: #0c9769;
  --brand-163b3b: #0f2e24;
  --brand-168f8c: #0e835c;
  --brand-169e9d: #0e9266;
  --brand-16aaa7: #0e9e6e;
  --brand-16b0ac: #0ea472;
  --brand-174247: #103a2c;
  --brand-17483d: #103b2d;
  --brand-176a66: #105d44;
  --brand-176c69: #105f45;
  --brand-183433: #102820;
  --brand-183638: #102c23;
  --brand-183d43: #10372a;
  --brand-18c4c0: #0fb981;
  --brand-193b38: #112f25;
  --brand-19a9a5: #119d6f;
  --brand-1b2e2e: #12231d;
  --brand-1cc7b8: #13bc84;
  --brand-1dc7c7: #13bd85;
  --brand-1f3d3a: #163229;
  --brand-1f9f9a: #16946a;
  --brand-1fa09b: #16956b;
  --brand-205b58: #17503d;
  --brand-21484d: #184234;
  --brand-22c7c2: #18bd86;
  --brand-22dad5: #18d093;
  --brand-23baba: #19b07e;
  --brand-25413a: #1b372e;
  --brand-264543: #1c3b31;
  --brand-26474c: #1c4235;
  --brand-2a4c49: #204237;
  --brand-2aa9aa: #20a076;
  --brand-2bbbb5: #20b282;
  --brand-30c9c5: #24c18d;
  --brand-325c63: #275a49;
  --brand-3a8892: #2e8a6b;
  --brand-3fd6d2: #26db9f;
  --brand-44a8a5: #37a17e;
  --brand-4fd8e0: #36e5ab;
  --brand-53c4ce: #3bd2a0;
  --brand-5fe3df: #47e7b2;
  --brand-9fdad8: #8bdac0;
}

/* 31. Gradient and depth */

html[data-app-theme="dark"] {
  --tx-accent-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  --tx-accent-glow: 0 6px 18px -8px rgba(16, 185, 129, .55);
}

html[data-app-theme="dark"] .btn-primary,
html[data-app-theme="dark"] #project_vault button,
html[data-app-theme="dark"] .create_project,
html[data-app-theme="dark"] .notification-button,
html[data-app-theme="dark"] .verify-button,
html[data-app-theme="dark"] .dataTables_paginate .page-item.active .page-link {
  background: var(--tx-accent-gradient);
  border-color: transparent;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
  box-shadow: var(--tx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}

html[data-app-theme="dark"] .btn-primary:hover,
html[data-app-theme="dark"] #project_vault button:hover,
html[data-app-theme="dark"] .create_project:hover,
html[data-app-theme="dark"] .notification-button:hover,
html[data-app-theme="dark"] .verify-button:hover {
  background: linear-gradient(135deg, #34d399 0%, #6ee7b7 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px -8px rgba(52, 211, 153, .65), inset 0 1px 0 rgba(255, 255, 255, .22);
}

html[data-app-theme="dark"] .dashborad_menu_bar_ul li.active {
  background: var(--tx-accent-gradient);
  box-shadow: var(--tx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
}

html[data-app-theme="dark"] .side_menu_bar {
  border-right: 1px solid var(--tx-line-soft);
  box-shadow: 1px 0 24px -12px rgba(0, 0, 0, .9);
}

html[data-app-theme="dark"] .project_item_box_content,
html[data-app-theme="dark"] #project_details,
html[data-app-theme="dark"] .table_item_box,
html[data-app-theme="dark"] .internal_testing_list,
html[data-app-theme="dark"] .table-wrappers {
  border-radius: 14px;
}

html[data-app-theme="dark"] thead,
html[data-app-theme="dark"] .table-sticky thead th {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .04) 0%, rgba(255, 255, 255, 0) 100%);
}

html[data-app-theme="dark"] .dashboard_heading {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, rgba(16, 185, 129, .22) 0%, rgba(16, 185, 129, 0) 60%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

html[data-app-theme="dark"] .modal-header,
html[data-app-theme="dark"] .card-header {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 100%);
}

/* 32. Button shape and the secondary pair */

html[data-app-theme="dark"] .btn:not(.rounded-circle):not(.rounded-pill):not(.btn-close):not([class*="circle"]),
html[data-app-theme="dark"] #project_vault button,
html[data-app-theme="dark"] .create_project,
html[data-app-theme="dark"] .notification-button,
html[data-app-theme="dark"] .verify-button {
  border-radius: 8px;
  font-weight: 600;
}

html[data-app-theme="dark"] .btn-outline-secondary:not(.text-white),
html[data-app-theme="dark"] .btn-outline-dark:not(.text-white),
html[data-app-theme="dark"] .btn-outline-light:not(.text-white),
html[data-app-theme="dark"] .btn-light:not(.text-white),
html[data-app-theme="dark"] .btn-secondary:not(.text-white) {
  background: var(--tx-surface);
  border: 1px solid var(--tx-line);
  color: var(--tx-ink);
  box-shadow: none;
}

html[data-app-theme="dark"] .btn-outline-secondary:hover,
html[data-app-theme="dark"] .btn-outline-dark:hover,
html[data-app-theme="dark"] .btn-outline-light:hover,
html[data-app-theme="dark"] .btn-light:hover,
html[data-app-theme="dark"] .btn-secondary:hover {
  background: var(--tx-surface-2);
  border-color: var(--tx-surface-4);
  color: var(--tx-ink);
}

/* 33. Light mode: the dark theme's shape, depth and accent language, on the light palette */

html:not([data-app-theme="dark"]) {
  --tx-accent-gradient: linear-gradient(135deg, #19c4c0 0%, #4fdad6 100%);
  --tx-accent-glow: 0 6px 18px -8px rgba(25, 196, 192, .45);
  --tx-elevation-1: 0 1px 2px rgba(27, 77, 62, .06), 0 8px 20px -14px rgba(27, 77, 62, .28);
  --tx-elevation-2: 0 2px 4px rgba(27, 77, 62, .08), 0 18px 34px -18px rgba(27, 77, 62, .38);
}

html:not([data-app-theme="dark"]) .project_item_box_content,
html:not([data-app-theme="dark"]) #project_details,
html:not([data-app-theme="dark"]) .table_item_box,
html:not([data-app-theme="dark"]) .internal_testing_list,
html:not([data-app-theme="dark"]) .table-wrappers {
  border-radius: 14px;
}

html:not([data-app-theme="dark"]) .card,
html:not([data-app-theme="dark"]) .modal-content,
html:not([data-app-theme="dark"]) .offcanvas {
  border-radius: 12px;
  box-shadow: var(--tx-elevation-1);
}

html:not([data-app-theme="dark"]) .card.border-0 {
  box-shadow: none;
}

html:not([data-app-theme="dark"]) .card > .card-header:first-child,
html:not([data-app-theme="dark"]) .modal-header {
  border-radius: 11px 11px 0 0;
  background-image: linear-gradient(180deg, rgba(27, 77, 62, .035) 0%, rgba(27, 77, 62, 0) 100%);
}

html:not([data-app-theme="dark"]) .card > .card-footer:last-child,
html:not([data-app-theme="dark"]) .modal-footer {
  border-radius: 0 0 11px 11px;
}

html:not([data-app-theme="dark"]) .dashboard_tile {
  border-radius: 14px;
  box-shadow: var(--tx-elevation-1);
  transition: transform .18s ease, box-shadow .18s ease;
}

html:not([data-app-theme="dark"]) .dashboard_tile:hover {
  transform: translateY(-2px);
  box-shadow: var(--tx-elevation-2);
}

html:not([data-app-theme="dark"]) .side_menu_bar {
  box-shadow: 1px 0 24px -14px rgba(27, 77, 62, .55);
}

html:not([data-app-theme="dark"]) .dashborad_menu_bar_ul li,
html:not([data-app-theme="dark"]) .dashborad_menu_bar_ul_add li {
  border-radius: 12px;
}

html:not([data-app-theme="dark"]) thead th,
html:not([data-app-theme="dark"]) .table > thead > tr > th {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
  font-weight: 600;
}

html:not([data-app-theme="dark"]) thead,
html:not([data-app-theme="dark"]) .table-sticky thead th {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, 0) 100%);
}

html:not([data-app-theme="dark"]) .badge:not(.rounded-0) {
  border-radius: 999px;
  font-weight: 600;
}

html:not([data-app-theme="dark"]) .form-control:not(.rounded-pill),
html:not([data-app-theme="dark"]) .form-select:not(.rounded-pill) {
  border-radius: 8px;
}

html:not([data-app-theme="dark"]) .form-control:focus,
html:not([data-app-theme="dark"]) .form-select:focus,
html:not([data-app-theme="dark"]) .btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(25, 196, 192, .18);
}

html:not([data-app-theme="dark"]) .btn:not(.rounded-circle):not(.rounded-pill):not(.btn-close):not([class*="circle"]),
html:not([data-app-theme="dark"]) #project_vault button,
html:not([data-app-theme="dark"]) .create_project,
html:not([data-app-theme="dark"]) .notification-button,
html:not([data-app-theme="dark"]) .verify-button {
  border-radius: 8px;
  font-weight: 600;
}

html:not([data-app-theme="dark"]) .nav-pills .nav-link.active,
html:not([data-app-theme="dark"]) .nav-pills .show > .nav-link {
  border-radius: 8px;
}

html:not([data-app-theme="dark"]) .btn-primary,
html:not([data-app-theme="dark"]) #project_vault button,
html:not([data-app-theme="dark"]) .create_project,
html:not([data-app-theme="dark"]) .notification-button,
html:not([data-app-theme="dark"]) .verify-button,
html:not([data-app-theme="dark"]) .dataTables_paginate .page-item.active .page-link {
  background: var(--tx-accent-gradient);
  border-color: transparent;
  color: #ffffff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .18);
  box-shadow: var(--tx-accent-glow), inset 0 1px 0 rgba(255, 255, 255, .28);
}

html:not([data-app-theme="dark"]) .btn-primary:hover,
html:not([data-app-theme="dark"]) #project_vault button:hover,
html:not([data-app-theme="dark"]) .create_project:hover,
html:not([data-app-theme="dark"]) .notification-button:hover,
html:not([data-app-theme="dark"]) .verify-button:hover {
  background: linear-gradient(135deg, #0ca9a5 0%, #19c4c0 100%);
  color: #ffffff;
  box-shadow: 0 8px 22px -8px rgba(12, 169, 165, .55), inset 0 1px 0 rgba(255, 255, 255, .28);
}

html:not([data-app-theme="dark"]) .dashboard_heading {
  border-bottom-color: transparent;
  background-image: linear-gradient(90deg, rgba(25, 196, 192, .35) 0%, rgba(25, 196, 192, 0) 60%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 100%;
}

html:not([data-app-theme="dark"]) .dashboard_heading h3 {
  font-weight: 700;
}

html[data-app-theme="dark"] #piperun_filter_section,
html[data-app-theme="dark"] #symbol_filter_section {
  background-color: var(--tx-surface-2) !important;
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] #piperun_filter_section .form-label,
html[data-app-theme="dark"] #symbol_filter_section .form-label {
  color: var(--tx-ink-2) !important;
}

html[data-app-theme="dark"] #piperun_filter_section .piperun-filter-input,
html[data-app-theme="dark"] #symbol_filter_section .symbol-filter-input {
  opacity: 1 !important;
}

html[data-app-theme="dark"] #clear_piperun_filter,
html[data-app-theme="dark"] #clear_symbol_filter {
  background-color: var(--tx-surface-4) !important;
  border-color: var(--tx-line) !important;
  color: var(--tx-ink) !important;
}

html[data-app-theme="dark"] #line_types_legend thead th,
html[data-app-theme="dark"] #symbol_types_legend thead th {
  background-color: var(--tx-thead);
  color: var(--tx-thead-ink);
}

html[data-app-theme="dark"] #line_types_legend .table,
html[data-app-theme="dark"] #symbol_types_legend .table,
html[data-app-theme="dark"] #line_types_legend .table > :not(caption) > * > *,
html[data-app-theme="dark"] #symbol_types_legend .table > :not(caption) > * > * {
  --bs-table-bg: transparent;
  background-color: transparent;
  color: var(--tx-ink);
}

html[data-app-theme="dark"] #line_types_legend .table-bordered > :not(caption) > * > *,
html[data-app-theme="dark"] #symbol_types_legend .table-bordered > :not(caption) > * > * {
  border-color: var(--tx-line);
}

/* 34. Drawing board panel outlines */

html[data-app-theme="dark"] #symbols-action-container,
html[data-app-theme="dark"] #lines-action-container,
html[data-app-theme="dark"] #texts-action-container,
html[data-app-theme="dark"] #redlining-action-container,
html[data-app-theme="dark"] .symbols_data_lounge {
  border-color: transparent;
}

/* 35. Dropzone and handover material browser uploads */

html .dropzone .dz-message {
  border-color: var(--tx-line, rgba(27, 77, 62, .28));
  border-radius: 10px;
}

html .dropzone .dz-preview {
  border-radius: 10px;
  padding: 10px 12px;
  margin: 8px 0;
}

html .dropzone .dz-preview .dz-details {
  color: inherit;
}

html .dropzone .dz-preview .dz-details .dz-filename {
  font-weight: 600;
}

html .dropzone .dz-preview .dz-details .dz-size {
  margin-bottom: .35em;
  font-size: 13px;
  opacity: .78;
}

html .dropzone .dz-preview .dz-progress {
  height: 6px;
  border: 0;
  border-radius: 999px;
  background: #dfe7e4;
  overflow: hidden;
}

html .dropzone .dz-preview .dz-progress .dz-upload {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--tx-accent-2, #4fdad6));
}

html .dropzone .dz-preview .dz-progress.pending .dz-upload {
  background: var(--color-pending) !important;
}

html .dropzone .dz-preview .dz-progress.error .dz-upload {
  background: linear-gradient(90deg, #d9534f, #f0736f) !important;
}

html .dropzone .dz-preview .dz-remove {
  opacity: .65;
  transition: opacity .15s ease;
}

html .dropzone .dz-preview .dz-remove:hover {
  opacity: 1;
  text-decoration: none;
}

html[data-app-theme="dark"] .dropzone .dz-preview,
html[data-app-theme="dark"] .dropzone .dz-preview.dz-image-preview {
  background: var(--tx-surface-3);
  border: 1px solid var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .dropzone .dz-preview .dz-details,
html[data-app-theme="dark"] .dropzone .dz-preview .dz-details .dz-filename span,
html[data-app-theme="dark"] .dropzone .dz-preview .dz-details .dz-size span {
  color: var(--tx-ink);
  background: transparent;
}

html[data-app-theme="dark"] .dropzone .dz-preview .dz-progress {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .dropzone .dz-preview .dz-error-message {
  color: #f0736f;
}

html[data-app-theme="dark"] .dropzone .dz-message {
  border-color: var(--tx-line);
}

.hmb-upload-section {
  border: 2px dashed #ccd6d2;
  border-radius: 10px;
  padding: 40px 25px;
  text-align: center;
  background: #f7faf9;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}

.hmb-upload-section:hover,
.hmb-upload-section.is-dragover {
  border-color: var(--primary);
  background: rgba(var(--primary-rgb, 25, 196, 192), .07);
}

.hmb-dz-icon {
  display: block;
  font-size: 40px;
  color: var(--primary);
  margin-bottom: 12px;
}

.hmb-dz-title {
  margin: 5px 0;
  font-weight: 600;
  color: #26332f;
}

.hmb-dz-hint {
  margin: 0;
  font-size: 12px;
  color: #7b8d87;
}

#hmb-upload-progress {
  margin-top: 15px;
}

.hmb-progress-track {
  background: #e3eae7;
  border-radius: 999px;
  overflow: hidden;
}

#hmb-progress-bar {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), var(--tx-accent-2, #4fdad6));
  transition: width .3s ease;
}

#hmb-upload-status {
  font-size: 12px;
  color: #7b8d87;
  margin-top: 6px;
}

.hmb-empty {
  text-align: center;
  padding: 20px 12px;
  color: #7b8d87;
}

.hmb-empty-lg {
  padding: 30px 12px;
}

.hmb-empty-icon {
  display: block;
  font-size: 28px;
  margin-bottom: 8px;
}

.hmb-error {
  color: #dc3545;
}

.hmb-docs-table {
  font-size: 13px;
}

.hmb-doc-icon {
  color: #1d6f42;
  margin-right: 5px;
}

html[data-app-theme="dark"] .hmb-upload-section {
  background: var(--tx-surface-2);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .hmb-upload-section:hover,
html[data-app-theme="dark"] .hmb-upload-section.is-dragover {
  border-color: var(--tx-accent-2);
  background: var(--tx-accent-soft);
}

html[data-app-theme="dark"] .hmb-dz-title {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .hmb-dz-hint,
html[data-app-theme="dark"] #hmb-upload-status,
html[data-app-theme="dark"] .hmb-empty {
  color: var(--tx-muted);
}

html[data-app-theme="dark"] .hmb-progress-track {
  background: var(--tx-surface-4);
}

html[data-app-theme="dark"] .hmb-error {
  color: #f0736f;
}

html[data-app-theme="dark"] .hmb-doc-icon {
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch {
  background-color: #22302a;
  border-color: #35463e;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .38);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch:hover {
  border-color: #4a5f55;
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch .slider {
  background-color: var(--tx-muted);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch input:checked + .slider {
  background-color: var(--tx-accent);
  box-shadow: 0 1px 4px rgba(16, 185, 129, .45);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch input:not(:checked) ~ .no,
html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch input:checked ~ .yes {
  color: #0c1f18;
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch input:not(:checked) ~ .yes,
html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch input:checked ~ .no {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] #symbol_table_selected_symbols .symbol-base-col .toggle-switch:has(input:checked) {
  background-color: #12352c;
  border-color: #1d5344;
}

/* 36. Tutorials */

html[data-app-theme="dark"] .tutorial-card,
html[data-app-theme="dark"] .tutorial-category-card {
  background: linear-gradient(135deg, var(--tx-surface) 0%, var(--tx-surface-2) 100%);
  border-color: var(--tx-line);
}

html[data-app-theme="dark"] .tutorial-card:hover,
html[data-app-theme="dark"] .tutorial-category-card:hover {
  border-color: var(--tx-accent);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .45);
}

html[data-app-theme="dark"] .tutorial-card .card-title,
html[data-app-theme="dark"] .tutorial-category-card .card-title {
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tutorial-card .card-text,
html[data-app-theme="dark"] .tutorial-category-card .card-text,
html[data-app-theme="dark"] .tutorial-card .card-body p,
html[data-app-theme="dark"] .tutorial-category-card .card-body p {
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .tutorial-category-card .card-title i,
html[data-app-theme="dark"] .tutorial-card .card-title i {
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .tutorial-card .btn-outline-primary,
html[data-app-theme="dark"] .tutorial-category-card .btn-outline-primary {
  border-color: var(--tx-accent);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .tutorial-card .btn-outline-primary:hover,
html[data-app-theme="dark"] .tutorial-category-card .btn-outline-primary:hover {
  background-color: var(--tx-accent);
  border-color: var(--tx-accent);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] .tutorial-card .btn-outline-success,
html[data-app-theme="dark"] .tutorial-category-card .btn-outline-success {
  border-color: var(--tx-accent-2);
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .tutorial-card .btn-outline-success:hover,
html[data-app-theme="dark"] .tutorial-category-card .btn-outline-success:hover {
  background-color: var(--tx-accent-2);
  border-color: var(--tx-accent-2);
  color: var(--tx-on-accent);
}

html[data-app-theme="dark"] .tutorial-card .btn-outline-secondary,
html[data-app-theme="dark"] .tutorial-category-card .btn-outline-secondary {
  border-color: var(--tx-line);
  color: var(--tx-ink-2);
}

html[data-app-theme="dark"] .tutorial-card .btn-outline-secondary:hover,
html[data-app-theme="dark"] .tutorial-category-card .btn-outline-secondary:hover {
  background-color: var(--tx-surface-3);
  border-color: var(--tx-line);
  color: var(--tx-ink);
}

html[data-app-theme="dark"] .tutorial-category-card .badge {
  background-color: var(--tx-accent-soft) !important;
  color: var(--tx-accent-2);
}

html[data-app-theme="dark"] .tutorial-image,
html[data-app-theme="dark"] .tutorial-image-placeholder {
  border-bottom-color: var(--tx-line);
}

html[data-app-theme="dark"] .search-box {
  background: var(--tx-surface);
  border-color: var(--tx-line);
  box-shadow: var(--tx-shadow);
}

html[data-app-theme="dark"] [style*="background-color: #e8f5e8"],
html[data-app-theme="dark"] [style*="background-color:#e8f5e8"] {
  background-color: var(--tx-accent-soft) !important;
  border-color: var(--tx-line) !important;
}

html[data-app-theme="dark"] .modal-header[style*="background-color: #f8f9fa"],
html[data-app-theme="dark"] .modal-header[style*="background-color:#f8f9fa"] {
  background-color: var(--tx-surface-2) !important;
  border-bottom-color: var(--tx-line) !important;
}