/* ============================================================= */
/*  Hansel Dashboard — Light / Dark theme                         */
/*  Theme token layer.                                           */
/*  - `:root`            = Light (default)                       */
/*  - html[data-theme]   = set by the sidebar toggle / anti-FOUC */
/*    script in index.html (persisted to localStorage).          */
/*                                                               */
/*  Loaded LAST inside the app css build block so overrides win. */
/* ============================================================= */

:root {
  color-scheme: light;

  --hs-canvas:         #eff3f4;
  --hs-canvas-stage:   #e9e3de;
  --hs-surface:        #ffffff;
  --hs-surface-2:      #f9f9f9;
  --hs-surface-3:      #f4f4f4;
  --hs-border:         #e1e5e8;
  --hs-border-soft:    #eeeeee;
  --hs-text:           #333333;
  --hs-text-strong:    #222222;
  --hs-text-sub:       #777777;
  --hs-text-muted:     #999999;
  --hs-label:          #666666;
  --hs-brand:          #1485c6;
  --hs-brand-soft:     #3c8dbc;
  --hs-link:           #3c8dbc;
  --hs-link-hover:     #72afd2;
  --hs-green:          #0a9f34;
  --hs-green-hover:    #23ad44;
  --hs-rail:           #333333;
  --hs-row-hover:      #f9f9f9;
  --hs-input-bg:       #ffffff;
  --hs-input-border:   #d1d5db;
}

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

  --hs-canvas:         #15181d;
  --hs-canvas-stage:   #1f1917;
  --hs-surface:        #1f242a;
  --hs-surface-2:      #232930;
  --hs-surface-3:      #2a313a;
  --hs-border:         #2e353f;
  --hs-border-soft:    #2a303a;
  --hs-text:           #d7dce3;
  --hs-text-strong:    #e8ecf1;
  --hs-text-sub:       #9aa3ad;
  --hs-text-muted:     #8f98a3;
  --hs-label:          #a6aebb;
  --hs-brand:          #4fb3f0;
  --hs-brand-soft:     #5ea8dc;
  --hs-link:           #5ea8dc;
  --hs-link-hover:     #8ac4ea;
  --hs-green:          #28b84e;
  --hs-green-hover:    #3ccd63;
  --hs-rail:           #1b1e23;
  --hs-row-hover:      #232930;
  --hs-input-bg:       #171b21;
  --hs-input-border:   #3a424d;
}

/* ---------- Canvas & base text ---------- */

html[data-theme='dark'],
html[data-theme='dark'] body {
  background-color: var(--hs-canvas) !important;
  color: var(--hs-text);
}

html[data-theme='dark'] body.stage-env {
  background-color: var(--hs-canvas-stage) !important;
}

html[data-theme='dark'] .right-side,
html[data-theme='dark'] .main-right-content,
html[data-theme='dark'] #content,
html[data-theme='dark'] .content {
  background-color: var(--hs-canvas) !important;
  color: var(--hs-text);
}

html[data-theme='dark'] a {
  color: var(--hs-link);
}

html[data-theme='dark'] a:hover,
html[data-theme='dark'] a:active,
html[data-theme='dark'] a:focus {
  color: var(--hs-link-hover);
}

html[data-theme='dark'] .main-right-content h1,
html[data-theme='dark'] .main-right-content h2,
html[data-theme='dark'] .main-right-content h3,
html[data-theme='dark'] .main-right-content h4,
html[data-theme='dark'] .main-right-content h5,
html[data-theme='dark'] .main-right-content h6 {
  color: var(--hs-text-strong);
}

html[data-theme='dark'] hr {
  border-top-color: var(--hs-border);
}

/* ---------- Cards / surfaces ---------- */

html[data-theme='dark'] .box,
html[data-theme='dark'] .box-body,
html[data-theme='dark'] .box-header,
html[data-theme='dark'] .box-footer,
html[data-theme='dark'] .well,
html[data-theme='dark'] .bg-white,
html[data-theme='dark'] .panel-default,
html[data-theme='dark'] .panel-default > .panel-heading,
html[data-theme='dark'] .panel-default > .panel-body,
html[data-theme='dark'] .panel-default > .panel-footer,
html[data-theme='dark'] .app-details-content,
html[data-theme='dark'] .app-details-content .panel-heading {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text);
}

