/*
 * Dark-theme overrides for the legacy (non-Svelte) stylesheets.
 *
 * This file used to carry two jobs: a parallel set of dark values for the
 * legacy --accent/--boxBackground/... variables, and a long tail of
 * per-rule hex overrides for the app shell (dialogs, notes, gui boxes,
 * buttons, tooltips).
 *
 * The first job is gone: those variables are now aliases onto the
 * theme-aware design tokens in app.css (see the :root block in main.css),
 * so they follow the theme on their own. The second job shrank with it -
 * every shell rule that already reads a token needs no override at all,
 * which is why the shell section below is nearly empty now.
 *
 * What remains is the per-tab CSS that still hard-codes light colours.
 * Those overrides are kept, but expressed in tokens rather than hexes so
 * a palette change lands here too.
 */

html[data-theme="dark"] .background_paper {
  background-image: url(/snapshot/0.0.38/images/paper-dark.png);
}

html[data-theme="dark"] #options-window {
  background-color: var(--color-surface);
}

html[data-theme="dark"] .cf_table td {
  border-style: solid;
}

html[data-theme="dark"] .noboarder td {
  border-style: unset;
}

/* Tooltip title bars are the one jBox surface main.css does not style. */
html[data-theme="dark"] .jBox-Modal .jBox-title,
html[data-theme="dark"] .jBox-Confirm .jBox-title {
  background: var(--color-surface-float);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

html[data-theme="dark"] .jBox-pointer:after {
  background: var(--color-surface-float);
}

/* Help icons: the legacy markup swaps between a grey and a white asset
   depending on which surface the icon sits on. */
html[data-theme="dark"] .helpicon {
  background-image: url(/snapshot/0.0.38/images/icons/cf_icon_info_white.svg);
  opacity: 0.4;
}

html[data-theme="dark"] .cf .helpicon {
  background-image: url(/snapshot/0.0.38/images/icons/cf_icon_info_grey.svg);
  opacity: 0.5;
}

html[data-theme="dark"] .cf .helpicon:hover {
  background-image: url(/snapshot/0.0.38/images/icons/cf_icon_info_grey.svg);
  opacity: 1;
}

html[data-theme="dark"] .gui_box_titlebar .helpicon,
html[data-theme="dark"] .subtitle .helpicon {
  background-image: url(/snapshot/0.0.38/images/icons/cf_icon_info_grey.svg);
}

progress[value]::-webkit-progress-bar {
  background-color: var(--color-meter-bg);
}

/* Tab bodies still carry light-mode colours of their own; the rules below
   are scoped per tab exactly as before, only tokenised. */

/* Shared: form controls inside legacy tab markup. */
html[data-theme="dark"] .tab-adjustments input,
html[data-theme="dark"] .tab-adjustments select,
html[data-theme="dark"] .tab-beepers input,
html[data-theme="dark"] .tab-beepers select,
html[data-theme="dark"] .tab-gps input,
html[data-theme="dark"] .tab-gps select,
html[data-theme="dark"] .tab-power .number input,
html[data-theme="dark"] .tab-power .battery-configuration select,
html[data-theme="dark"] .tab-power .smartfuel-configuration select,
html[data-theme="dark"] .tab-presets input,
html[data-theme="dark"] .tab-presets select,
html[data-theme="dark"] .tab-profiles table input,
html[data-theme="dark"] .tab-profiles .settings_table .suboption input,
html[data-theme="dark"] .tab-profiles .settings_table .suboption select,
html[data-theme="dark"] .tab-profiles .number input,
html[data-theme="dark"] .tab-rates input,
html[data-theme="dark"] .tab-rates select,
html[data-theme="dark"] .tab-rates .cf input,
html[data-theme="dark"] .tab-rates .cf select,
html[data-theme="dark"] .tab-servos input[type="number"] {
  background-color: var(--color-input-bg);
  color: var(--color-text);
}

html[data-theme="dark"] .tab-profiles table select,
html[data-theme="dark"] .tab-rates table select {
  text-align-last: right;
  background-color: var(--color-input-bg);
  color: var(--color-text);
}

/* Shared: box labels that the light theme leaves black. */
html[data-theme="dark"] .tab-beepers .gui_box span,
html[data-theme="dark"] .tab-profiles .gui_box span,
html[data-theme="dark"] .tab-rates .gui_box span,
html[data-theme="dark"] .tab-servos .gui_box span {
  color: var(--color-text);
}

/* ADJUSTMENTS TAB */

html[data-theme="dark"] .tab-adjustments .adjustments,
html[data-theme="dark"] .tab-adjustments .adjustments tbody:nth-child(odd) {
  background-color: var(--color-surface);
}

html[data-theme="dark"] .tab-adjustments .adjustments tbody {
  background-color: var(--color-surface-alt);
}

html[data-theme="dark"] .tab-adjustments .adjustments tbody tr td {
  border-color: var(--color-border);
}

html[data-theme="dark"] .tab-adjustments .adjustmentBody .value-box {
  background: var(--color-surface-sunken);
}

/* CLI TAB - autocomplete */

html[data-theme="dark"] .cli-textcomplete-dropdown {
  background-color: var(--color-surface-float);
}

html[data-theme="dark"] .cli-textcomplete-dropdown a {
  color: var(--color-text);
}

html[data-theme="dark"] .cli-textcomplete-dropdown .active {
  background-color: var(--color-hover);
}

/* FIRMWARE FLASHER TAB */

html[data-theme="dark"] .btn .disabled {
  background-color: var(--color-btn-bg-disabled);
}

/* GPS TAB */

html[data-theme="dark"] .tab-gps .GPS_info .head,
html[data-theme="dark"] .tab-gps .GPS_signal_strength .head {
  background-color: var(--color-header-bg);
}

html[data-theme="dark"] .tab-gps #loadmap .controls,
html[data-theme="dark"] .tab-gps #loadmap .controls a {
  background-color: var(--color-surface);
}

