/* ─── Dark mode toggle button ─────────────────────────────────── */

.theme-toggle {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 200;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--tg-theme-hint-color, #ccc);
  background: var(--tg-theme-secondary-bg-color, #f0f0f0);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.2s, border-color 0.2s;
}

.theme-toggle:active {
  opacity: 0.7;
}

/* Reserve space so header text doesn't overlap the toggle */
header,
.review-header {
  padding-right: 40px;
}

/* ─── Verify page: status badges (dark) ───────────────────────── */

html.dark-mode .status-pending {
  background: #3e2a00;
  color: #ffab40;
}

html.dark-mode .status-approved {
  background: #1b3a1b;
  color: #66bb6a;
}

html.dark-mode .status-declined {
  background: #3a1b1b;
  color: #ef5350;
}

html.dark-mode .status-rejected {
  background: #3a1b28;
  color: #ec407a;
}

/* ─── Verify page: resolved banner (dark) ─────────────────────── */

html.dark-mode .resolved-approved {
  background: #1b3a1b;
  color: #66bb6a;
}

html.dark-mode .resolved-declined {
  background: #3a1b1b;
  color: #ef5350;
}

/* ─── Verify page: decline panel (dark) ───────────────────────── */

html.dark-mode .decline-panel {
  border-color: #ef5350;
}

/* ─── Verify page: error text (dark) ──────────────────────────── */

html.dark-mode .error {
  color: #ef5350;
}