/* app/static/css/onboarding.css
   Theme override for the vendored Driver.js guided-tour popover (see
   app/static/vendor/driverjs/driver.css) — reuses the app's own CSS custom
   properties so the tour matches both the light and dark theme automatically,
   instead of Driver.js's hardcoded defaults. */

.driver-popover {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .13);
  font-family: inherit;
}

.driver-popover-title {
  color: var(--text);
}

.driver-popover-description {
  color: var(--text-muted);
}

.driver-popover-progress-text {
  color: var(--text-subtle);
}

.driver-popover-close-btn {
  color: var(--text-subtle);
}

.driver-popover-close-btn:hover,
.driver-popover-close-btn:focus {
  color: var(--text);
}

.driver-popover-footer-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text);
}

.driver-popover-footer-btn:hover,
.driver-popover-footer-btn:focus {
  background: var(--surface-hover);
}

.driver-popover-next-btn,
.driver-popover-done-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}

.driver-popover-next-btn:hover,
.driver-popover-done-btn:hover {
  background: var(--accent);
  opacity: .88;
}