html[data-theme='dark'] .box,
html[data-theme='dark'] .well,
html[data-theme='dark'] .panel-default,
html[data-theme='dark'] .panel-default > .panel-heading,
html[data-theme='dark'] .panel-default > .panel-footer,
html[data-theme='dark'] .app-details-content {
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .box-header,
html[data-theme='dark'] .panel-default > .panel-heading,
html[data-theme='dark'] .app-details-content .panel-heading {
  border-bottom-color: var(--hs-border) !important;
}

html[data-theme='dark'] .box-title,
html[data-theme='dark'] .panel-title,
html[data-theme='dark'] .app-details-content .panel-heading {
  color: var(--hs-text-strong) !important;
}

/* Stability reskin cards */
html[data-theme='dark'] .hansel-stability .hs-stat,
html[data-theme='dark'] .hansel-stability .view-ui-hotfix-container {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ---------- Tables ---------- */

html[data-theme='dark'] .table {
  color: var(--hs-text);
  background-color: transparent;
}

html[data-theme='dark'] .table > thead > tr > th,
html[data-theme='dark'] .table > tfoot > tr > th,
html[data-theme='dark'] .table > thead > tr > td,
html[data-theme='dark'] .table > tbody > tr > th,
html[data-theme='dark'] .table > tbody > tr > td,
html[data-theme='dark'] .table > tfoot > tr > td,
html[data-theme='dark'] .table-bordered {
  border-color: var(--hs-border);
}

html[data-theme='dark'] .table > thead > tr > th {
  background-color: #1a1f25 !important;
  border-bottom: 1px solid var(--hs-border) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .table > tbody > tr > td {
  border-top-color: var(--hs-border-soft) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .table-striped > tbody > tr:nth-child(odd),
html[data-theme='dark'] .table-striped > tbody > tr:nth-child(odd) > td,
html[data-theme='dark'] .table-striped > tbody > tr:nth-child(odd) > th {
  background-color: #1b2129 !important;
}

html[data-theme='dark'] .table-hover > tbody > tr:hover,
html[data-theme='dark'] .table-hover > tbody > tr:hover > td,
html[data-theme='dark'] .table-hover > tbody > tr:hover > th,
html[data-theme='dark'] .table > tbody > tr.hover,
html[data-theme='dark'] .table > tbody > tr.hover > td {
  background-color: var(--hs-row-hover) !important;
}

html[data-theme='dark'] .hansel-table .table.table-bordered tbody {
  background-color: transparent;
}

/* Stability patch table */
html[data-theme='dark'] .hansel-stability .hs-table-head {
  background-color: #1a1f25 !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-stability .column-title {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-stability .ui-hotfix-row {
  border-bottom-color: var(--hs-border-soft);
}

html[data-theme='dark'] .hansel-stability .ui-hotfix-row:hover {
  background-color: var(--hs-row-hover) !important;
}

html[data-theme='dark'] .hansel-stability .ui-hotfix-ref-name h4 {
  color: var(--hs-text-strong);
}

html[data-theme='dark'] .hansel-stability .ui-hotfix-ref-name-container .small {
  color: var(--hs-text-muted);
}

/* ---------- Modals ---------- */

html[data-theme='dark'] .modal-content {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .modal-header,
html[data-theme='dark'] .modal-footer {
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .modal-title {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .modal-header .close {
  color: var(--hs-text);
  opacity: 0.8;
  text-shadow: none;
}

html[data-theme='dark'] .modal-body {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body label,
html[data-theme='dark'] .modal-body .control-label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .modal-body h1,
html[data-theme='dark'] .modal-body h2,
html[data-theme='dark'] .modal-body h3,
html[data-theme='dark'] .modal-body h4,
html[data-theme='dark'] .modal-body h5,
html[data-theme='dark'] .modal-body .form-title,
html[data-theme='dark'] .modal-body .modal-sub-title {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .modal-body p,
html[data-theme='dark'] .modal-body span,
html[data-theme='dark'] .modal-body li,
html[data-theme='dark'] .modal-body .help-block,
html[data-theme='dark'] .modal-body .description-text {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body .well,
html[data-theme='dark'] .modal-body .panel,
html[data-theme='dark'] .modal-body .box,
html[data-theme='dark'] .modal-body .box-body {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .modal-body .well *,
html[data-theme='dark'] .modal-body .panel *,
html[data-theme='dark'] .modal-body .box * {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body .table {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body .table th,
html[data-theme='dark'] .modal-body .table td {
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body .table thead th,
html[data-theme='dark'] .modal-body .table thead td {
  background-color: var(--hs-surface-2) !important;
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .modal-body .table-striped > tbody > tr:nth-child(odd),
html[data-theme='dark'] .modal-body .table-striped > tbody > tr:nth-child(odd) > td {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .modal-body dl,
html[data-theme='dark'] .modal-body dt,
html[data-theme='dark'] .modal-body dd {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body dt {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .modal-body .dn-toggle,
html[data-theme='dark'] .modal-body .info-text,
html[data-theme='dark'] .modal-body .warning-text {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .modal-body .form-section-divider {
  border-color: var(--hs-border) !important;
}

/* ---------- Add user / tags-input form ---------- */

html[data-theme='dark'] .add-edit-form tags-input .host,
html[data-theme='dark'] .sheuu-modal tags-input .host,
html[data-theme='dark'] tags-input .tags {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .add-edit-form tags-input .tags,
html[data-theme='dark'] .sheuu-modal tags-input .tags {
  background-color: transparent !important;
}

html[data-theme='dark'] tags-input .tags .input {
  background-color: transparent !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] tags-input .tags .input::placeholder,
html[data-theme='dark'] tags-input .tags .input::-webkit-input-placeholder {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .add-edit-form tags-input .tags .tag-item {
  background: var(--hs-brand-soft) !important;
  border-color: var(--hs-brand-soft) !important;
  color: #fff !important;
}

html[data-theme='dark'] .add-edit-form tags-input .tags .tag-item .remove-button {
  color: rgba(255, 255, 255, 0.85) !important;
}

html[data-theme='dark'] tags-input[disabled] .tags,
html[data-theme='dark'] tags-input[disabled] .tags .input {
  background-color: var(--hs-surface-3) !important;
}

html[data-theme='dark'] tags-input .autocomplete {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme='dark'] tags-input .autocomplete .suggestion-item {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] tags-input .autocomplete .suggestion-item em {
  background-color: transparent !important;
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] tags-input .autocomplete .suggestion-item.selected,
html[data-theme='dark'] tags-input .autocomplete .suggestion-item.selected em {
  background-color: var(--hs-brand) !important;
  color: #fff !important;
}

html[data-theme='dark'] .add-edit-form .form-group label,
html[data-theme='dark'] .sheuu-modal .form-group label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .add-edit-form .pane-header h4,
html[data-theme='dark'] .sheuu-modal .pane-header h4 {
  color: var(--hs-text-strong) !important;
}

/* ---------- intro.js tooltips ---------- */

html[data-theme='dark'] .introjs-tooltip {
  background-color: var(--hs-surface) !important;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.55) !important;
}

html[data-theme='dark'] .introjs-tooltip * {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .introjs-tooltip h1,
html[data-theme='dark'] .introjs-tooltip h2,
html[data-theme='dark'] .introjs-tooltip h3,
html[data-theme='dark'] .introjs-tooltip h4,
html[data-theme='dark'] .introjs-tooltip h5,
html[data-theme='dark'] .introjs-tooltip .introjs-tooltiptext {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .introjs-helperLayer {
  background-color: var(--hs-surface-3) !important;
  border-color: var(--hs-border) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.6) !important;
}

html[data-theme='dark'] .introjs-arrow {
  border-color: transparent !important;
}

html[data-theme='dark'] .introjs-arrow.top,
html[data-theme='dark'] .introjs-arrow.top-right,
html[data-theme='dark'] .introjs-arrow.top-middle {
  border-bottom-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .introjs-arrow.bottom {
  border-top-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .introjs-arrow.right,
html[data-theme='dark'] .introjs-arrow.right-bottom {
  border-left-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .introjs-arrow.left,
html[data-theme='dark'] .introjs-arrow.left-bottom {
  border-right-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .introjs-button {
  background-color: var(--hs-surface-2) !important;
  background-image: none !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .introjs-button:hover {
  background-color: var(--hs-surface-3) !important;
  border-color: var(--hs-border) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .introjs-button:focus,
html[data-theme='dark'] .introjs-button:active {
  background-image: none !important;
}

html[data-theme='dark'] .introjs-skipbutton {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .introjs-nextbutton {
  background-color: var(--hs-brand) !important;
  border-color: var(--hs-brand) !important;
  color: #fff !important;
}

html[data-theme='dark'] .introjs-nextbutton:hover {
  background-color: var(--hs-brand-soft) !important;
  border-color: var(--hs-brand-soft) !important;
  color: #fff !important;
}

html[data-theme='dark'] .introjs-nextbutton * {
  color: #fff !important;
}

html[data-theme='dark'] .introjs-disabled,
html[data-theme='dark'] .introjs-disabled:hover,
html[data-theme='dark'] .introjs-disabled:focus {
  background-color: var(--hs-surface-3) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text-muted) !important;
  box-shadow: none !important;
}

html[data-theme='dark'] .introjs-bullets ul li a {
  background-color: var(--hs-border) !important;
}

html[data-theme='dark'] .introjs-bullets ul li a:hover,
html[data-theme='dark'] .introjs-bullets ul li a.active {
  background-color: var(--hs-brand) !important;
}

html[data-theme='dark'] .introjs-progress {
  background-color: var(--hs-surface-3) !important;
}

html[data-theme='dark'] .introjs-progressbar {
  background-color: var(--hs-brand) !important;
}

html[data-theme='dark'] .introjs-helperNumberLayer {
  background: var(--hs-brand) !important;
  border-color: var(--hs-border) !important;
}

/* ---------- Onboard / create app ---------- */

html[data-theme='dark'] .create-app-container {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .create-new-app h2 {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .create-new-app .form-group label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .create-app-container p {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .create-app-form .dropdown-toggle {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .create-app-form .dropdown-toggle .caret {
  border-top-color: var(--hs-text) !important;
}

html[data-theme='dark'] .create-app-container .btn-cancel,
html[data-theme='dark'] .create-app-container .btn-cancel:hover,
html[data-theme='dark'] .create-app-container .btn-cancel:focus {
  color: var(--hs-brand) !important;
  background-color: transparent !important;
}

/* ---------- Test groups modal ---------- */

html[data-theme='dark'] .hansel-testgroups .modal-content {
  border-color: var(--hs-border) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme='dark'] .hansel-testgroups .modal-header,
html[data-theme='dark'] .hansel-testgroups .modal-footer {
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-testgroups .tab-pane {
  border-top-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-testgroups .tab-pane ul li a {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-testgroups .tab-pane ul li a.active,
html[data-theme='dark'] .hansel-testgroups .tab-pane ul li a:hover {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .hansel-testgroups .table > tbody > tr > td,
html[data-theme='dark'] .hansel-testgroups .table > tbody > tr > th {
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-testgroups .table > tbody > tr.active,
html[data-theme='dark'] .hansel-testgroups .table > tbody > tr.active > td {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .hansel-testgroups .table > tbody > tr[style*="background-color:#FFF"],
html[data-theme='dark'] .hansel-testgroups .table > tbody > tr[style*="background-color: #FFF"],
html[data-theme='dark'] .hansel-testgroups .table > tbody > tr[style*="background-color:#Fff"],
html[data-theme='dark'] .hansel-testgroups .table > tbody > tr[style*="background-color:white"] {
  background-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .hansel-testgroups .table-hover > tbody > tr:hover,
html[data-theme='dark'] .hansel-testgroups .table-hover > tbody > tr:hover > td {
  background-color: var(--hs-row-hover) !important;
}

html[data-theme='dark'] .hansel-testgroups .alert-warning {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .panel.panel-danger {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .panel.panel-danger .panel-body {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .panel.panel-danger .panel-body a {
  color: var(--hs-link) !important;
}

html[data-theme='dark'] .hansel-testgroups .alert-warning strong {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-testgroups strong,
html[data-theme='dark'] .hansel-testgroups ol li,
html[data-theme='dark'] .hansel-testgroups .sdk-version-selector {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-testgroups .form-control {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

/* ---------- Popovers ---------- */

html[data-theme='dark'] .popover {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme='dark'] .popover-title {
  background-color: var(--hs-surface-2) !important;
  border-bottom-color: var(--hs-border) !important;
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .popover-content {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .popover-content * {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .popover .arrow,
html[data-theme='dark'] .popover .arrow:after {
  border-color: transparent !important;
}

html[data-theme='dark'] .popover.top .arrow {
  border-top-color: var(--hs-border) !important;
}

html[data-theme='dark'] .popover.top .arrow:after {
  border-top-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .popover.right .arrow {
  border-right-color: var(--hs-border) !important;
}

html[data-theme='dark'] .popover.right .arrow:after {
  border-right-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .popover.bottom .arrow {
  border-bottom-color: var(--hs-border) !important;
}

html[data-theme='dark'] .popover.bottom .arrow:after {
  border-bottom-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .popover.left .arrow {
  border-left-color: var(--hs-border) !important;
}

html[data-theme='dark'] .popover.left .arrow:after {
  border-left-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .popover .input-group-addon,
html[data-theme='dark'] .popover .btn-default,
html[data-theme='dark'] .popover .btn-primary,
html[data-theme='dark'] .popover .btn-success {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .popover .btn-primary,
html[data-theme='dark'] .popover .btn-success {
  background-color: var(--hs-brand) !important;
  border-color: var(--hs-brand) !important;
  color: #fff !important;
}

/* ---------- Forms & inputs ---------- */

html[data-theme='dark'] .form-control {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .form-control:focus {
  border-color: var(--hs-brand-soft) !important;
  box-shadow: 0 0 0 2px rgba(94, 168, 220, 0.15) !important;
}

html[data-theme='dark'] .form-control[readonly],
html[data-theme='dark'] .form-control[disabled] {
  background-color: #1a1e24 !important;
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] select.form-control option {
  background-color: var(--hs-surface);
  color: var(--hs-text);
}

html[data-theme='dark'] .styled-select-box {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] select.styled-select-box option {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] select.styled-select-box[disabled="disabled"] {
  background-color: #1a1e24 !important;
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .input-group-addon {
  background-color: #1a1f25 !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-label) !important;
}

/* ---------- Dropdowns ---------- */

html[data-theme='dark'] .dropdown-menu {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .dropdown-menu > li > a {
  color: var(--hs-text) !important;
  background-color: transparent !important;
}

html[data-theme='dark'] .dropdown-menu > li > a:hover,
html[data-theme='dark'] .dropdown-menu > li > a:focus {
  background-color: var(--hs-surface-3) !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .dropdown-menu .divider {
  background-color: var(--hs-border) !important;
}

html[data-theme='dark'] li.dropdown-header {
  color: var(--hs-label) !important;
  background-color: var(--hs-surface-2) !important;
  border-top: 1px solid var(--hs-border) !important;
  border-bottom: 1px solid var(--hs-border) !important;
}

html[data-theme='dark'] .dropdown-menu > .active > a,
html[data-theme='dark'] .dropdown-menu > .active > a:hover,
html[data-theme='dark'] .dropdown-menu > .active > a:focus {
  background-color: var(--hs-brand-soft) !important;
}

/* ---------- Tabs ---------- */

html[data-theme='dark'] .nav-tabs {
  border-bottom-color: var(--hs-border);
}

html[data-theme='dark'] .nav-tabs > li > a {
  color: var(--hs-text-muted);
}

html[data-theme='dark'] .nav-tabs > li.active > a,
html[data-theme='dark'] .nav-tabs > li.active > a:hover,
html[data-theme='dark'] .nav-tabs > li.active > a:focus {
  background-color: var(--hs-surface);
  border-color: var(--hs-border);
  border-bottom-color: transparent;
  color: var(--hs-brand);
}

html[data-theme='dark'] .hansel-settings .hs-tabs {
  border-bottom-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-settings .hs-tabs ul li a {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-settings .hs-tabs ul li a:hover {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-settings .hs-tabs ul li a.active {
  color: var(--hs-brand) !important;
  border-bottom-color: var(--hs-brand) !important;
}

/* ---------- Buttons ---------- */

html[data-theme='dark'] .btn-default {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .btn-default:hover,
html[data-theme='dark'] .btn-default:focus,
html[data-theme='dark'] .btn-default.active {
  background-color: var(--hs-surface-3) !important;
  border-color: #454e59 !important;
  color: #ffffff !important;
}

html[data-theme='dark'] .hansel-settings .btn.hansel-btn-grey {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-settings .btn.hansel-btn-grey:hover,
html[data-theme='dark'] .hansel-settings .btn.hansel-btn-grey:focus {
  background-color: var(--hs-surface-3) !important;
  color: var(--hs-text-strong) !important;
}

/* ---------- Reskinned page text ---------- */

html[data-theme='dark'] .hansel-settings .hs-app-name,
html[data-theme='dark'] .hansel-stability .hs-page-title {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-settings .hs-app-sub,
html[data-theme='dark'] .hansel-stability .hs-page-sub,
html[data-theme='dark'] .hansel-settings .documentation-help-text {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-stability .hs-stat-num {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .hansel-stability .hs-stat-label {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-settings .settings-title-row h2 {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-settings .settings-title-row h4 {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-settings .app-details-content label,
html[data-theme='dark'] .hansel-settings .app-details-container label,
html[data-theme='dark'] .app-details-content label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .app-details-content .documentation-help-text {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .app-details-content .panel-body {
  color: var(--hs-text);
}

/* Env badges keep meaning but go darker */
html[data-theme='dark'] .hansel-settings .hs-env-badge {
  color: #7ee2a4 !important;
  background-color: #123323 !important;
  border-color: #1f9e43 !important;
}

html[data-theme='dark'] .hansel-settings .hs-env-badge:before {
  background-color: #2eb55a !important;
}

html[data-theme='dark'] .hansel-settings .hs-env-badge.stage {
  color: #ffd98a !important;
  background-color: #33270f !important;
  border-color: #c77d0a !important;
}

html[data-theme='dark'] .hansel-settings .hs-env-badge.stage:before {
  background-color: #f39c12 !important;
}

/* ---------- Sidebar chrome ---------- */

html[data-theme='dark'] .hs-rail {
  background-color: var(--hs-rail);
}

html[data-theme='dark'] .hs-rail-item:hover,
html[data-theme='dark'] .hs-rail-item:focus {
  background-color: var(--hs-surface-3);
}

html[data-theme='dark'] .hs-flyout {
  background-color: #1f242a;
  border-right-color: var(--hs-border);
}

/* ---------- Toast / misc ---------- */

html[data-theme='dark'] #toast-container > div {
  background-color: #2a313a !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] #toast-container > .toast-custom,
html[data-theme='dark'] #toast-container > .toast-info {
  background-image: none !important;
}

/* Appear/transition when toggling */
body {
  transition: background-color 0.2s ease;
}

/* ---------- Create Code Fix page (hansel-create) ---------- */

html[data-theme='dark'] .hansel-create .view-and-intent-container,
html[data-theme='dark'] .hansel-create .functionListDropdown,
html[data-theme='dark'] .hansel-create .select-preset-container div div {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-create .hs-page-title,
html[data-theme='dark'] .hansel-create .view-and-intent-container h3,
html[data-theme='dark'] .hansel-create .select-preset-container .preset-name,
html[data-theme='dark'] .hansel-create .customize-container h4 {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-create .hs-page-sub,
html[data-theme='dark'] .hansel-create .left-bar-info,
html[data-theme='dark'] .hansel-create .customize-container h4 small,
html[data-theme='dark'] .hansel-create .select-preset-container .preset-desc,
html[data-theme='dark'] .hansel-create .patch-selection-summary-row .overflow-protect {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-create .form-label,
html[data-theme='dark'] .hansel-create .stabilization-patch-criteria h4 {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-create .ui-create-hotfix-step .step-state {
  border-color: var(--hs-brand);
  background-color: var(--hs-surface);
}

html[data-theme='dark'] .hansel-create .ui-create-hotfix-step .step-state > span.number,
html[data-theme='dark'] .hansel-create .ui-create-hotfix-step .step-name {
  color: var(--hs-brand);
}

html[data-theme='dark'] .hansel-create .ui-create-hotfix-step.incomplete .step-state,
html[data-theme='dark'] .hansel-create .ui-create-hotfix-step.incomplete .step-state > span.number,
html[data-theme='dark'] .hansel-create .ui-create-hotfix-step.incomplete .step-name {
  border-color: #3a424d;
  color: var(--hs-text-muted);
}

html[data-theme='dark'] .hansel-create .ui-create-hotfix-step:before {
  border-color: #3a424d;
}

html[data-theme='dark'] .hansel-create .view-and-intent-container hr {
  border-top-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-create .ui-create-hotfix-step.done:before {
  border-color: var(--hs-green);
}

html[data-theme='dark'] .hansel-create .patch-selection-summary-row {
  background-color: #1a1f25 !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-create .patch-selection-summary-row .bordered-left {
  border-left-color: var(--hs-border);
}

html[data-theme='dark'] .hansel-create .select-preset-container div div:hover {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .hansel-create .select-preset-container div.selected div {
  border-color: var(--hs-green) !important;
  box-shadow: 0 0 0 1px var(--hs-green);
  background-color: #143321 !important;
}

html[data-theme='dark'] .hansel-create .select-preset-container div div .fa {
  color: var(--hs-border);
}

html[data-theme='dark'] .hansel-create .select-preset-container div.selected .fa {
  color: var(--hs-green);
}

html[data-theme='dark'] .hansel-create .function-select-form.form-control,
html[data-theme='dark'] .hansel-create .view-and-intent-container input.form-control,
html[data-theme='dark'] .hansel-create #functionListSelector input,
html[data-theme='dark'] .hansel-create .ui-manager-view-container .btn-group.function-select-form .btn {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-create .ui-manager-view-container .btn[disabled] {
  background-color: #1a1e24 !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-create .ui-manager-view-container .dropdown-menu {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-create .ui-manager-view-container .dropdown-menu > li > a,
html[data-theme='dark'] .hansel-create .functionListDropdown .functionLine {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-create .functionListDropdown .table-hover > tbody > tr:hover {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .hansel-create .stabilization-patch-criteria hr {
  border-top-color: var(--hs-border);
}

/* ---------- Change Code Fix summary (hansel-summary) ---------- */

html[data-theme='dark'] .hansel-summary .hs-badge-live {
  background-color: #143321;
  border-color: #1f5a35;
  color: #4cd07a;
}

html[data-theme='dark'] .hansel-summary .hs-badge-invalid {
  background-color: #1a1f25;
  border-color: #3a424d;
  color: var(--hs-text-muted);
}

html[data-theme='dark'] .hansel-summary .view-ui-hotfix-container {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-summary .view-ui-hotfix-container h3 {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-summary .view-ui-hotfix-container hr {
  border-top-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-summary .view-ui-hotfix-container h3 .all-upper-case.pull-right a,
html[data-theme='dark'] .hansel-summary .view-ui-hotfix-container h3 .small a {
  color: var(--hs-brand);
}

html[data-theme='dark'] .hansel-summary .func-signature {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-summary .func-signature .sig-path,
html[data-theme='dark'] .hansel-summary .func-signature .sig-args {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-summary .func-signature .sig-name {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-summary .device-imapct-block {
  background-color: #1a1f25 !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-summary .target-selector {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-summary .additional-filters-title {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-summary .btn-group .dropdown-menu {
  background-color: #232930 !important;
  border-color: #3a424d !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme='dark'] .hansel-summary .btn-group .dropdown-menu > li > a {
  color: #d7dce3 !important;
}

html[data-theme='dark'] .hansel-summary .btn-group .dropdown-menu > li > a:hover,
html[data-theme='dark'] .hansel-summary .btn-group .dropdown-menu > li > a:focus {
  background-color: #2a313a !important;
  color: #e8ecf1 !important;
}

html[data-theme='dark'] .hansel-summary .btn-group .dropdown-menu > li > a.active {
  background-color: #5ea8dc !important;
  color: #ffffff !important;
}

/* ---------- User Management pages (hansel-users) ---------- */

html[data-theme='dark'] .hansel-users .hs-page-title {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-users .hs-page-sub {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-users .hs-back-link,
html[data-theme='dark'] .hansel-users .hs-back-link:hover,
html[data-theme='dark'] .hansel-users .hs-back-link:focus {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .user-management-page .hansel-card {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme='dark'] .user-management-page.hansel-users .section-header {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .user-management-page.hansel-users .hs-assign-role {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .user-management-page.hansel-users .user-empty-title,
html[data-theme='dark'] .user-management-page.hansel-users .user-empty-text {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .user-management-page .kd-table td {
  border-color: var(--hs-border-soft) !important;
  border-top-color: var(--hs-border-soft) !important;
}

html[data-theme='dark'] .user-management-page .kd-table table {
  border: 1px solid var(--hs-input-border) !important;
  border-collapse: collapse;
}

html[data-theme='dark'] .user-management-page .kd-table thead,
html[data-theme='dark'] .user-management-page .kd-table table > thead {
  border-top: 1px solid var(--hs-input-border) !important;
  border-bottom: 1px solid var(--hs-input-border) !important;
}

html[data-theme='dark'] .user-management-page .kd-table thead tr,
html[data-theme='dark'] .user-management-page .kd-table table > thead > tr {
  border: 1px solid var(--hs-input-border) !important;
}

html[data-theme='dark'] .user-management-page .kd-table thead td {
  background-color: #1a1f25 !important;
  border-top-color: var(--hs-input-border) !important;
  border-bottom-color: var(--hs-input-border) !important;
  border-left-color: var(--hs-input-border) !important;
  border-right-color: var(--hs-input-border) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .user-management-page .kd-table tbody tr {
  border-color: var(--hs-border-soft) !important;
  border-bottom-color: var(--hs-input-border) !important;
}

html[data-theme='dark'] .user-management-page .kd-table tbody tr:hover {
  background-color: var(--hs-row-hover) !important;
}

html[data-theme='dark'] .user-management-page .kd-table tbody td {
  border-top: 1px solid var(--hs-border-soft) !important;
  background-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .user-management-page .kd-table tbody td:first-child {
  border-left: 0 !important;
}

html[data-theme='dark'] .user-management-page .kd-table tbody td:last-child {
  border-right: 0 !important;
}

html[data-theme='dark'] .user-management-page table tr td {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .user-management-page table tr td a {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .user-management-page .table-link-btn.blue {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .user-management-page .table-link-btn.red {
  color: #f56954 !important;
}

html[data-theme='dark'] .role-access-tag {
  background-color: #1f242a !important;
  border-color: #3a424d !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .user-management-page .form-group label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-search-input-container {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
}

html[data-theme='dark'] .hansel-search-input-container .hansel-search-input {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-search-input-container .hansel-search-input::placeholder {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .user-management-page .btn-dark.force-disabled {
  background-color: #1a1e24 !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text-muted) !important;
}

/* ---------- Patch view preview editor ---------- */

html[data-theme='dark'] .patch-view-preview-row,
html[data-theme='dark'] .patch-view-detail-active-row,
html[data-theme='dark'] .patch-view-preview-row.editor {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .patch-view-preview-row .frames,
html[data-theme='dark'] .patch-view-detail-active-row .frames {
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_gutter,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_gutter,
html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_gutter-layer,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_gutter-layer {
  background-color: var(--hs-surface-2) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_content,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_content,
html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_scroller,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_scroller,
html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_text-layer,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_text-layer {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_active-line,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_active-line {
  background-color: var(--hs-surface-3) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_gutter-active-line,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_gutter-active-line {
  background-color: var(--hs-surface-3) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_marker-layer .ace_selection,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_marker-layer .ace_selection {
  background-color: var(--hs-brand-soft) !important;
}

html[data-theme='dark'] .patch-view-preview-row .ace_editor .ace_cursor,
html[data-theme='dark'] .patch-view-detail-active-row .ace_editor .ace_cursor {
  border-left-color: var(--hs-brand) !important;
}

/* Monaco (pengganti modern ui-ace): samakan marker read-only + disabled
   dengan tema. Mode terang memakai default vs-dark vs bawaan Monaco. */
.patch-view-preview-row .monaco-editor .readOnly,
.patch-view-detail-active-row .monaco-editor .readOnly {
  background-color: #DDD;
  opacity: 0.7;
}
html[data-theme='dark'] .patch-view-preview-row .monaco-editor .readOnly,
html[data-theme='dark'] .patch-view-detail-active-row .monaco-editor .readOnly {
  background-color: var(--hs-surface-3) !important;
  opacity: 0.85;
}
.patch-view-preview-row .monaco-editor.monaco-disabled,
.patch-view-detail-active-row .monaco-editor.monaco-disabled {
  opacity: 0.8;
}
/* Ikon folding Monaco (lebar hitbox 26px) meluber ~2px melewati tepi kanan
   gutter sehingga tertutup layer konten (panah terlihat terpotong, jelas
   di baris current-line/selection yang ber-background). Angkat seluruh
   margin di atas konten. (z-index harus di .margin itu sendiri, bukan di
   anaknya — anak tidak bisa keluar dari urutan tumpuk induknya.)
   margin:0 wajib: utility global .margin{margin:10px} di style.css
   menabrak elemen internal .margin milik Monaco sehingga gutter bergeser
   10px menutupi karakter pertama tiap baris. */
.patch-view-preview-row .monaco-editor .margin,
.patch-view-detail-active-row .monaco-editor .margin {
  margin: 0;
  z-index: 2;
}

html[data-theme='dark'] .patch-view-preview-row.editor #editor-helper {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .patch-view-preview-row.editor #drawer-icon:after {
  background-color: var(--hs-border) !important;
}

html[data-theme='dark'] .patch-view-preview-row.editor #error {
  background-color: #2b1e21 !important;
  border-color: #5c333a !important;
  color: #f2b8bd !important;
}

html[data-theme='dark'] .patch-view-preview-row.editor #error pre {
  background: rgba(0, 0, 0, 0.28) !important;
  border-color: #5c333a !important;
  color: #f2b8bd !important;
}

html[data-theme='dark'] .help-title-wrapper {
  color: var(--hs-text) !important;
  border-bottom-color: var(--hs-border) !important;
}

html[data-theme='dark'] .help-title-wrapper .title-text {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .help-title-wrapper .content-wrapper {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .help-title-wrapper .content-wrapper pre {
  background-color: var(--hs-surface-3) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

/* ---------- Documentation page ---------- */

html[data-theme='dark'] #hansel-doc {
  background-color: var(--hs-surface) !important;
  color: var(--hs-text-strong) !important;
  border-bottom-color: var(--hs-border) !important;
}

html[data-theme='dark'] .right-side-index {
  background-color: var(--hs-surface) !important;
}

html[data-theme='dark'] #navbar-example a {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] #navbar-example a:hover {
  color: var(--hs-brand) !important;
  background-color: transparent !important;
}

html[data-theme='dark'] #navbar-example li.active a {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] #doc-content,
html[data-theme='dark'] #doc-content * {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] #doc-content a span {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] #intro > span,
html[data-theme='dark'] .section .header,
html[data-theme='dark'] #doc-content h2 > span,
html[data-theme='dark'] #doc-content h3 > span,
html[data-theme='dark'] #doc-content h4 > span {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] #intro div,
html[data-theme='dark'] .section .content,
html[data-theme='dark'] #doc-content p,
html[data-theme='dark'] #doc-content li {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] #doc-content h2,
html[data-theme='dark'] #doc-content h3,
html[data-theme='dark'] #doc-content h4,
html[data-theme='dark'] #doc-content .header-tab {
  border-top-color: var(--hs-border) !important;
}

html[data-theme='dark'] #doc-content pre {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] #doc-content .green {
  color: #6fcf6f !important;
}

html[data-theme='dark'] #doc-content .red {
  color: #ef7b6e !important;
}

html[data-theme='dark'] #doc-content .copy-text {
  color: #ef7b6e !important;
}

html[data-theme='dark'] #doc-content .disabled-input,
html[data-theme='dark'] #doc-content .disabled-input:focus,
html[data-theme='dark'] #doc-content .disabled-input:active,
html[data-theme='dark'] #doc-content .disabled-input:hover {
  background-color: var(--hs-surface-3) !important;
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] #doc-content ol.lst-kix_list_1 > li,
html[data-theme='dark'] #doc-content ul li,
html[data-theme='dark'] #doc-content ol li {
  color: var(--hs-text) !important;
}

/* ---------- Login page (login.html, standalone) ---------- */

html[data-theme='dark'] body.login-page,
html[data-theme='dark'] .webapp-wrapper .floating-box {
  background-color: transparent;
}

html[data-theme='dark'] .floating-box .content.hansel-login {
  background-color: var(--hs-surface-2) !important;
  border-color: var(--hs-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

html[data-theme='dark'] .hansel-login .hl-brand-name {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-login .hl-brand-accent {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .hansel-login .hl-brand-sub {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-login .hl-alert {
  color: var(--hs-brand) !important;
  background-color: var(--hs-surface-3) !important;
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-login .hl-label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-login .hl-input {
  background-color: var(--hs-input-bg) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-login .hl-input::placeholder {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-login .hl-input:focus {
  border-color: var(--hs-brand) !important;
  box-shadow: 0 0 0 2px rgba(79, 179, 240, 0.15);
}

html[data-theme='dark'] .hansel-login .hl-input:disabled {
  background-color: var(--hs-surface-3) !important;
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-login .hl-check-text {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-login .hl-secure {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-login .hl-lock {
  color: var(--hs-green) !important;
}

html[data-theme='dark'] .hansel-login .hl-submit,
html[data-theme='dark'] .hansel-login .hl-btn-link {
  background-color: var(--hs-green) !important;
}

html[data-theme='dark'] .hansel-login .hl-submit:hover,
html[data-theme='dark'] .hansel-login .hl-submit:focus,
html[data-theme='dark'] .hansel-login .hl-btn-link:hover,
html[data-theme='dark'] .hansel-login .hl-btn-link:focus {
  background-color: var(--hs-green-hover) !important;
}

html[data-theme='dark'] .hansel-login .hl-forgot a {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .hansel-login .hl-forgot a:hover {
  color: var(--hs-brand-soft) !important;
}

html[data-theme='dark'] .hansel-login .hl-legal {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-login .hl-legal a {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .hansel-login .hl-heading {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .hansel-login .hl-subtext {
  color: var(--hs-text-sub) !important;
}

html[data-theme='dark'] .hansel-login .hl-subtext a {
  color: var(--hs-brand) !important;
}

/* ---------- Splash (app bootstrap spinner) ---------- */

html[data-theme='dark'] #splash-page .page-splash {
  background-color: var(--hs-canvas) !important;
}

html[data-theme='dark'] #splash-page .page-splash-message,
html[data-theme='dark'] #splash-page .bar {
  background-color: transparent !important;
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] #splash-page .hs-spinner {
  border-top-color: var(--hs-brand) !important;
  border-right-color: var(--hs-brand-soft) !important;
  border-bottom-color: rgba(79, 179, 240, 0.2) !important;
  border-left-color: rgba(79, 179, 240, 0.2) !important;
}

/* ---------- Data sources (deep configs) ---------- */

html[data-theme='dark'] .hansel-datasource .datasource-card-row {
  background-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col {
  border-right-color: var(--hs-border) !important;
}

html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col h3,
html[data-theme='dark'] .hansel-datasource .kd-table h3 {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col a.show-all-kd-pairs,
html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col .kd-pair-list h4 {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col .kd-pair-list p {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col .kd-pair-row.selected {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .hansel-datasource .datasource-modules-list-col .kd-pair-row:hover {
  background-color: var(--hs-row-hover) !important;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme='dark'] .hansel-datasource .kd-table input.search-input {
  background-color: var(--hs-input-bg) !important;
  border: solid 1px var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-datasource .kd-table input.search-input::placeholder {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .hansel-datasource .kd-table table {
  border: 1px solid var(--hs-input-border) !important;
}

html[data-theme='dark'] .hansel-datasource .kd-table thead {
  background-color: var(--hs-surface-2) !important;
  border: solid 1px var(--hs-input-border) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-datasource .kd-table tbody td {
  color: var(--hs-text) !important;
  border-bottom: solid 1px var(--hs-border-soft) !important;
}

html[data-theme='dark'] .hansel-datasource .dc-text,
html[data-theme='dark'] .hansel-datasource .kd-form .activate-source,
html[data-theme='dark'] .hansel-datasource .single-module,
html[data-theme='dark'] .hansel-datasource .main-list-status {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-datasource .kd-form .module-tags {
  background-color: var(--hs-surface-3) !important;
  border: solid 1px var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .hansel-datasource .black-tag.transparent {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .hansel-datasource .tag-button {
  background-color: var(--hs-surface-3) !important;
  color: var(--hs-text-muted) !important;
}

/* sheuu modal surfaces shared by datasource & experiences */
html[data-theme='dark'] .sheuu-modal .modal-body {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .sheuu-modal.modal .sub-pane {
  background-color: var(--hs-surface) !important;
  border-top-color: var(--hs-border) !important;
}

html[data-theme='dark'] .sheuu-modal .form-group input,
html[data-theme='dark'] .sheuu-modal .form-group button {
  background-color: var(--hs-input-bg) !important;
  border: solid 1px var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .sheuu-modal .form-group input[disabled] {
  background-color: var(--hs-surface-3) !important;
}

html[data-theme='dark'] .hansel-datasource .dummy-config-value {
  background-color: var(--hs-surface) !important;
  border: solid 1px var(--hs-input-border) !important;
}

html[data-theme='dark'] .hansel-datasource .color-swatch {
  background-color: var(--hs-surface-3) !important;
  border-right-color: var(--hs-border) !important;
}

/* ---------- Experiences ---------- */

html[data-theme='dark'] .experience-config-page {
  background-color: var(--hs-canvas) !important;
  color: var(--hs-text);
}

html[data-theme='dark'] .experience-config-page .hansel-card {
  background-color: var(--hs-surface) !important;
  border: solid 1px var(--hs-border) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme='dark'] .experience-config-page .main-list-header-row .header {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .experience-config-page .main-list-header-row-underline {
  border-top-color: var(--hs-border-soft) !important;
}

html[data-theme='dark'] .experience-config-page .main-list-row {
  background-color: var(--hs-surface) !important;
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .main-list-row:hover {
  background-color: var(--hs-row-hover) !important;
}

html[data-theme='dark'] .experience-config-page .main-list-row .main-list-title,
html[data-theme='dark'] .experience-config-page .main-list-row .main-list-desc {
  color: var(--hs-text-strong) !important;
}

html[data-theme='dark'] .experience-config-page .main-list-row .main-list-desc,
html[data-theme='dark'] .experience-config-page .main-list-row .main-list-status {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .actionbar-top .title,
html[data-theme='dark'] .experience-config-page .actionbar-top .subtitle,
html[data-theme='dark'] .experience-config-page .hansel-env-toggle-label {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .tabbed-values-row {
  border-bottom-color: var(--hs-border-soft) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table {
  border-top-color: var(--hs-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .thead,
html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .thead .variant-name {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .thead .td,
html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .thead .td > input {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .tr,
html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .td {
  border-color: var(--hs-border) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .td > input {
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .td > a {
  color: var(--hs-brand) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container .fake-table .td > input::placeholder {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .experience-config-page .variant-table-container::before {
  background-color: var(--hs-surface-3) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container.grey-bg {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .experience-config-page .fake-table-container.grey-bg .btn-custom-dropdown {
  background-color: var(--hs-surface-2) !important;
}

html[data-theme='dark'] .experience-config-page .app-btn {
  background-color: var(--hs-surface) !important;
  border: solid 1px var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}

html[data-theme='dark'] .experience-config-page .app-btn span.checker {
  border-color: var(--hs-input-border) !important;
}

html[data-theme='dark'] .experience-config-page .panel.panel-experience-type {
  border-color: var(--hs-border) !important;
  background-color: var(--hs-surface) !important;
}

html[data-theme='dark'] .experience-config-page .panel.panel-experience-type .panel-body .row p {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .btn-delete {
  border-color: var(--hs-input-border) !important;
}

html[data-theme='dark'] .experience-config-page .step2-title,
html[data-theme='dark'] .experience-config-page .step0-title {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .step2-desc {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .experience-config-page .upload-btn {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .exp-hash,
html[data-theme='dark'] .experience-config-page .light-grey-text,
html[data-theme='dark'] .experience-config-page .variant-add-text p {
  color: var(--hs-text-muted) !important;
}

html[data-theme='dark'] .experience-config-page #new-experience-live-container {
  border-left-color: var(--hs-border) !important;
}

html[data-theme='dark'] .experience-config-page #new-experience-events-container .event-left-sidebar .app-event-list .single-app-event:hover,
html[data-theme='dark'] .experience-config-page #new-experience-events-container .event-left-sidebar .app-event-list .single-app-event.selected-event {
  background-color: var(--hs-row-hover) !important;
}

html[data-theme='dark'] .experience-config-page #new-experience-events-container .event-right-section {
  border-left-color: var(--hs-border-soft) !important;
}

html[data-theme='dark'] .experience-config-page .events-header-container .events-heading,
html[data-theme='dark'] .experience-config-page .events-header-container .events-list,
html[data-theme='dark'] .experience-config-page .events-container .events-list-container {
  border-bottom-color: var(--hs-border-soft) !important;
}

html[data-theme='dark'] .experience-config-page .events-header-container .events-heading h3,
html[data-theme='dark'] .experience-config-page .events-container .events-list-container .col-md-4 p {
  color: var(--hs-label) !important;
}

html[data-theme='dark'] .experience-config-page .event-selection button {
  background-color: var(--hs-surface) !important;
  border-color: var(--hs-input-border) !important;
  color: var(--hs-text) !important;
}