html[data-theme="dark"] .tab-gps #loadmap .controls a:hover {
  background-color: var(--color-btn-bg-hover);
}

html[data-theme="dark"] .tab-gps #loadmap .controls a:active {
  background-color: var(--color-btn-bg-active);
}

/* PROFILES + RATES TABS */

html[data-theme="dark"] .tab-profiles .tab-area,
html[data-theme="dark"] .tab-rates .tab-area {
  background: var(--color-surface);
}

html[data-theme="dark"] .tab-profiles .tab-container > div,
html[data-theme="dark"] .tab-rates .tab-container > div {
  background-color: var(--color-surface-alt);
  border-right: 1px solid var(--color-surface);
}

html[data-theme="dark"] .tab-profiles .tab-container > div.active,
html[data-theme="dark"] .tab-rates .tab-container > div.active {
  background-color: var(--color-accent-500);
  color: var(--color-accent-fg);
}

html[data-theme="dark"] .tab-profiles input:disabled,
html[data-theme="dark"] .tab-profiles select:disabled {
  color: var(--color-text-disabled);
}

html[data-theme="dark"] .tab-profiles .ROLL .axis_title,
html[data-theme="dark"] .tab-rates .ROLL .axis_title {
  background-color: var(--color-roll);
}

html[data-theme="dark"] .tab-profiles .PITCH .axis_title,
html[data-theme="dark"] .tab-rates .PITCH .axis_title {
  background-color: var(--color-pitch);
}

html[data-theme="dark"] .tab-profiles .YAW .axis_title,
html[data-theme="dark"] .tab-rates .YAW .axis_title {
  background-color: var(--color-yaw);
}

html[data-theme="dark"] .tab-profiles .bottomarea {
  background-color: var(--color-surface);
}

html[data-theme="dark"] .tab-profiles .regular-button.disabled {
  background-color: var(--color-btn-bg-disabled);
}

html[data-theme="dark"] .tab-rates .cf tr {
  background-color: var(--color-surface-alt);
}

html[data-theme="dark"] .tab-rates .cf th {
  background-color: var(--color-header-bg);
  color: var(--color-header-fg);
}

html[data-theme="dark"] .tab-rates .cf .rates_logo_bg {
  background-color: rgba(255, 255, 255, 0.2);
}

/* SERVOS TAB */

html[data-theme="dark"] .tab-servos .servoConfig {
  background-color: var(--color-surface);
  color: var(--color-text);
}

html[data-theme="dark"] .tab-servos .servoConfig td {
  border-color: var(--color-border);
}

html[data-theme="dark"] .tab-servos .servoConfig tbody tr,
html[data-theme="dark"] .tab-servos .servoOverride tbody tr:nth-child(odd) {
  background-color: var(--color-surface-alt);
}

html[data-theme="dark"] .tab-servos .servoConfig tbody tr:nth-child(even),
html[data-theme="dark"] .tab-servos .servoOverride tbody tr:nth-child(even) {
  background-color: var(--color-surface);
}

html[data-theme="dark"] .tab-servos .meter-bar {
  background-color: var(--color-meter-bg);
}

html[data-theme="dark"] .tab-servos .meter-label {
  color: var(--color-text);
}

/* SELECT2 */

html[data-theme="dark"]
  .select2-container
  .select2-selection--single
  .select2-selection__rendered {
  background-color: var(--color-input-bg) !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .select2-selection__arrow b {
  border-bottom: 1.5px solid var(--color-text) !important;
  border-right: 1.5px solid var(--color-text) !important;
}

html[data-theme="dark"] .select2-search--dropdown {
  background-color: var(--color-input-bg) !important;
}

html[data-theme="dark"] .select2-search--dropdown .select2-search__field {
  border: 1px solid var(--color-border) !important;
  background-color: var(--color-input-bg) !important;
  color: var(--color-text) !important;
}

html[data-theme="dark"] .select2-results > .select2-results__options {
  background-color: var(--color-input-bg) !important;
}