html.app-dark {
  color-scheme: dark;
  --byrd-bg: #0f1114;
  --byrd-text: #e4e6ea;
  --byrd-text-muted: #9aa0a6;
  --byrd-teal: #26a69a;
  --byrd-teal-dark: #00897b;
  --byrd-teal-light: #1a2e2d;
  /* Akzente heller als im Hellmodus, damit sie auf dunklem Grund lesbar sind. */
  --byrd-briefing: #7986cb;
  --byrd-briefing-soft: #232a45;
  --byrd-faq: #ffd54f;
  --byrd-faq-soft: #332c16;
  --byrd-tutorial: #26a69a;
  --byrd-tutorial-soft: #1a2e2d;
  --byrd-quick: #4fc3f7;
  --byrd-quick-soft: #13303d;
  --byrd-navy: #a8c7fa;
  --byrd-surface: #1a1d21;
  --byrd-surface-alt: #22262c;
  --byrd-surface-muted: #2a2f36;
  --byrd-surface-subtle: #252930;
  --byrd-border: #3a4048;
  --byrd-border-subtle: #323840;
  --byrd-heading: #e8eaed;
  --byrd-label: #bdc1c6;
  --byrd-hint: #9aa0a6;
  --byrd-input-bg: #252930;
  --byrd-row-highlight: #252930;
  --byrd-row-open: #2a2f36;
  --byrd-row-editing: #1a2633;
  --byrd-danger-surface: #3d1f1a;
  --byrd-danger-surface-hover: #4a251f;
  --byrd-overlay: rgba(0, 0, 0, 0.62);
  --byrd-shadow: rgba(0, 0, 0, 0.35);
  --byrd-shadow-strong: rgba(0, 0, 0, 0.55);
  --byrd-app-background-overlay: linear-gradient(
    180deg,
    rgba(15, 17, 20, 0.94) 0%,
    rgba(15, 17, 20, 0.9) 50%,
    rgba(15, 17, 20, 0.96) 100%
  );
  --byrd-row-zebra: color-mix(in srgb, var(--byrd-teal-light) 24%, var(--byrd-surface));
  --byrd-focus-ring: 0 0 0 2px color-mix(in srgb, var(--byrd-teal) 35%, transparent);
  --byrd-danger: #ff8f73;
  --byrd-danger-ring: 0 0 0 2px color-mix(in srgb, var(--byrd-danger) 28%, transparent);
  --byrd-warning-surface: rgba(255, 152, 0, 0.12);
  --byrd-warning-border: color-mix(in srgb, #ff991f 40%, var(--byrd-border));
}

html.app-dark .card,
html.app-dark .layout__header,
html.app-dark .header,
html.app-dark .settings-overlay__panel,
html.app-dark .waiting-popup,
html.app-dark .finish-article-modal__panel,
html.app-dark .rueckmeldung-modal__panel,
html.app-dark .rueckmeldung-detail-modal,
html.app-dark .login-card {
  background: var(--byrd-surface);
  box-shadow: 0 4px 24px var(--byrd-shadow);
}

html.app-dark .settings-overlay {
  background: var(--byrd-overlay);
}

html.app-dark .settings-chapter {
  background: var(--byrd-surface-subtle);
  border-color: var(--byrd-border-subtle);
}

html.app-dark .settings-chapter__title {
  color: var(--byrd-heading);
}

html.app-dark .settings-chapter__intro,
html.app-dark .dashboard-settings-panel__subsection-intro {
  color: var(--byrd-hint);
}

html.app-dark .dashboard-settings-panel__subsection-title,
html.app-dark .attributes-editor-panel__section-title {
  color: var(--byrd-label);
}

html.app-dark .settings-chapter__body .dashboard-settings-panel__subsection + .dashboard-settings-panel__subsection,
html.app-dark .settings-chapter .attributes-editor-panel__section + .attributes-editor-panel__section {
  border-top-color: var(--byrd-border-subtle);
}

html.app-dark .evaluation-default-layout-editor__grid {
  background: var(--byrd-surface-subtle);
  border-color: var(--byrd-border-subtle);
}

html.app-dark .analytics-widget--preview .analytics-widget__preview-placeholder {
  color: var(--byrd-hint);
}

html.app-dark .settings-overlay__header,
html.app-dark .attributes-editor-panel__footer,
html.app-dark .customer-settings-panel__footer,
html.app-dark .evaluation-settings-panel__footer,
html.app-dark .evaluation-table th,
html.app-dark .evaluation-table__actions-head,
html.app-dark .triage-header,
html.app-dark .filter-panel__header,
html.app-dark .rueckmeldungen-drawer__section-header {
  background: var(--byrd-surface-alt);
  color: var(--byrd-label);
}

html.app-dark .settings-overlay__sidebar,
html.app-dark .settings-overlay__nav-item:hover,
html.app-dark .triage-row--open,
html.app-dark .triage-row--muted .triage-row__cell,
html.app-dark .triage-row--muted .triage-row__action,
html.app-dark .filter-panel,
html.app-dark .bearbeitung-filter-panel,
html.app-dark .evaluation-export-panel__popover,
html.app-dark .monthly-matrix-table th,
html.app-dark .list-page table th {
  background: var(--byrd-surface-muted);
}

html.app-dark .settings-overlay__nav-item,
html.app-dark .settings-overlay__nav-item--active,
html.app-dark .general-settings-panel__toggle,
html.app-dark .section-subtitle,
html.app-dark .general-settings-panel__header p,
html.app-dark .general-settings-panel__hint,
html.app-dark .attributes-editor-panel__header p,
html.app-dark .briefing-option-hint--customer {
  background: rgba(13, 209, 197, 0.18);
  color: #b8f5ef;
}

html.app-dark .briefing-option-hint--internal {
  background: rgba(244, 250, 250, 0.06);
  color: var(--byrd-hint);
  border-color: rgba(220, 228, 229, 0.25);
}

html.app-dark .briefing-free-text-modal__panel {
  background: var(--byrd-surface-raised, #1d2125);
  color: var(--byrd-text);
}

html.app-dark .briefing-free-text-modal__textarea {
  background: var(--byrd-surface);
  border-color: rgba(220, 228, 229, 0.25);
  color: var(--byrd-text);
}

html.app-dark .customer-settings-panel__briefing-option-hint,
html.app-dark .customer-settings-panel__header p,
html.app-dark .evaluation-settings-panel__header p,
html.app-dark .evaluation-table-toolbar__meta,
html.app-dark .customer-stats-placeholder p,
html.app-dark .waiting-list__empty,
html.app-dark .triage-empty,
html.app-dark .form-group label,
html.app-dark .configure-form label,
html.app-dark .login-card__subtitle {
  color: var(--byrd-hint);
}

html.app-dark .settings-overlay__header h2,
html.app-dark .general-settings-panel__background-title {
  color: var(--byrd-label);
}

html.app-dark .general-settings-panel__background-preview {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

html.app-dark .general-settings-panel__header h3,
html.app-dark .dashboard-settings-panel__header h3,
html.app-dark .attributes-editor-panel__header h3,
html.app-dark .customer-settings-panel__header h3,
html.app-dark .evaluation-settings-panel__header h3,
html.app-dark .evaluation-table__month-header-toggle,
html.app-dark .customer-settings-panel__list-label,
html.app-dark .customer-settings-panel__detail-title,
html.app-dark .rueckmeldung-detail__label,
html.app-dark .finish-article-modal__title,
html.app-dark .layout__title-app,
html.app-dark .brand-title-app {
  color: var(--byrd-heading);
}

html.app-dark .brand-logo--light {
  display: none;
}

html.app-dark .brand-logo--dark {
  display: block;
}

html.app-dark .header-bayard-symbol--light {
  display: none;
}

html.app-dark .header-bayard-symbol--dark {
  display: block;
}

html.app-dark .data-loading-screen__text {
  color: var(--byrd-text-muted);
}

html.app-dark .login-card__logo--light {
  display: none;
}

html.app-dark .login-card__logo--dark {
  display: block;
}

html.app-dark .header-bayard-symbol-btn:hover {
  background: var(--byrd-teal-light);
}

/* Das Leuchten darf beim Darueberfahren nicht ins Teal kippen. */
html.app-dark .header-bayard-symbol-btn--alert-sos:hover,
html.app-dark .header-bayard-symbol-btn--alert-quick:hover,
html.app-dark .header-bayard-symbol-btn--alert-weekly:hover,
html.app-dark .header-bayard-symbol-btn--alert-tutorial:hover {
  background: color-mix(in srgb, var(--alert-color) 14%, var(--alert-soft));
}

html.app-dark .copilot__menu {
  border-color: rgba(255, 255, 255, 0.12);
  background: linear-gradient(155deg, rgba(32, 38, 46, 0.97) 0%, rgba(24, 29, 35, 0.95) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 14px 32px rgba(0, 0, 0, 0.45);
}

html.app-dark .copilot__item {
  color: rgba(255, 255, 255, 0.82);
}

html.app-dark .copilot-panel__title {
  color: rgba(255, 255, 255, 0.92);
}

html.app-dark .copilot-panel__close:hover {
  background: rgba(255, 255, 255, 0.08);
}

html.app-dark .settings-overlay__header,
html.app-dark .settings-overlay__sidebar,
html.app-dark .general-settings-panel__header,
html.app-dark .dashboard-settings-panel__header,
html.app-dark .dashboard-settings-panel__footer,
html.app-dark .attributes-editor-panel__header,
html.app-dark .attributes-editor-panel__footer,
html.app-dark .customer-settings-panel__header,
html.app-dark .customer-settings-panel__footer,
html.app-dark .evaluation-settings-panel__header,
html.app-dark .evaluation-settings-panel__footer,
html.app-dark .waiting-list__scroll,
html.app-dark .waiting-list__row,
html.app-dark .triage-row-group,
html.app-dark .triage-header > div,
html.app-dark .triage-row__cell,
html.app-dark .triage-row__action,
html.app-dark .triage-row__mark-slot,
html.app-dark .evaluation-table th,
html.app-dark .evaluation-table td,
html.app-dark .evaluation-table__month-header td,
html.app-dark .filter-panel__header,
html.app-dark .filter-panel__body,
html.app-dark .customer-settings-panel__list-item,
html.app-dark .monthly-matrix-table th,
html.app-dark .monthly-matrix-table td,
html.app-dark .list-page table th,
html.app-dark .list-page table td,
html.app-dark .rueckmeldung-detail-modal__header,
html.app-dark .finish-article-modal__header {
  border-color: var(--byrd-border-subtle);
}

html.app-dark .evaluation-export-panel__trigger {
  background: var(--byrd-surface);
  border-color: var(--byrd-border-subtle);
  color: var(--byrd-label);
}

html.app-dark .evaluation-export-panel__trigger:hover,
html.app-dark .evaluation-export-panel__trigger--active {
  background: var(--byrd-teal-light);
  border-color: var(--byrd-teal);
  color: var(--byrd-teal);
}

html.app-dark .evaluation-export-panel__radio,
html.app-dark .evaluation-export-panel__option {
  color: var(--byrd-text);
}

html.app-dark input:not([type='checkbox']):not([type='radio']):not([type='range']),
html.app-dark select,
html.app-dark textarea,
html.app-dark .icon-btn,
html.app-dark .layout__logout-btn,
html.app-dark .header-logout-btn,
html.app-dark .wartebereich-toggle,
html.app-dark .rueckmeldungen-toggle,
html.app-dark .evaluation-table__input,
html.app-dark .triage-row__field input,
html.app-dark .triage-row__erfasser-input input,
html.app-dark .triage-row__erfasser-input select,
html.app-dark .form-group input,
html.app-dark .form-group select,
html.app-dark .configure-form input,
html.app-dark .configure-form select,
html.app-dark .create-name-form input,
html.app-dark .customer-settings-panel__field input,
html.app-dark .customer-settings-panel__field select,
html.app-dark .customer-settings-panel__field textarea,
html.app-dark .attributes-editor-panel__option-input,
html.app-dark .evaluation-settings-panel__input,
html.app-dark .filter-panel__search,
html.app-dark .login-form input {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
  color: var(--byrd-text);
}

html.app-dark .icon-btn:hover,
html.app-dark .waiting-list__delete.icon-btn:hover:not(:disabled),
html.app-dark .layout__logout-btn:hover {
  background: var(--byrd-surface-muted);
}

html.app-dark .header-logout-btn:hover {
  color: #ef5350;
  background: #2a1a1a;
}

html.app-dark .layout__settings-btn:hover,
html.app-dark .layout__settings-btn--active,
html.app-dark .layout__nav a:hover,
html.app-dark .layout__nav a.active,
html.app-dark .header-settings-btn:hover,
html.app-dark .header-settings-btn--active,
html.app-dark .nav-btn:hover,
html.app-dark .nav-btn.active {
  background: var(--byrd-teal-light);
  color: var(--byrd-teal);
}

html.app-dark .triage-table {
  background: var(--byrd-surface-alt);
  border-color: var(--byrd-border);
}

html.app-dark .triage-table .triage-row:hover:not(.triage-row--open) {
  background: color-mix(in srgb, var(--byrd-teal-light) 55%, var(--byrd-surface-alt));
}

html.app-dark .triage-row__cell--gtin {
  color: var(--byrd-teal);
}

html.app-dark .triage-row__name-scroll {
  scrollbar-color: color-mix(in srgb, var(--byrd-teal) 55%, transparent) transparent;
}

html.app-dark .triage-row__name-scroll::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--byrd-teal) 65%, var(--byrd-border));
}

html.app-dark .filter-panel__tab--active {
  box-shadow: inset 0 -2px 0 var(--byrd-teal);
  background: transparent;
}

html.app-dark .triage-row-group:nth-child(odd) {
  background: var(--byrd-surface);
}

html.app-dark .triage-row-group:nth-child(even) {
  background: var(--byrd-row-zebra);
}

html.app-dark .triage-row-group--expanded {
  background: var(--byrd-surface-alt);
  box-shadow:
    inset 3px 0 0 var(--byrd-teal),
    0 0 0 1px var(--byrd-border),
    0 4px 12px rgba(0, 0, 0, 0.35);
}

html.app-dark .triage-row-group--expanded .triage-row--open {
  background: var(--byrd-row-open);
  border-bottom-color: var(--byrd-border);
}

html.app-dark .triage-row-group--expanded .triage-row__expand {
  background: var(--byrd-surface-muted);
  border-top: 1px solid var(--byrd-border);
  border-bottom: none;
  box-shadow: none;
}

html.app-dark .triage-row__expand {
  background: var(--byrd-surface-subtle);
  border-color: var(--byrd-border-subtle);
  box-shadow: inset 0 1px 0 var(--byrd-border-subtle);
}

html.app-dark .triage-row-group--editing {
  background: color-mix(in srgb, var(--byrd-teal) var(--edit-tint, 12%), var(--byrd-surface-muted));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--byrd-teal) var(--edit-ring, 26%), var(--byrd-border));
}

html.app-dark .triage-row__expand-action-icons .icon-btn[data-action='warte_auf_rueckmeldung']:hover:not(
    [aria-disabled='true']
  ):not(.icon-btn--erfasser-blocked) {
  color: #ce93d8;
  background: color-mix(in srgb, #6a1b9a 22%, var(--byrd-surface-muted));
  border-color: color-mix(in srgb, #8e24aa 40%, var(--byrd-border));
}

html.app-dark .triage-row__expand-action-icons .icon-btn[data-action='fertig']:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: #57d9a3;
  background: color-mix(in srgb, var(--byrd-teal) 18%, var(--byrd-surface-muted));
  border-color: color-mix(in srgb, var(--byrd-teal) 45%, var(--byrd-border));
}

html.app-dark .triage-row__expand-action-icons .icon-btn[data-action='delete']:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: #ff8f73;
  background: color-mix(in srgb, #de350b 15%, var(--byrd-surface-muted));
  border-color: color-mix(in srgb, #de350b 35%, var(--byrd-border));
}

html.app-dark .triage-row__expand-action-icons .icon-btn[data-edit-toggle]:hover:not([aria-disabled='true']):not(
    .icon-btn--erfasser-blocked
  ) {
  color: var(--byrd-teal);
  background: color-mix(in srgb, var(--byrd-teal) 16%, var(--byrd-surface-muted));
  border-color: color-mix(in srgb, var(--byrd-teal) 40%, var(--byrd-border));
}

html.app-dark .triage-row-group--editing .triage-row--editing,
html.app-dark .triage-row__expand--editing {
  background: transparent;
  box-shadow: none;
  border: none;
}

html.app-dark .triage-row__edit-badge {
  color: #57d9a3;
  background: color-mix(in srgb, var(--byrd-teal) 18%, var(--byrd-surface-muted));
}

html.app-dark .triage-row__edit-gtin-hint {
  color: #ff8f73;
}

html.app-dark .triage-row__cell--edit select,
html.app-dark .triage-row__cell--edit input.triage-row__edit-name,
html.app-dark .triage-row__anzahl-step {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
  color: var(--byrd-text);
}

html.app-dark .triage-row__anzahl-value {
  color: var(--byrd-teal);
}

html.app-dark .triage-row__prio-timer--editing .triage-row__edit-priority {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
  color: var(--byrd-text);
}

html.app-dark .triage-row__field {
  color: var(--byrd-label);
}

html.app-dark .triage-row__prio-timer {
  border-color: var(--byrd-border-subtle);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* Schwarz liegt hier fast auf dem Oberflaechenton (#1a1d21), deshalb eine
   helle Haarlinie als Kontur. */
html.app-dark .triage-row__pdc-flag {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
}

/* Tutorial: Zeigetexte und Ablaufkette brauchen im Dunkelmodus mehr
   Grundhelligkeit, sonst verschwinden sie auf der Buehne. */
html.app-dark .tutorial-scene__note {
  background: color-mix(in srgb, var(--section-accent) 20%, var(--byrd-surface-muted));
  color: var(--byrd-text);
}

html.app-dark .tutorial-flow__station {
  background: var(--byrd-surface-muted);
  border-color: var(--byrd-border);
}

html.app-dark .tutorial-flow__station--active {
  background: color-mix(in srgb, var(--section-accent) 22%, var(--byrd-surface-muted));
  color: var(--byrd-text);
}

html.app-dark .tutorial-stage__dialog {
  background: var(--byrd-surface-alt);
  border-color: var(--byrd-border);
}

html.app-dark .triage-row__pdc-btn--active {
  background: #0f1114;
  border-color: rgba(255, 255, 255, 0.28);
}

html.app-dark .triage-row__pdc-btn--active:hover {
  background: #000;
  border-color: rgba(255, 255, 255, 0.4);
}

html.app-dark .triage-row__prio-timer--finished {
  background: var(--byrd-surface-muted) !important;
  color: var(--byrd-hint) !important;
}

html.app-dark .triage-row__status-btn,
html.app-dark .triage-row__erfasser-clear {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
  color: var(--byrd-text);
}

html.app-dark .triage-row__status-btn--active {
  background: rgba(38, 166, 154, 0.18);
  border-color: var(--byrd-teal);
  color: var(--byrd-teal);
}

html.app-dark .triage-row__status-btn--mark.triage-row__status-btn--active {
  background: var(--byrd-danger-surface);
  border-color: #de350b;
  color: var(--byrd-text);
}

html.app-dark .triage-row__erfasser-clear:hover {
  background: var(--byrd-danger-surface-hover);
  border-color: #de350b;
  color: #ff8f73;
}

html.app-dark .triage-row__action--active {
  background: rgba(38, 166, 154, 0.18);
}

html.app-dark .triage-row__mark-slot {
  border-color: var(--byrd-border-subtle);
}

html.app-dark .triage-row__blink-lights {
  background: var(--byrd-surface-alt);
  border-right-color: var(--byrd-border-subtle);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.35);
}

html.app-dark .triage-row__blink-lights--active .triage-row__blink-light--a,
html.app-dark .triage-row__blink-lights--active .triage-row__blink-light--b {
  --blink-glow: rgba(0, 230, 118, 0.35);
}

html.app-dark .triage-row__blink-lights--active .triage-row__blink-light--a {
  animation-name: airport-blink-a-dark;
}

html.app-dark .triage-row__blink-lights--active .triage-row__blink-light--b {
  animation-name: airport-blink-b-dark;
}

html.app-dark .triage-row__blink-lights--paused .triage-row__blink-light--a,
html.app-dark .triage-row__blink-lights--paused .triage-row__blink-light--b {
  animation: none;
  background: #ffb74d;
  box-shadow:
    0 0 2px #ffb74d,
    inset 0 -1px 1px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

html.app-dark .triage-row__status-btn--pause.triage-row__status-btn--active {
  background: rgba(255, 152, 0, 0.16);
  border-color: #ff9800;
  color: #ffb74d;
}

@keyframes airport-blink-a-dark {
  0%,
  49% {
    background: #4caf50;
    box-shadow:
      0 0 3px #4caf50,
      0 0 6px rgba(76, 175, 80, 0.4),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }

  50%,
  100% {
    background: #2d2d2d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0.35;
  }
}

@keyframes airport-blink-b-dark {
  0%,
  49% {
    background: #2d2d2d;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    opacity: 0.35;
  }

  50%,
  100% {
    background: #4caf50;
    box-shadow:
      0 0 3px #4caf50,
      0 0 6px rgba(76, 175, 80, 0.4),
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.app-dark .triage-row__blink-lights--active .triage-row__blink-light--a,
  html.app-dark .triage-row__blink-lights--active .triage-row__blink-light--b {
    animation: none;
    background: #4caf50;
    box-shadow:
      0 0 2px #4caf50,
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }

  html.app-dark .triage-row__blink-lights--paused .triage-row__blink-light--a,
  html.app-dark .triage-row__blink-lights--paused .triage-row__blink-light--b {
    animation: none;
    background: #ffb74d;
    box-shadow:
      0 0 2px #ffb74d,
      inset 0 -1px 1px rgba(0, 0, 0, 0.3);
    opacity: 1;
  }
}

html.app-dark .evaluation-table__row--editing td,
html.app-dark .evaluation-table__row--editing .evaluation-table__actions {
  background: var(--byrd-row-editing);
}

html.app-dark .evaluation-table__actions,
html.app-dark .evaluation-table__actions-head {
  background: var(--byrd-surface);
}

html.app-dark .evaluation-table__row--editing .evaluation-table__actions {
  background: var(--byrd-row-editing);
}

html.app-dark .evaluation-table__month-header td {
  background: var(--byrd-surface-muted);
  border-bottom-color: var(--byrd-border-subtle);
}

html.app-dark .evaluation-table__month-header-toggle {
  color: var(--byrd-heading);
}

html.app-dark .evaluation-table__month-header-toggle:hover {
  background: var(--byrd-surface-subtle);
}

html.app-dark .evaluation-table__month-header-chevron {
  border-left-color: var(--byrd-label);
}

html.app-dark .evaluation-table__month-count {
  color: var(--byrd-hint);
}

html.app-dark .evaluation-table tbody td {
  background: var(--byrd-surface);
  color: var(--byrd-text);
}

html.app-dark .waiting-popup::before {
  background: var(--byrd-surface);
  border-color: var(--byrd-border);
}

html.app-dark .erfasser-required-popup {
  background: #2c333a;
  color: #ebecf0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

html.app-dark .icon-btn--erfasser-blocked {
  background: #22272b !important;
  border-color: #38414a !important;
  color: #6b778c !important;
}

html.app-dark .settings-overlay__nav-item--active {
  background: var(--byrd-teal-light);
  color: var(--byrd-teal);
}

html.app-dark .customer-settings-panel__list-item:hover,
html.app-dark .customer-settings-panel__list-item--active {
  background: var(--byrd-surface-muted);
}

html.app-dark .customer-settings-panel__list-item {
  background: var(--byrd-surface);
  border-color: var(--byrd-border-subtle);
}

html.app-dark .dashboard-settings-panel__header,
html.app-dark .dashboard-settings-panel__footer {
  background: var(--byrd-surface-alt);
  border-color: var(--byrd-border-subtle);
}

html.app-dark .dashboard-settings-panel__farbcode-field input,
html.app-dark .dashboard-settings-panel__segment {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
  color: var(--byrd-text);
}

html.app-dark .dashboard-settings-panel__segmented {
  background: var(--byrd-surface-muted);
  border-color: var(--byrd-border-subtle);
}

html.app-dark .dashboard-settings-panel__segment + .dashboard-settings-panel__segment {
  border-left-color: var(--byrd-border-subtle);
}

html.app-dark .customer-settings-panel__field--required input,
html.app-dark .customer-settings-panel__dropzone.customer-settings-panel__field--required {
  background: var(--byrd-danger-surface);
  border-color: color-mix(in srgb, var(--byrd-danger) 50%, var(--byrd-border));
}

html.app-dark .customer-settings-panel__field--unsaved {
  background: var(--byrd-warning-surface);
  border-color: var(--byrd-warning-border);
}

html.app-dark .customer-settings-panel__dropzone {
  background: var(--byrd-surface-subtle);
  border-color: var(--byrd-border);
}

html.app-dark .analytics-kpi-card {
  background: var(--byrd-surface-alt);
  box-shadow: inset 0 0 0 1px var(--byrd-border-subtle);
}

html.app-dark .analytics-kpi-card__label {
  color: var(--byrd-hint);
}

html.app-dark .analytics-kpi-card__meta {
  color: var(--byrd-hint);
}

html.app-dark .customer-analytics__chart-card {
  background: var(--byrd-surface-alt);
}

html.app-dark .customer-analytics {
  background: linear-gradient(155deg, rgba(30, 38, 48, 0.88) 0%, rgba(22, 28, 36, 0.82) 100%);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 8px 28px rgba(0, 0, 0, 0.28);
}

html.app-dark .analytics-kpi-strip {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.06) 0%, rgba(9, 209, 198, 0.1) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

html.app-dark .analytics-kpi-strip__card {
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.app-dark .analytics-kpi-strip__label {
  color: rgba(255, 255, 255, 0.52);
}

html.app-dark .analytics-kpi-strip__meta {
  color: var(--byrd-hint);
}

html.app-dark .analytics-kpi-strip__value {
  color: var(--byrd-teal);
}

html.app-dark .analytics-widget-slot-grid__cell {
  border-color: rgba(255, 255, 255, 0.16);
}

html.app-dark .analytics-widget-placeholder {
  background: rgba(9, 209, 198, 0.08);
  box-shadow: inset 0 0 0 2px dashed rgba(9, 209, 198, 0.35);
}

html.app-dark .analytics-widget--dragging {
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}

html.app-dark .auftrag-pie-chart--expanded .auftrag-pie-chart__canvas-wrap {
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.72), rgba(15, 23, 42, 0.55));
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

html.app-dark .auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item {
  background: rgba(30, 41, 59, 0.55);
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.app-dark .monthly-trend-chart__toggle--countable {
  color: #4db6ac;
}

html.app-dark .monthly-trend-chart__toggle--non-countable {
  color: #9fa8da;
}

html.app-dark .analytics-layout-panel {
  background: var(--byrd-surface);
  border-color: var(--byrd-border-subtle);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

html.app-dark .analytics-widget {
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.03) 52%, rgba(9, 209, 198, 0.06) 100%);
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.18),
    0 4px 14px rgba(0, 0, 0, 0.22);
}

html.app-dark .analytics-widget::before {
  background: linear-gradient(125deg, rgba(255, 255, 255, 0.12) 0%, transparent 38%, rgba(255, 255, 255, 0.02) 100%);
}

html.app-dark .analytics-widget--quota {
  background: linear-gradient(148deg, rgba(255, 255, 255, 0.08) 0%, rgba(9, 209, 198, 0.12) 100%);
  border-top-color: rgba(9, 209, 198, 0.65);
}

html.app-dark .analytics-widget__header {
  border-bottom-color: rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
}

html.app-dark .analytics-widget__title {
  color: rgba(255, 255, 255, 0.72);
}

html.app-dark .quota-bar-chart--prominent .quota-bar-chart__stat,
html.app-dark .farbcode-bar-chart__avg-times--widget .farbcode-bar-chart__avg-time-tile,
html.app-dark .auftrag-pie-chart__legend-item {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

html.app-dark .auftrag-pie-chart__legend-name {
  color: rgba(255, 255, 255, 0.82);
}

html.app-dark {
  --auftrag-pie-ring-gap: rgba(15, 23, 42, 0.55);
}

html.app-dark .auftrag-pie-chart__legend-item--active {
  background: rgba(9, 209, 198, 0.2);
  box-shadow: inset 0 0 0 2px rgba(9, 209, 198, 0.38);
}

html.app-dark .auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--active {
  box-shadow:
    inset 0 0 0 2px rgba(9, 209, 198, 0.45),
    0 4px 12px rgba(9, 209, 198, 0.15);
}

html.app-dark .auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--preview {
  background: rgba(9, 209, 198, 0.12);
  box-shadow: inset 0 0 0 1px rgba(9, 209, 198, 0.28);
}

html.app-dark .auftrag-pie-chart--expanded .auftrag-pie-chart__legend-item--pinned {
  background: rgba(9, 209, 198, 0.22);
  box-shadow:
    inset 0 0 0 2px rgba(9, 209, 198, 0.52),
    0 4px 14px rgba(9, 209, 198, 0.18);
}

html.app-dark .auftrag-pie-chart__center-total-value {
  color: rgba(255, 255, 255, 0.92);
}

html.app-dark .auftrag-pie-chart__center-total-caption {
  color: rgba(255, 255, 255, 0.52);
}

html.app-dark .auftrag-pie-chart__label-line {
  stroke: rgba(255, 255, 255, 0.32);
}

html.app-dark .auftrag-pie-chart__segment-percent {
  stroke: rgba(0, 0, 0, 0.55);
}

html.app-dark .auftrag-pie-chart__inner-name {
  stroke: rgba(0, 0, 0, 0.55);
}

html.app-dark .monthly-trend-chart__toggle {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

html.app-dark .analytics-widget-modal__panel {
  background: linear-gradient(155deg, rgba(34, 42, 52, 0.95) 0%, rgba(24, 30, 38, 0.92) 100%);
  border-color: rgba(255, 255, 255, 0.1);
}

html.app-dark .analytics-widget-modal__backdrop {
  background: rgba(0, 0, 0, 0.55);
}

html.app-dark .customer-detail-stale-popup {
  background: var(--byrd-surface);
  border-color: color-mix(in srgb, var(--byrd-teal) 50%, var(--byrd-border));
  box-shadow:
    0 4px 6px rgba(0, 0, 0, 0.2),
    0 12px 28px rgba(0, 0, 0, 0.45);
}

html.app-dark .customer-detail-stale-popup--animate {
  animation:
    customer-detail-stale-popup-enter 0.45s cubic-bezier(0.22, 1, 0.36, 1) both,
    customer-detail-stale-popup-glow-dark 1.25s ease-in-out 0.45s 2;
}

@keyframes customer-detail-stale-popup-glow-dark {
  0%,
  100% {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.2),
      0 12px 28px rgba(0, 0, 0, 0.45);
  }

  50% {
    box-shadow:
      0 4px 6px rgba(0, 0, 0, 0.2),
      0 12px 28px rgba(0, 0, 0, 0.45),
      0 0 0 3px color-mix(in srgb, var(--byrd-teal) 38%, transparent);
  }
}

html.app-dark .customer-detail-stale-popup__text {
  color: var(--byrd-text);
}

html.app-dark .customer-detail-stale-popup__dismiss:hover {
  background: rgba(255, 255, 255, 0.08);
}

html.app-dark .customer-detail__section--evaluation-table .evaluation-table thead th {
  border-top-color: var(--byrd-teal);
}

html.app-dark .customer-analytics__chart-card--stack .farbcode-bar-chart {
  border-top-color: var(--byrd-border-subtle);
}

html.app-dark .farbcode-bar-chart__avg-times {
  background: var(--byrd-surface-alt);
  box-shadow: inset 0 0 0 1px var(--byrd-border-subtle);
}

html.app-dark .farbcode-bar-chart__avg-times-heading {
  color: var(--byrd-hint);
}

html.app-dark .farbcode-bar-chart__avg-time-tile {
  background: var(--byrd-surface-muted);
}

html.app-dark .farbcode-bar-chart__avg-time-label {
  color: var(--byrd-hint);
}

html.app-dark .farbcode-bar-chart__avg-time-value {
  color: var(--byrd-teal);
}

html.app-dark .monthly-matrix-table thead th {
  background: var(--byrd-surface-muted);
  color: var(--byrd-label);
}

html.app-dark .monthly-matrix-table tbody th {
  background: var(--byrd-surface-muted);
  color: var(--byrd-text);
}

html.app-dark .monthly-matrix-table tbody td {
  background: var(--byrd-surface);
  color: var(--byrd-text);
}

html.app-dark .monthly-matrix-table tbody td:last-child,
html.app-dark .monthly-matrix-table tbody td:nth-last-child(2),
html.app-dark .monthly-matrix-table tbody td:nth-last-child(3),
html.app-dark .monthly-matrix-table thead th:last-child,
html.app-dark .monthly-matrix-table thead th:nth-last-child(2),
html.app-dark .monthly-matrix-table thead th:nth-last-child(3) {
  color: var(--byrd-teal);
}

html.app-dark .customer-tile--branded {
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

html.app-dark .customer-tile.card {
  background-color: var(--byrd-surface);
  box-shadow: 0 4px 16px var(--byrd-shadow);
}

html.app-dark .customer-tile--branded::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.58) 0%,
    rgba(26, 29, 33, 0.42) 45%,
    rgba(26, 29, 33, 0.65) 100%
  );
}

html.app-dark .customer-tile--branded.customer-tile--bravo::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.64) 0%,
    rgba(26, 29, 33, 0.48) 40%,
    rgba(26, 29, 33, 0.72) 100%
  );
}

html.app-dark .customer-tile--branded:hover::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.62) 0%,
    rgba(26, 29, 33, 0.46) 45%,
    rgba(26, 29, 33, 0.68) 100%
  );
}

html.app-dark .customer-tile--static.customer-tile--branded:hover::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.58) 0%,
    rgba(26, 29, 33, 0.42) 45%,
    rgba(26, 29, 33, 0.65) 100%
  );
}

html.app-dark .customer-tile--static.customer-tile--branded.customer-tile--bravo:hover::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.64) 0%,
    rgba(26, 29, 33, 0.48) 40%,
    rgba(26, 29, 33, 0.72) 100%
  );
}

html.app-dark .customer-tile--hero.customer-tile--branded::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.24) 0%,
    rgba(26, 29, 33, 0.16) 50%,
    rgba(26, 29, 33, 0.3) 100%
  );
}

html.app-dark .customer-tile--hero.customer-tile--branded.customer-tile--bravo::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.28) 0%,
    rgba(26, 29, 33, 0.18) 50%,
    rgba(26, 29, 33, 0.34) 100%
  );
}

html.app-dark .customer-tile--static.customer-tile--hero.customer-tile--branded:hover::before,
html.app-dark .customer-tile--static.customer-tile--hero.customer-tile--branded.customer-tile--bravo:hover::before {
  background: linear-gradient(
    180deg,
    rgba(26, 29, 33, 0.24) 0%,
    rgba(26, 29, 33, 0.16) 50%,
    rgba(26, 29, 33, 0.3) 100%
  );
}

html.app-dark .customer-tile__name,
html.app-dark .customer-tile__stats dd {
  color: var(--byrd-text);
  text-shadow: none;
}

html.app-dark .customer-tile__stats dt {
  color: var(--byrd-hint);
  text-shadow: none;
}

html.app-dark .rueckmeldung-modal__option {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
  color: var(--byrd-text);
}

html.app-dark .rueckmeldung-modal__option:hover {
  background: var(--byrd-surface-muted);
}

html.app-dark .finish-article-modal__option,
html.app-dark .finish-article-modal__option:hover {
  background: var(--byrd-input-bg);
  border-color: var(--byrd-border);
}

html.app-dark .finish-article-modal__option--selected {
  background: var(--byrd-teal-light);
  border-color: var(--byrd-teal);
}

html.app-dark .settings-overlay__close,
html.app-dark .attributes-editor-panel__close {
  color: var(--byrd-label);
}

html.app-dark .ticket-match-modal__hint,
html.app-dark .ticket-match-modal__grund-meta,
html.app-dark .ticket-match-modal__grund-title,
html.app-dark .ticket-match-modal__table thead th,
html.app-dark .ticket-match-modal__table tbody th {
  color: var(--byrd-text-muted);
}

html.app-dark .ticket-match-modal__table th,
html.app-dark .ticket-match-modal__table td,
html.app-dark .ticket-match-modal__grund-text {
  color: var(--byrd-text);
  border-color: var(--byrd-border);
}

html.app-dark .ticket-match-modal__table thead th,
html.app-dark .ticket-match-modal__table tbody th {
  background: var(--byrd-surface-muted);
}

html.app-dark .ticket-match-modal__row--diff td,
html.app-dark .ticket-match-modal__row--diff th {
  background: #2a2418;
}

html.app-dark .ticket-match-modal__grund {
  background: #221a33;
  border-left-color: #9575cd;
}

html.app-dark ::placeholder {
  color: var(--byrd-text-muted);
  opacity: 1;
}